Popular npm packages for React

pouya javadi
4 min readApr 10, 2021

--

In this article, I am trying to maintain a list of the most popular npm packages are currently used by many React developers for use in my project, and hopefully this can be a great reference for you as well:

UI component libraries

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

Individual UI components

  1. @tippy.js/react — The complete tooltip and popover solution for React apps
  2. react-spinners — A collection of loading spinners with React.js based on Halogen
  3. 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 — A collection of loading spinners built with styled-components
  5. draft-js — Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model
  6. react-custom-scrollbars — Custom scrollbars for React
  7. react-select — The Select control for React
  8. react-dropdown — Simple Dropdown component for React, inspired by react-select
  9. react-horizontal-scrolling-menu — A horizontal scrolling menu component for React
  10. react-collapsible — React responsive collapsible section component
  11. react-calendar — Calendar component for React
  12. react-datepicker — A simple and reusable Datepicker component for React
  13. react-table — react-table is a lightweight, fast and extendable datagrid built for React
  14. react-awesome-button — A button component for React
  15. react-compound-slider — React Compound Slider is a tiny (4.3kb) slider component with no opinion about markup or styles
  16. rheostat — A mobile, tablet, desktop, and accessible slider for the web by Airbnb
  17. react-checkbox-tree — A simple and elegant checkbox tree for React
  18. recharts — Recharts is a Redefined chart library built with React and D3
  19. react-chartjs-2 — React wrapper for Chart.js 2
  20. react-vis — A collection of react components to render common data visualization charts
  21. victory — React.js components for modular charting and data visualization
  22. react-modal — Accessible modal dialog component for React.JS
  23. react-responsive-modal — A simple responsive and accessible react modal compatible with React 16 and ready for React 17
  24. react-slick — Carousel component built with React. It is a react port of slick carousel
  25. react-responsive-carousel — A responsive carousel component for React
  26. 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 — Justified image gallery component for React inspired by Google Photos and based upon React Images
  28. react-images — A mobile-friendly, highly customizable, carousel component for displaying media in ReactJS
  29. react-image-lightbox — A flexible lightbox component for displaying images in a React project
  30. react-tabs — An accessible and easy tab component for ReactJS

CSS in JS

  1. styled-components — Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress
  2. emotion — A CSS in JS library
  3. 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 — Promise based HTTP client for the browser and node.js
  2. apisauce — An http client built on top of axios
  3. request — Request is designed to be the simplest way possible to make http calls. It supports HTTPS and follows redirects by default
  4. 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 — DOM bindings for React Router
  2. universal-router — A simple middleware-style router that can be used in both client-side and server-side applications
  3. connected-react-router — A Redux binding for React Router v4 and v5

State management

  1. redux — Redux is a predictable state container for JavaScript apps
  2. react-redux — Official React bindings for Redux
  3. mobx — MobX is a battle tested, simple and scalable state management library transparently applying functional reactive programming (TFRP)
  4. 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 — Thunk middleware for Redux
  6. redux-persist — Persist and rehydrate a redux store

Please connect with me on Github or LinkedIn

--

--

pouya javadi
pouya javadi

Written by pouya javadi

Building solutions, solving problems, engaging with others are pillars of learning in life.

No responses yet