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

Jon Snow

2 Oct, 2023

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


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

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

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

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

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/



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

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

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

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

  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

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



9. react-virtualized

react-virtualized npm

react-virtualized is used to display large lists of data. It is a very useful package for React developers as it provides a wide range of features to choose from.

Install react-virtualized

npm i react-virtualized

Example

import React from "react";
import { List } from "react-virtualized";
import "style.css";

// List data as an array of strings
const list = ["Apple", "Banana", "Orange", "Kiwi", "Peach", "Pear", "Grape"];

function rowRenderer({
  key, // Unique key within array of rows
  index, // Index of row within collection
  isScrolling, // The List is currently being scrolled
  isVisible, // This row is visible within the List (eg it is not an overscanned row)
  style // Style object to be applied to row (to position it)
}) {
  return (
    <div key={key} style={style} className="row">
      {list[index]}
    </div>
  );
}

export default function App() {
  return (
    <List
      width={200}   // Width of the list
      height={100}  // Height of the list
      rowCount={list.length}  // Number of rows in list
      rowHeight={20}    // Each row height 
      rowRenderer={rowRenderer}   // Function responsible for rendering a row
      className="List"  // Adding css
    />
  );
}

NPM package https://www.npmjs.com/package/react-virtualized

Github https://github.com/bvaughn/react-virtualized

Official Website https://bvaughn.github.io/react-virtualized/#/components/List

Important links

  1. Rendering large lists with React Virtualized
  2. React Virtualized: A Comprehensive Guide


10. react-hook-form

react-hook-form npm

react-hook-form is a popular form validation library 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-hook-form

npm i react-hook-form

Example

import { useForm } from 'react-hook-form';

const App = ()=> {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input {...register('firstName')} />
      <input {...register('lastName', { required: true })} />
      {errors.lastName && <p>Last name is required.</p>}
      <input {...register('age', { pattern: /\d+/ })} />
      {errors.age && <p>Please enter number for age.</p>}
      <input type="submit" />
    </form>
  );
}

export default App;

NPM package https://www.npmjs.com/package/react-hook-form

Github https://github.com/react-hook-form/react-hook-form

Official Website https://www.react-hook-form.com/

Important links

  1. How to Create Forms in React using react-hook-form
  2. How to Create and Validate Forms With React Hook Form


11. react-player

react-player npm

react-player is a popular React component for playing various media. It is a very useful package for React developers as it provides a wide range of features to choose from.

Install react-player

npm i react-player

Example

import React from 'react'
import ReactPlayer from 'react-player'

// Render a YouTube video player
<ReactPlayer url='https://www.youtube.com/watch?v=4SbpodyMno0' />

Responsive player

<div className='player-wrapper'>
  <ReactPlayer
    className='react-player'
    url='https://www.youtube.com/watch?v=4SbpodyMno0'
    width='100%'
    height='100%'
  />
</div>

CSS Code

.player-wrapper {
  position: relative;
  padding-top: 56.25%; /* Player ratio: 100 / (1280 / 720) */
}

.react-player {
  position: absolute;
  top: 0;
  left: 0;
}

Check more

NPM package https://www.npmjs.com/package/react-player

Github https://github.com/CookPete/react-player

Official Website https://cookpete.com/react-player/



12. react-color

react-color npm

react-color is a popular color picker 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-color

npm i react-color

Example

import React, { useState } from 'react';
import { SketchPicker } from 'react-color';

function Component() {
  const [background, setBackground] = useState('#fff');

  const handleChangeComplete = (color) => {
    setBackground(color.hex);
  };

  return (
    <SketchPicker
      color={background}
      onChangeComplete={handleChangeComplete}
    />
  );
}

export default Component;

NPM package https://www.npmjs.com/package/react-color

Github https://github.com/casesandberg/react-color

Official Website https://casesandberg.github.io/react-color/



13. rc-pagination

rc-pagination npm

rc-pagination is a popular pagination 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 rc-pagination

npm i rc-pagination

Example https://pagination-react-component.vercel.app/demo/basic

import React from 'react';
import Pagination from 'rc-pagination';

const App = () => (
  <>
    <Pagination total={25} />
    <Pagination total={50} />
    <Pagination total={60} />
    <Pagination total={70} />
    <Pagination total={80} />
    <Pagination total={90} />
    <Pagination total={100} />
    <Pagination total={120} />
    <Pagination total={500} />
  </>
);

export default App;

NPM package https://www.npmjs.com/package/rc-pagination

Github https://github.com/react-component/pagination

Official Website https://pagination-react-component.vercel.app/


14. react-share

react-share npm

react-share is a popular social media share button 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-share

npm i react-share

Example

import { FacebookShareButton, , FacebookIcon } from "react-share";

const ShareButton = () => {
  return (
    <FacebookShareButton
      url={"https://democoding.in/list-of-useful-npm-package-for-reactjs"}
      quote={"A List Of Useful NPM Package For React/Next Js Developer"}
      hashtag="#reactjs"
    >
      <FacebookIcon size={32} round={true} />
    </FacebookShareButton>
  );
};

export default ShareButton;

NPM package https://www.npmjs.com/package/react-share

Github https://github.com/nygardk/react-share

Official Website https://nygardk.github.io/react-share/


15. Mdx

mdx npm

MDX allows you to use JSX in your markdown content. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast 🚀.


How to use mdx in React js

Setp : 1 - Install mdx

npm install @mdx-js/react

Step 2 - Create a component

import { MDXProvider } from "@mdx-js/react";
import MyComponent from "./MyComponent";

const components = {
  MyComponent,
};

const MyMDXFile = `
# My MDX file

This is some **Markdown** content.

<MyComponent />
`;

const App = () => {
  return (
    <MDXProvider components={components}>
      <MyMDXFile />
    </MDXProvider>
  );
};

export default App;

How to use mdx in Next js

Step 1 - Install mdx

npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx

Step 2 - Create mdx-components.jsx

// This file allows you to provide custom React components
// to be used in MDX files. You can import and use any
// React component you want, including components from
// other libraries.
 
// This file is required to use MDX in `app` directory.
export function useMDXComponents(components) {
  return {
    // Allows customizing built-in components, e.g. to add styling.
     h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>,
    ...components,
  }
}

Step 3 - Update next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    mdxRs: true,
  },
}
 
const withMDX = require('@next/mdx')()
module.exports = withMDX(nextConfig)

Step 4 - Create a mdx file ( hello.mdx )

I **love** using [DemoCoding](https://democoding.in/)

import {Chart} from './snowfall.js'
export const year = 2018

# Last year’s snowfall

In {year}, the snowfall was above average.
It was followed by a warm spring which caused
flood conditions in many of the nearby rivers.

<Chart year={year} color="#fcb32c" />

Step 5 - Import the mdx file

 import HelloWorld from './hello.mdx'
 
export default function Page() {
  return <HelloWorld />
}

NPM package

Github https://github.com/mdx-js/mdx

Official Website



Share:  
https://www.democoding.in/list...

Related Post