Check out the original blog where we share a list of more than 15 npm packages.
https://democoding.in/list-of-useful-npm-package-for-reactjs
A curated list of useful NPM packages for React developers.
1. React Icons
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/
2. React Select
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
3. React Bootstrap
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/
4. react-chartjs-2
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/
https://democoding.in/list-of-useful-npm-package-for-reactjs
5. Swiper
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/
6. react-tabs
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/
7. react-dropzone
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
8. react-toastify
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
Check out the original blog where we share a list of more than 15 npm packages.
https://democoding.in/list-of-useful-npm-package-for-reactjs
Thank you for giving your valuable time!
If you found these helpful, share them with your mates.
Check high-value resources
21 Github repositories every developer should bookmark(high value resources)
Jon Snow ・ Mar 30
CSS Generator
Thanks for Reading ❤️! Check my website Demo coding for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let's be friends!
Don't forget to subscribe to our channel : Demo code
Top comments (1)
Thank you for share