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

14 1 1 2 2

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

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

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

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (1)

Collapse
 
ameliasmith profile image
Amelia Smith

Thank you for share

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay