A List of Useful NPM Packages for React/Next JS Developers

npm i react-icons 

import { FaBeer } from "react-icons/fa"; function Question() { return ( <h3> Lets go for a <FaBeer />? </h3> ); } 

npm i react-select 

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 i react-bootstrap 

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 i react-chartjs-2 chart.js 

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 i swiper 

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 i react-tabs 

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 i react-dropzone 

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 i react-toastify 

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;