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!
Top comments (0)