5 Useful React Libraries ⚛️ Part-2
Tags: webdev, react, github, codenewbie
Published: 2021-07-08 06:58:06

**Hello Everyone👋**
Here another part of my series **React Useful Libraries⚛️**. So today, I want to share 5 react libraries that will help you to make react projects better and more customized.

**1️⃣ React-Toastify**
🎉 React-Toastify allows you to add notifications to your app with easily. You Can display a react component inside the toast. It's super easy to customize and provide dark mode.
![toast](https://res.cloudinary.com/chetan-ca/image/upload/v1625646732/RL/RTF_1_cmzkfe.jpg)
📌[Homepage](https://github.com/fkhadra/react-toastify#readme)
📡[GitHub](https://github.com/fkhadra/react-toastify)

**🔗Installation**
`$ npm install --save react-toastify`
`$ yarn add react-toastify`
**🔗Usage**
```jsx
import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';
 function App(){
    const notify = () => toast("Wow so easy!");
return (
      <div>
        <button onClick={notify}>Notify!</button>
        <ToastContainer />
      </div>
    );
  }
```
**2️⃣ RC-Slider**
It is provide Slider UI component for React. 
![Slide](https://res.cloudinary.com/chetan-ca/image/upload/v1625646732/RL/RCS_2_fb6mqj.jpg)
📌[Homepage](http://github.com/react-component/slider/)
📡[GitHub](https://github.com/react-component/slider)

**🔗Installation**
`npm install rc-slider`
**🔗Usage**
```jsx
import Slider, { Range } from 'rc-slider';
import 'rc-slider/assets/index.css';

export default () => (
  <>
    <Slider />
    <Range />
  </>
);
```
3️⃣ **React Intl**
React Intl is a library that helps to internationalize React applications. It provides components and API to format text, numbers, and dates. With the internationalization context provided by React Intl, we can use translation and formatting in any React component throughout the application.
![intl](https://res.cloudinary.com/chetan-ca/image/upload/v1625646731/RL/RINT_3_atpwwd.jpg)
📌[Homepage](https://formatjs.io/docs/react-intl)
📡[GitHub](https://github.com/formatjs/formatjs)

🔗**Installation**
``npm i -S react-intl``
🔗**Usage**
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {injectIntl, IntlProvider, FormattedRelative, useIntl} from 'react-intl';

const MS_IN_DAY = 1e3 * 3600 * 24

const PostDate = ({date}) => {
  const intl = useIntl()
  return (
    <span title={intl.formatDate(date)}>
      <FormattedRelativeTime value={(Date.now() - date)/MS_IN_DAY} unit="day"/>
    </span>
  )
});

const App = ({post}) => (
  <div>
    <h1>{post.title}</h1>
    <p>
      <PostDate date={post.date} />
    </p>
    <div>{post.body}</div>
  </div>
);

ReactDOM.render(
  <IntlProvider locale={navigator.language}>
    <App
      post={{
        title: 'Hello, World!',
        date: new Date(1459913574887),
        body: 'Amazing content.',
      }}
    />
  </IntlProvider>,
  document.getElementById('container')
);
```
4️⃣ **React Tippy**
Tippy.js is a lightweight, easy-to-use library that provides tooltip solutions, as well as other pop-out style GUI tools. A tooltip is a textbox that appears while your cursor hovers over an element in an application and is useful for displaying additional information that a user may need.
![tooltip](https://res.cloudinary.com/chetan-ca/image/upload/v1625646731/RL/RTT_4_wwlrve.jpg) 
📌[Homepage](https://github.com/tvkhoa/react-tippy)
📡[GitHub](https://github.com/tvkhoa/react-tippy)

🔗**Installation**
``npm install react-tippy``
🔗**Usage**
First, you need import css
``import 'react-tippy/dist/tippy.css'``
Second, add tooltip component
```jsx
import {
  Tooltip,
} from 'react-tippy';


<Tooltip
  // options
  title="Welcome to React"
  position="bottom"
  trigger="click"
>
  <p>
    Click here to show popup
  </p>
</Tooltip>
```
5️⃣**React Moment**
It's a react component for the moment date library. Moment date library for parsing, validating, manipulating, and formatting dates.
![moment](https://res.cloudinary.com/chetan-ca/image/upload/v1625646731/RL/RM_5_bqajlh.jpg)
📌[Homepage](https://github.com/headzoo/react-moment#readme)
📡[GitHub](https://github.com/headzoo/react-moment)

🔗**Installation**
``npm install --save moment react-moment``
🔗**Usage**
```jsx
import React  from 'react';
import Moment from 'react-moment';

export default class MyComponent extends React.Component {
    render() {
        return (
            const dateToFormat = '1976-04-19T12:59-0500';
            <Moment>{dateToFormat}</Moment>
        );
    }
}
```
I hope you like this react libraries please drop your comments about your thoughts and suggest more libraries you used  in react projects.
For more content follow me on
Instagram @chetan .fullstack

**Thank You**
😎 **Keep Claim And Just Code It!**