A List of Useful npm Packages for React Developers
Tags: react, javascript
Published: 2019-07-07 04:56:26

---
title: "A List of Useful npm Packages for React Developers"
published: true
description: "This is a list of npm packages which are useful for React developers"
tags: react, javascript
---

(Originally posted on [manindu.dev](https://manindu.dev/list-of-useful-npm-packages-for-react-developers/))

Hi all, this is a list of useful npm packages for React developers. I'm planning to update this frequently by adding more packages. Your suggestions are welcome 😊. Happy coding!!

## UI component libraries

1.  [antd](https://www.npmjs.com/package/antd) - Ant Design is an enterprise grade UI design system.
2. [@material-ui/core](https://www.npmjs.com/package/@material-ui/core) - React Material UI components
3. [react-bootstrap](https://www.npmjs.com/package/react-bootstrap) - Bootstrap 4 components built with React
4. [react-bulma-components](https://www.npmjs.com/package/react-bulma-components) - React component for Bulma framework
5. [semantic-ui-react](https://www.npmjs.com/package/semantic-ui-react) - A React component library
6. [office-ui-fabric-react](https://www.npmjs.com/package/office-ui-fabric-react) - The React-based front-end framework for building experiences for Office and Office 365
7. [reactstrap](https://www.npmjs.com/package/reactstrap) - Stateless React Components for Bootstrap 4
8. [rebass](https://www.npmjs.com/package/rebass) - React primitive UI components built with styled-system
9. [@appbaseio/reactivesearch](https://www.npmjs.com/package/@appbaseio/reactivesearch) - React UI components for Elasticsearch

## Individual UI components

1. [@tippy.js/react](https://www.npmjs.com/package/@tippy.js/react) - The complete tooltip and popover solution for React apps
2. [react-spinners](https://www.npmjs.com/package/react-spinners) - A collection of loading spinners with React.js based on Halogen
3. [react-loader-spinner](https://www.npmjs.com/package/react-loader-spinner) - react-spinner-loader provides simple React.js spinner component which can be implemented for async wait operation before data load to the view
4. [react-spinners-kit](https://www.npmjs.com/package/react-spinners-kit) - A collection of loading spinners built with styled-components
5. [draft-js](https://www.npmjs.com/package/draft-js) - Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model
6. [react-custom-scrollbars](https://www.npmjs.com/package/react-custom-scrollbars) - Custom scrollbars for React
7. [react-select](https://www.npmjs.com/package/react-select) - The Select control for React
8. [react-dropdown](https://www.npmjs.com/package/react-dropdown) - Simple Dropdown component for React, inspired by react-select
9. [react-horizontal-scrolling-menu](https://www.npmjs.com/package/react-horizontal-scrolling-menu) - A horizontal scrolling menu component for React
10. [react-collapsible](https://www.npmjs.com/package/react-collapsible) - React responsive collapsible section component
11. [react-calendar](https://www.npmjs.com/package/react-calendar) - Calendar component for React
12. [react-datepicker](https://www.npmjs.com/package/react-datepicker) - A simple and reusable Datepicker component for React
13. [react-table](https://www.npmjs.com/package/react-table) - react-table is a lightweight, fast and extendable datagrid built for React
14. [react-awesome-button](https://www.npmjs.com/package/react-awesome-button) - A button component for React
15. [react-compound-slider](https://www.npmjs.com/package/react-compound-slider) - React Compound Slider is a tiny (4.3kb) slider component with no opinion about markup or styles
16. [rheostat](https://www.npmjs.com/package/rheostat) - A mobile, tablet, desktop, and accessible slider for the web by Airbnb
17. [react-checkbox-tree](https://www.npmjs.com/package/react-checkbox-tree) - A simple and elegant checkbox tree for React
18. [recharts](https://www.npmjs.com/package/recharts) - Recharts is a Redefined chart library built with React and D3
19. [react-chartjs-2](https://www.npmjs.com/package/react-chartjs-2) - React wrapper for Chart.js 2
20. [react-vis](https://www.npmjs.com/package/react-vis) - A collection of react components to render common data visualization charts
21. [victory](https://www.npmjs.com/package/victory) - React.js components for modular charting and data visualization
22. [react-modal](https://www.npmjs.com/package/react-modal) - Accessible modal dialog component for React.JS
23. [react-responsive-modal](https://www.npmjs.com/package/react-responsive-modal) - A simple responsive and accessible react modal compatible with React 16 and ready for React 17
24. [react-slick](https://www.npmjs.com/package/react-slick) - Carousel component built with React. It is a react port of slick carousel
25. [react-responsive-carousel](https://www.npmjs.com/package/react-responsive-carousel) - A responsive carousel component for React
26. [pure-react-carousel](https://www.npmjs.com/package/pure-react-carousel) - A highly impartial suite of React components that can be assembled by the consumer to create a responsive and aria compliant carousel with almost no limits on DOM structure or CSS styles
27. [react-grid-gallery](https://www.npmjs.com/package/react-grid-gallery) - Justified image gallery component for React inspired by Google Photos and based upon React Images
28. [react-images](https://www.npmjs.com/package/react-images) - A mobile-friendly, highly customizable, carousel component for displaying media in ReactJS
29. [react-image-lightbox](https://www.npmjs.com/package/react-image-lightbox) - A flexible lightbox component for displaying images in a React project
30. [react-tabs](https://www.npmjs.com/package/react-tabs) - An accessible and easy tab component for ReactJS

## CSS in JS

1. [styled-components](https://www.npmjs.com/package/styled-components) - Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress
2. [emotion](https://www.npmjs.com/package/emotion) - A CSS in JS library
3. [radium](https://www.npmjs.com/package/radium) - Radium is a set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS

## Http clients

1. [axios](https://www.npmjs.com/package/axios) - Promise based HTTP client for the browser and node.js
2. [apisauce](https://www.npmjs.com/package/apisauce) - An http client built on top of axios
3. [request](https://www.npmjs.com/package/request) - Request is designed to be the simplest way possible to make http calls. It supports HTTPS and follows redirects by default
4. [superagent](https://www.npmjs.com/package/superagent) - Small progressive client-side HTTP request library, and Node.js module with the same API, sporting many high-level HTTP client features

## Routing

1. [react-router-dom](https://www.npmjs.com/package/react-router-dom) - DOM bindings for React Router
2. [universal-router](https://www.npmjs.com/package/universal-router) - A simple middleware-style router that can be used in both client-side and server-side applications
3. [connected-react-router](https://www.npmjs.com/package/connected-react-router) - A Redux binding for React Router v4 and v5

## State management

1. [redux](https://www.npmjs.com/package/redux) - Redux is a predictable state container for JavaScript apps
2. [react-redux](https://www.npmjs.com/package/react-redux) - Official React bindings for Redux
3. [mobx](https://www.npmjs.com/package/mobx) - MobX is a battle tested, simple and scalable state management library transparently applying functional reactive programming (TFRP)
4. [redux-saga](https://www.npmjs.com/package/redux-saga) - redux-saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage
5. [redux-thunk](https://www.npmjs.com/package/redux-thunk) - Thunk middleware for Redux
6. [redux-persist](https://www.npmjs.com/package/redux-persist) - Persist and rehydrate a redux store