A List of Useful NPM Packages for React/Next JS Developers
Tags: react, nextjs, npm, javascript
Published: 2023-10-04 16:34:17

Check out the original blog where we share a list of more than 15 npm packages.

---

## <center>[https://democoding.in/list-of-useful-npm-package-for-reactjs](https://democoding.in/list-of-useful-npm-package-for-reactjs)</center>

--- 
A curated list of useful NPM packages for React developers.

## 1. React Icons

![React Icons npm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eqntm7mmt410j8z0k8cx.png)

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**

```bash
npm i react-icons
```

Example

```jsx
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](https://www.npmjs.com/package/react-icons)

Github
[https://github.com/react-icons/react-icons](https://github.com/react-icons/react-icons)

Official Website
[https://react-icons.github.io/react-icons/](https://react-icons.github.io/react-icons/)


 
---

## 2. React Select

![React Select npm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hcgic5hshv3fzqi5d1wf.png)

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**

```bash
npm i react-select
```

Example

```jsx
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](https://www.npmjs.com/package/react-select)

Github
[https://github.com/JedWatson/react-select/tree/master](https://github.com/JedWatson/react-select/tree/master)

Official Website
[https://react-select.com/home](https://react-select.com/home)

 
---

## 3. React Bootstrap

![React Bootstrap npm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4motigke0prvszhx0x1t.png)

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**

```bash
npm i react-bootstrap
```

Example

```jsx
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](https://www.npmjs.com/package/react-bootstrap)

Github
[https://github.com/react-bootstrap/react-bootstrap](https://github.com/react-bootstrap/react-bootstrap)

Official Website
[https://react-bootstrap.github.io/](https://react-bootstrap.github.io/)

 
---


## 4. react-chartjs-2

![react-chartjs-2 npm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b5s793sl0t5gp9z5009l.png)

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**

```bash
npm i react-chartjs-2 chart.js
```

Example
[https://react-chartjs-2.js.org/examples/](https://react-chartjs-2.js.org/examples/)

```jsx
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](https://www.npmjs.com/package/react-chartjs-2)

Github
[https://github.com/reactchartjs/react-chartjs-2](https://github.com/reactchartjs/react-chartjs-2)

Official Website
[https://react-chartjs-2.js.org/](https://react-chartjs-2.js.org/)

 
---
---

## <center>[https://democoding.in/list-of-useful-npm-package-for-reactjs](https://democoding.in/list-of-useful-npm-package-for-reactjs)</center>

--- 


## 5. Swiper

![Swiper npm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7l39e7i6q539bmia4a6.png)

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**

```bash
  npm i swiper
```

Example
[https://swiperjs.com/demos/](https://swiperjs.com/demos/)

```jsx
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](https://www.npmjs.com/package/swiper)

Github
[https://github.com/nolimits4web/Swiper](https://github.com/nolimits4web/Swiper)

Official Website
[https://swiperjs.com/](https://swiperjs.com/)

  
---

## 6. react-tabs

![react-tabs npm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wjsml2ltfc589fqjoygp.png)

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**

```bash
npm i react-tabs
```

Example

```jsx
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](https://www.npmjs.com/package/react-tabs)

Github
[https://github.com/reactjs/react-tabs](https://github.com/reactjs/react-tabs)

Official Website
[https://reactcommunity.org/react-tabs/](https://reactcommunity.org/react-tabs/)

 
---


## 7. react-dropzone

![react-dropzone npm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3efbd4j4cw3brzhpiy72.png)

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**

```bash
npm i react-dropzone
```

Example

```jsx
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](https://www.npmjs.com/package/react-dropzone)

Github
[https://github.com/react-dropzone/react-dropzone](https://github.com/react-dropzone/react-dropzone)

Official Website
[https://react-dropzone.js.org/](https://react-dropzone.js.org/)

Important links
1. [Create a Drag-and-Drop zone in React with react-dropzone](https://medium.com/stackanatomy/create-a-drag-and-drop-zone-in-react-with-react-dropzone-1fcdc6a3be4b)
2. [Upload Images with React-Dropzone](https://cloudinary.com/blog/guest_post/upload-images-with-react-dropzone)

---

## 8. react-toastify

![react-toastify npm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tib0dfk5njwosnrgtee6.png)

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**

```bash
npm i react-toastify
```

Example

```jsx
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](https://www.npmjs.com/package/react-toastify)

Github
[https://github.com/fkhadra/react-toastify](https://github.com/fkhadra/react-toastify)

Official Website
[https://fkhadra.github.io/react-toastify/introduction](https://fkhadra.github.io/react-toastify/introduction)

 
---

Check out the original blog where we share a list of more than 15 npm packages.

---

## <center>[https://democoding.in/list-of-useful-npm-package-for-reactjs](https://democoding.in/list-of-useful-npm-package-for-reactjs)</center>

--- 

---

Thank you for giving your valuable time!

If you found these helpful, share them with your mates.

---

### Check high-value resources

{% link https://dev.to/jon_snow789/awesome-list-of-free-css-generator-293k %}

{% link https://dev.to/jon_snow789/20-github-repositories-every-developer-should-bookmarkhigh-value-resources-4jm6 %}

### CSS Generator 

{% link https://dev.to/jon_snow789/glassmorphism-css-generator-k90 %}

{% link https://dev.to/jon_snow789/css-gradient-generator-aih %}

{% link https://dev.to/jon_snow789/instagram-3d-post-generator-2h7p %}

---

Thanks for Reading ❤️! Check my website [Demo coding](https://democoding.in/) 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](https://www.youtube.com/@democode)