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 * 24const 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>

5React 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!