Unleash the Power of React.js: 10 Must-Have NPM Libraries with Code Examples to Transform Your Development Game!

NPM (Node Package Manager) is a library and registry for JavaScript software packages maintained by npm, Inc.

NPM libraries are like magic wands in the hands of developers. They allow us to work smarter, not harder, by providing pre-built solutions to common problems. With the right libraries in your toolkit, you can save time, streamline your workflow, and focus on what really matters: creating amazing applications.

Whether you’re building a small side project or a large-scale enterprise application, there’s an NPM library out there that can help.

1. React Router :

A routing library for React.js that allows dynamic routing and URL handling. It enables us to build single-page applications with multiple views.

import React from "react";
import { Routes, Route } from "react-router-dom";
import { Homepage } from "./Homepage";
import { Login } from "./Login";

export const MainRoutes = () => {
  return (
    <Routes>
      {/* Provide all routes here */}
      <Route path="/" element={<Homepage />} />
      <Route path="/login" element={<Login />} />
      <Route path="*" element={<h3>404 Error Page not found</h3>} />
    </Routes>
  );
};

2. Axios :

A Promise-based HTTP client for making API requests from the browser or Node.js. Axios is a perfect alternative for Fetch API.

import axios from "axios";

axios
  .get("/api/users")
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.log(error);
  });

3. React Redux :

A predictable state container for managing application state in React. It provides a centralized store for application data and allows us to easily update and retrieve the states.

import { createStore } from "redux";

const initialState = {
  count: 0,
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case "INCREMENT":
      return {
        count: state.count + 1,
      };
    case "DECREMENT":
      return {
        count: state.count - 1,
      };
    default:
      return state;
  }
}

const store = createStore(reducer);

store.dispatch({ type: "INCREMENT" });

console.log(store.getState());

4. Material-UI :

A React.js UI framework that provides pre-built components with a Material Design look to build beautiful quick react applications.

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles((theme) => ({
  button: {
    margin: theme.spacing(1),
  },
}));

function MyButton() {
  const classes = useStyles();

  return (
    <Button variant="contained" color="primary" className={classes.button}>
      Click me!
    </Button>
  );
}

export default MyButton;

5. Styled Components :

A library for styling React components with CSS. It allows for writing CSS directly in the component file using a special syntax called tagged template literals.

import React from "react";
import styled from "styled-components";

const Button = styled.button`
  background-color: ${(props) => (props.primary ? "blue" : "gray")};
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
`;

export default function MyButton() {
  return (
    <>
      <Button>Default Button</Button>
      <Button primary>Primary Button</Button>
    </>
  );
}

6. React Icons :

A library of SVG icons that can be easily used in React applications.

import React from "react";
import { FaFacebook, FaTwitter, FaInstagram } from "react-icons/fa";

export default function SocialIcons() {
  return (
    <div>
      <a href="https://www.facebook.com">
        <FaFacebook />
      </a>
      <a href="https://www.twitter.com">
        <FaTwitter />
      </a>
      <a href="https://www.instagram.com">
        <FaInstagram />
      </a>
    </div>
  );
}

7. JSON Server :

A tool for quickly creating the REST API using a JSON file. It can be used for mocking a backend API during development or creating a fake API for testing.

// Step 1: Install json-server

npm install -g json-server


// Step 2: Run the command in terminal

json-server --watch db.json --port 3001


// Step 3: Congrats! Done. (Code to fetch data from json-server)

fetch('http://localhost:3001/users')
  .then(response => response.json())
  .then(data => console.log(data));

8. Formik :

A library for building quick forms in React applications. It provides a simple and flexible way to handle form data, with support for validation and error messages.

import { Formik, Field, ErrorMessage } from "formik";

function ContactForm() {
  return (
    <Formik
      initialValues={{ name: "", email: "", message: "" }}
      onSubmit={(values, { setSubmitting }) => {
        console.log(values);
        setSubmitting(false);
      }}
    >
      {({ isSubmitting }) => (
        <form>
          <Field type="text" name="name" />
          <ErrorMessage name="name" component="div" />
          <Field type="email" name="email" />
          <ErrorMessage name="email" component="div" />
          <Field as="textarea" name="message" />
          <ErrorMessage name="message" component="div" />
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </form>
      )}
    </Formik>
  );
}

9. SASS :

A CSS preprocessor that allows us to write more powerful and efficient stylesheets. SASS extends CSS by adding features like variables, functions, and nesting, making it easier to write maintainable and reusable code.

// Define a variable for the primary color
$primary-color: #2ecc71;

// Use the variable in a class
.button {
  background-color: $primary-color;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 5px;

  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

10. React Loader Spinner :

A library for displaying animated loading spinners in React.js applications. It provides a wide range of customization options, including the ability to set the spinner type, color, size, and more.

import Loader from "react-loader-spinner";
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";

function App() {
  return (
    <div>
      <Loader
        type="Puff"
        color="#00BFFF"
        height={100}
        width={100}
        timeout={4000}
      />
    </div>
  );
}

So why not embrace the power of these amazing libraries and take your React.js development to the next level? The possibilities are endless! 🔥

Let’s connect 💜

LinkedIn: https://linkedin.com/in/prateekbka/
GitHub: https://github.com/prateek-bka

Blog