Hey folks 👋

I am Ashik Chapagain. I am a full-stack web developer.

Today, I am going to share some useful react libraries with the hashnode community.

1. @tippyjs/react

Tooltip, Popover, and Menu are the important components for the web. And tippy js helps to create tooltip, popover, and menus very easily.

Tippy js is an abstraction over Popper that provides common logic involved in all types of elements that pop out on top of the UI, positioned next to a target or reference element. (More)

Basic Usage:

import React from 'react';
import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css'; // optional

const StringContent = () => (
  <Tippy content="Hello">
    <button>My button</button>
  </Tippy>
);

const JSXContent = () => (
  <Tippy content={<span>Tooltip</span>}>
    <button>My button</button>
  </Tippy>
);

2. react-icons

Icons act as a great attention grabber on your website. So react-icons can help you get the icons from all the popular icons providers.

Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allow you to include only the icons that your project is using. (More)

Basic Usage:

import { FaBeer } from 'react-icons/fa';

class Question extends React.Component {
    render() {
        return <h3> Lets go for a <FaBeer />? </h3>
    }
}

3. react-hot-toast

Notifications toast takes the website interaction to the next level. And react-hot-toast helps you create amazing and customizable toast with just a few lines of code.

Add beautiful notifications to your React app with react-hot-toast. (More)

Basic Usage:

import toast, { Toaster } from 'react-hot-toast';
const notify = () => toast('Here is your toast.');
const App = () => {
  return (
    <div>
      <button onClick={notify}>Make me a toast</button>
      <Toaster />
    </div>
  );
};

4. react-loading-skeleton

Nowadays skeleton loading is getting popular and adding it to your website has been easy with the react-loading-skeleton package.

Make beautiful, animated loading skeletons that automatically adapt to your app. (More)

Basic Usage:

import Skeleton from 'react-loading-skeleton';

<Skeleton/> // Simple, single-line loading skeleton
<Skeleton count={5}/> // Five-line loading skeleton

5. swr

Remote data fetching is essential in frontend application most of the application. And data fetching with SWR is amazing compared to other libraries. Because

SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again. (More)

Basic Usage:

import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

6. react-copy-to-clipboard

Copying text to the clipboard in React apps is easier with the help of react-copy-to-clipboard.

Simple module exposing copy function that will try to use execCommand with fallback to IE-specific clipboardData interface and finally, resort to usual prompt with proper text content and message. (More)

Basic Usage:

<CopyToClipboard text="Hello!">
  <button>Copy to clipboard</button>
</CopyToClipboard>

7. nextjs-progressbar

The progress bar on the website shows how much of the content on the page has been loaded. And we can add this in the Next.js project simply using the nextjs-progressbar package.

A simple Next.js progressbar component using NProgress. (More)

Basic Usage:

// in _app.js or _app.tsx

import NextNprogress from 'nextjs-progressbar';

<NextNprogress
  color="#29D"
  startPosition={0.3}
  stopDelayMs={200}
  height={3}
  showOnShallow={true}
/>

Hope you like the article. If so react and comment to this article.

Connect with me:

• Twitter : https://twitter.com/@ChapagainAshik
• Hashnode: https://hashnode.com/@chapagainashik