DEV Community

Cover image for A List of Useful NPM Packages for React/Next JS Developers
Jon Snow
Jon Snow

Posted on • Originally published at democoding.in

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

#react #nextjs #npm #javascript

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 npm

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
Enter fullscreen mode Exit fullscreen mode

Example

import { FaBeer } from "react-icons/fa";

function Question() {
  return (
    <h3>
      Lets go for a <FaBeer />?
    </h3>
  );
}
Enter fullscreen mode Exit fullscreen mode

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 npm

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
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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 npm

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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 npm

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
Enter fullscreen mode Exit fullscreen mode

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} />;
}
Enter fullscreen mode Exit fullscreen mode

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 npm

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
Enter fullscreen mode Exit fullscreen mode

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>
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

NPM package
https://www.npmjs.com/package/swiper

Github
https://github.com/nolimits4web/Swiper

Official Website
https://swiperjs.com/

6. react-tabs

react-tabs npm

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
Enter fullscreen mode Exit fullscreen mode

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>
);
Enter fullscreen mode Exit fullscreen mode

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 npm

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

  1. Create a Drag-and-Drop zone in React with react-dropzone
  2. Upload Images with React-Dropzone

8. react-toastify

react-toastify npm

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

jon_snow789

Awesome list of free CSS Generator

Jon Snow ・ Jul 8 '23

#webdev #programming #css #tutorial
jon_snow789

21 Github repositories every developer should bookmark(high value resources)

Jon Snow ・ Mar 30 '23

#github #webdev #javascript #beginners

CSS Generator

jon_snow789

Glassmorphism CSS Generator

Jon Snow ・ Apr 30 '23

#webdev #css #programming #productivity
jon_snow789

CSS Gradient Generator

Jon Snow ・ May 3 '23

#css #webdev #productivity #tutorial
jon_snow789

Instagram 3D Post Generator

Jon Snow ・ May 6 '23

#webdev #programming #productivity #tutorial

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)

Collapse
 
ameliasmith profile image
Amelia Smith •

Thank you for share

Read next

ibrahemahmad profile image

# Key New Features in React Router 7: Embracing the Remix Future

Ibrahem ahmad -

biomathcode profile image

Explaining Scoped Context in React with example

Pratik sharma -

peterlidee profile image

3. How to setup Jest in a Next 15 project (+ eslint for testing)

Peter Jacxsens -

peterlidee profile image

4. Testing (async) searchParams with Jest in Next 15

Peter Jacxsens -