DEV Community

Cover image for 5 Useful React Libraries โš›๏ธ Part-2
Chetan Atrawalkar
Chetan Atrawalkar

Posted on • Edited on

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.
toast
๐Ÿ“Œ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>
    );
  }
Enter fullscreen mode Exit fullscreen mode

2๏ธโƒฃ RC-Slider
It is provide Slider UI component for React.
Slide
๐Ÿ“ŒHomepage
๐Ÿ“กGitHub

๐Ÿ”—Installation
npm install rc-slider
๐Ÿ”—Usage

import Slider, { Range } from 'rc-slider';
import 'rc-slider/assets/index.css';

export default () => (
  <>
    <Slider />
    <Range />
  </>
);
Enter fullscreen mode Exit fullscreen mode

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
๐Ÿ“Œ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')
);
Enter fullscreen mode Exit fullscreen mode

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
๐Ÿ“Œ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>
Enter fullscreen mode Exit fullscreen mode

5๏ธโƒฃReact Moment
It's a react component for the moment date library. Moment date library for parsing, validating, manipulating, and formatting dates.
moment
๐Ÿ“Œ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>
        );
    }
}
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)