5 Useful React Libraries ⚛️ Part-2

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.

📌Homepage
📡GitHub

🔗Installation
$ npm install --save react-toastify
$ yarn add react-toastify
🔗Usage

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.

📌Homepage
📡GitHub

🔗Installation
npm install rc-slider
🔗Usage

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.

📌Homepage
📡GitHub

🔗Installation
npm i -S react-intl
🔗Usage

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.

📌Homepage
📡GitHub

🔗Installation
npm install react-tippy
🔗Usage
First, you need import css
import 'react-tippy/dist/tippy.css'
Second, add tooltip component

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.

📌Homepage
📡GitHub

🔗Installation
npm install --save moment react-moment
🔗Usage

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!