Jon Snow
2 Oct, 2023
A curated list of useful NPM packages for React developers.
React Icons is a collection of popular icons from popular icon packs such as Font Awesome, Material Design Icons, etc. It is a very useful package for React developers as it provides a wide range of icons to choose from.
Install React Icons
npm i react-icons
Example
import { FaBeer } from "react-icons/fa";
function Question() {
return (
<h3>
Lets go for a <FaBeer />?
</h3>
);
}
NPM package https://www.npmjs.com/package/react-icons
Github https://github.com/react-icons/react-icons
Official Website https://react-icons.github.io/react-icons/
React Select is a flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete, async and creatable support. It is a very useful package for React developers as it provides a wide range of features to choose from.
Install React Select
npm i react-select
Example
import React, { useState } from 'react';
import Select from 'react-select';
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' },
];
export default function App() {
const [selectedOption, setSelectedOption] = useState(null);
return (
<div className="App">
<Select
defaultValue={selectedOption}
onChange={setSelectedOption}
options={options}
/>
</div>
);
}
NPM package https://www.npmjs.com/package/react-select
Github https://github.com/JedWatson/react-select/tree/master
Official Website https://react-select.com/home
React Bootstrap is a popular front-end framework for React developers. It is a very useful package for React developers as it provides a wide range of components to choose from.
Install React Bootstrap
npm i react-bootstrap
Example
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
function BasicExample() {
return (
<Card style={{ width: '18rem' }}>
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
);
}
export default BasicExample;
NPM package https://www.npmjs.com/package/react-bootstrap
Github https://github.com/react-bootstrap/react-bootstrap
Official Website https://react-bootstrap.github.io/
react-chartjs-2 is a popular charting library for React developers. It is a very useful package for React developers as it provides a wide range of charts to choose from.
Install react-chartjs-2
npm i react-chartjs-2 chart.js
Example https://react-chartjs-2.js.org/examples/
import React from 'react';
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
import { Doughnut } from 'react-chartjs-2';
ChartJS.register(ArcElement, Tooltip, Legend);
const data = {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
],
borderWidth: 1,
},
],
};
export default function ShowChart() {
return <Doughnut data={data} />;
}
NPM package https://www.npmjs.com/package/react-chartjs-2
Github https://github.com/reactchartjs/react-chartjs-2
Official Website https://react-chartjs-2.js.org/
Swiper is a popular mobile touch slider with hardware accelerated transitions. It is a very useful package for React developers as it provides a wide range of features to choose from.
Install Swiper
npm i swiper
Example https://swiperjs.com/demos/
import React from 'react';
// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import './styles.css';
// import required modules
import { Autoplay, Pagination, Navigation } from 'swiper/modules';
export default function App() {
return (
<>
<Swiper
spaceBetween={30}
centeredSlides={true}
autoplay={{
delay: 2500,
disableOnInteraction: false,
}}
pagination={{
clickable: true,
}}
navigation={true}
modules={[Autoplay, Pagination, Navigation]}
className="mySwiper"
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
<SwiperSlide>Slide 5</SwiperSlide>
<SwiperSlide>Slide 6</SwiperSlide>
<SwiperSlide>Slide 7</SwiperSlide>
<SwiperSlide>Slide 8</SwiperSlide>
<SwiperSlide>Slide 9</SwiperSlide>
</Swiper>
</>
);
}
NPM package https://www.npmjs.com/package/swiper
Github https://github.com/nolimits4web/Swiper
Official Website https://swiperjs.com/
react-tabs is a popular tab component for React developers. It is a very useful package for React developers as it provides a wide range of features to choose from.
Install react-tabs
npm i react-tabs
Example
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';
export default () => (
<Tabs>
<TabList>
<Tab>Title 1</Tab>
<Tab>Title 2</Tab>
</TabList>
<TabPanel>
<h2>Any content 1</h2>
</TabPanel>
<TabPanel>
<h2>Any content 2</h2>
</TabPanel>
</Tabs>
);
NPM package https://www.npmjs.com/package/react-tabs
Github https://github.com/reactjs/react-tabs
Official Website https://reactcommunity.org/react-tabs/
react-dropzone is a popular drag and drop file uploader for React developers. It is a very useful package for React developers as it provides a wide range of features to choose from.
Install react-dropzone
npm i react-dropzone
Example
import React from 'react';
import {useDropzone} from 'react-dropzone';
const Basic = (props)=>{
const {acceptedFiles, getRootProps, getInputProps} = useDropzone();
const files = acceptedFiles.map(file => (
<li key={file.path}>
{file.path} - {file.size} bytes
</li>
));
return (
<section className="container">
<div {...getRootProps({className: 'dropzone'})}>
<input {...getInputProps()} />
<p>Drag 'n' drop some files here, or click to select files</p>
</div>
<aside>
<h4>Files</h4>
<ul>{files}</ul>
</aside>
</section>
);
}
export default Basic;
NPM package https://www.npmjs.com/package/react-dropzone
Github https://github.com/react-dropzone/react-dropzone
Official Website https://react-dropzone.js.org/
Important links
react-toastify is a popular toast notification for React developers. It is a very useful package for React developers as it provides a wide range of features to choose from.
Install react-toastify
npm i react-toastify
Example
import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
function App(){
const notify = () => toast('🦄 Wow so easy!', {
position: "top-right",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "light",
});
return (
<div>
<button onClick={notify}>Notify!</button>
<ToastContainer />
</div>
);
}
export default App;
NPM package https://www.npmjs.com/package/react-toastify
Github https://github.com/fkhadra/react-toastify
Official Website https://fkhadra.github.io/react-toastify/introduction
react-virtualized is used to display large lists of data. It is a very useful package for React developers as it provides a wide range of features to choose from.
Install react-virtualized
npm i react-virtualized
Example
import React from "react";
import { List } from "react-virtualized";
import "style.css";
// List data as an array of strings
const list = ["Apple", "Banana", "Orange", "Kiwi", "Peach", "Pear", "Grape"];
function rowRenderer({
key, // Unique key within array of rows
index, // Index of row within collection
isScrolling, // The List is currently being scrolled
isVisible, // This row is visible within the List (eg it is not an overscanned row)
style // Style object to be applied to row (to position it)
}) {
return (
<div key={key} style={style} className="row">
{list[index]}
</div>
);
}
export default function App() {
return (
<List
width={200} // Width of the list
height={100} // Height of the list
rowCount={list.length} // Number of rows in list
rowHeight={20} // Each row height
rowRenderer={rowRenderer} // Function responsible for rendering a row
className="List" // Adding css
/>
);
}
NPM package https://www.npmjs.com/package/react-virtualized
Github https://github.com/bvaughn/react-virtualized
Official Website https://bvaughn.github.io/react-virtualized/#/components/List
Important links
react-hook-form is a popular form validation library for React developers. It is a very useful package for React developers as it provides a wide range of features to choose from.
Install react-hook-form
npm i react-hook-form
Example
import { useForm } from 'react-hook-form';
const App = ()=> {
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
return (
<form onSubmit={handleSubmit((data) => console.log(data))}>
<input {...register('firstName')} />
<input {...register('lastName', { required: true })} />
{errors.lastName && <p>Last name is required.</p>}
<input {...register('age', { pattern: /\d+/ })} />
{errors.age && <p>Please enter number for age.</p>}
<input type="submit" />
</form>
);
}
export default App;
NPM package https://www.npmjs.com/package/react-hook-form
Github https://github.com/react-hook-form/react-hook-form
Official Website https://www.react-hook-form.com/
Important links
react-player is a popular React component for playing various media. It is a very useful package for React developers as it provides a wide range of features to choose from.
Install react-player
npm i react-player
Example
import React from 'react'
import ReactPlayer from 'react-player'
// Render a YouTube video player
<ReactPlayer url='https://www.youtube.com/watch?v=4SbpodyMno0' />
Responsive player
<div className='player-wrapper'>
<ReactPlayer
className='react-player'
url='https://www.youtube.com/watch?v=4SbpodyMno0'
width='100%'
height='100%'
/>
</div>
CSS Code
.player-wrapper {
position: relative;
padding-top: 56.25%; /* Player ratio: 100 / (1280 / 720) */
}
.react-player {
position: absolute;
top: 0;
left: 0;
}
NPM package https://www.npmjs.com/package/react-player
Github https://github.com/CookPete/react-player
Official Website https://cookpete.com/react-player/
react-color is a popular color picker for React developers. It is a very useful package for React developers as it provides a wide range of features to choose from.
Install react-color
npm i react-color
Example
import React, { useState } from 'react';
import { SketchPicker } from 'react-color';
function Component() {
const [background, setBackground] = useState('#fff');
const handleChangeComplete = (color) => {
setBackground(color.hex);
};
return (
<SketchPicker
color={background}
onChangeComplete={handleChangeComplete}
/>
);
}
export default Component;
NPM package https://www.npmjs.com/package/react-color
Github https://github.com/casesandberg/react-color
Official Website https://casesandberg.github.io/react-color/
rc-pagination is a popular pagination component for React developers. It is a very useful package for React developers as it provides a wide range of features to choose from.
Install rc-pagination
npm i rc-pagination
Example https://pagination-react-component.vercel.app/demo/basic
import React from 'react';
import Pagination from 'rc-pagination';
const App = () => (
<>
<Pagination total={25} />
<Pagination total={50} />
<Pagination total={60} />
<Pagination total={70} />
<Pagination total={80} />
<Pagination total={90} />
<Pagination total={100} />
<Pagination total={120} />
<Pagination total={500} />
</>
);
export default App;
NPM package https://www.npmjs.com/package/rc-pagination
Github https://github.com/react-component/pagination
Official Website https://pagination-react-component.vercel.app/
react-share is a popular social media share button for React developers. It is a very useful package for React developers as it provides a wide range of features to choose from.
Install react-share
npm i react-share
Example
import { FacebookShareButton, , FacebookIcon } from "react-share";
const ShareButton = () => {
return (
<FacebookShareButton
url={"https://democoding.in/list-of-useful-npm-package-for-reactjs"}
quote={"A List Of Useful NPM Package For React/Next Js Developer"}
hashtag="#reactjs"
>
<FacebookIcon size={32} round={true} />
</FacebookShareButton>
);
};
export default ShareButton;
NPM package https://www.npmjs.com/package/react-share
Github https://github.com/nygardk/react-share
Official Website https://nygardk.github.io/react-share/
MDX allows you to use JSX in your markdown content. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast 🚀.
Setp : 1 - Install mdx
npm install @mdx-js/react
Step 2 - Create a component
import { MDXProvider } from "@mdx-js/react";
import MyComponent from "./MyComponent";
const components = {
MyComponent,
};
const MyMDXFile = `
# My MDX file
This is some **Markdown** content.
<MyComponent />
`;
const App = () => {
return (
<MDXProvider components={components}>
<MyMDXFile />
</MDXProvider>
);
};
export default App;
Step 1 - Install mdx
npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx
Step 2 - Create mdx-components.jsx
// This file allows you to provide custom React components
// to be used in MDX files. You can import and use any
// React component you want, including components from
// other libraries.
// This file is required to use MDX in `app` directory.
export function useMDXComponents(components) {
return {
// Allows customizing built-in components, e.g. to add styling.
h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>,
...components,
}
}
Step 3 - Update next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
mdxRs: true,
},
}
const withMDX = require('@next/mdx')()
module.exports = withMDX(nextConfig)
Step 4 - Create a mdx file ( hello.mdx )
I **love** using [DemoCoding](https://democoding.in/)
import {Chart} from './snowfall.js'
export const year = 2018
# Last year’s snowfall
In {year}, the snowfall was above average.
It was followed by a warm spring which caused
flood conditions in many of the nearby rivers.
<Chart year={year} color="#fcb32c" />
Step 5 - Import the mdx file
import HelloWorld from './hello.mdx'
export default function Page() {
return <HelloWorld />
}
NPM package
Github https://github.com/mdx-js/mdx
Official Website