Awesome React Components & Libraries List

590
SHARES
2.7k
VIEWS

UI Components

Table / Data Grid

  • ag-grid – Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components.
  • autoresponsive-react – Auto Responsive Layout Library For React.
  • gigatables-react – Sorting, pagination/infinite scroll, global/column search, AJAX CRUD, and more.
  • griddle-react – Simple Grid Component written in React.
  • mui-datatables – Advanced and Pretty Data Tables where everything is customisable.
  • react-data-components – React components for sorting, filtering and pagination of data.
  • react-data-grid – Excel-like grid.
  • react-pivot – Data-grid component with pivot-table-like for data display, filtering, and exploration.
  • reactabular – Spectacular tables for React.
  • rsuite-table – demo/docs – A table component that supports virtualized.
  • sematable – Client side sorting, pagination, and text filter for redux/react based apps.
  • shineout – demo – A comprehensive solution for complicated/big-data table.

Infinite Scroll

  • react-infinite – A browser-ready efficient scrolling container based on UITableView.
  • react-lazyload – Lazyload your Component, Image or anything matters the performance.
  • react-list – A versatile infinite scroll React component.
  • react-virtualized – React components for efficiently rendering large lists and tabular data.

Overlay

Display overlay / modal / alert / dialog / lightbox / popup

  • boron – A collection of dialog animations with React.js.
  • modali – A delightful modal dialog component, built from the ground up to support React Hooks.
  • react-aria-modal – A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.
  • react-dock – Resizable dockable react component.
  • react-modal – Accessible modal dialog component for React.
  • react-skylight – A react component for modals and dialogs.

Notification

Toaster / snackbar β€” Notify the user with a modeless temporary little popup

Tooltip

Menu

Menus / sidebars

Sticky

Fixed headers / scroll-up headers / sticky elements

Tabs

Loader

Loaders / spinners / progress bars β€” Let the user know that something is loading

Carousel

Collapse

Chart

Display data in charts / graphs / diagrams

  • chartify – React.js plugin for building animated draggable and customizable charts.
  • essential js 2 charts – Beautiful and interactive charts & graphs for react.
  • react-chartist – React component for Chartist.js.
  • react-charty – demo – Small but powerful interactive data viz with multiple chart types, animations, zooming, theming and a wide variety of supported browsers.
  • react-chartjs-2 – Common react charting components using Chart.js 2.0.
  • react-d3-components – D3 Components for React.
  • react-dazzle – Dashboards made easy in React JS.
  • react-google-charts – React-google-charts React component.
  • react-highcharts – React-highcharts.
  • react-sigmajs – Lightweight but powerful library for drawing network graphs built on top of SigmaJS.
  • react-sparkline – React component for rendering simple sparklines.
  • react-sparklines – Beautiful and expressive Sparklines React component.
  • react-timeseries-charts – Declarative timeseries charts.
  • react-trend – Simple, elegant spark lines.
  • react-vis – Data visualization library based on React and d3.
  • recharts – Redefined chart library built with React and D3.
  • rumble-charts – React components for building composable and flexible charts.
  • victory – Data viz for React.
  • reaviz – ReactJS Data Visualization Library based on D3.js

Tree

Display a tree data structure

UI Navigation

Ways to navigate views

Custom Scrollbar

Audio / Video

Map

Time / Date / Age

Display time / date / age

  • react-timeago – A simple time-ago component for ReactJs.
  • timeago-react – Format date with *** time ago statement. eg: ‘3 hours ago’.

Photo / Image

Display images / photos

Icons

Display icons / icon set / emojis

  • iconify-react – Over 40k icons from 50+ icon sets, including all popular icon and emoji sets.
  • react-icons – Svg react icons of popular icon packs using ES6 imports.

Paginator

Display a control element to paginate

Markdown Viewer

Display parsed markdow source

Miscellaneous

Form Components

Let the user enter data

Date / Time picker

Date picker / time picker / datetime picker / date range picker

Input Types

Masked inputs, specialized inputs; email / telephone number / credit card / etc.

  • react-credit-cards – Beautiful credit cards for your payment forms.
  • react-payment-inputs – demo – A zero-dependency container to help with payment card input fields.
  • react-input-mask – Yet another react component for input masking.
  • react-maskedinput – Masked <input/> React component.
  • react-text-mask – Input mask for React, Angular, and vanilla JavaScript. Flexible, robust & tiny.
  • react-numpad – A numpad for number, date and time, built with and for React. It’s written with the extensibility in mind. The idea of this project is to cover the majority of input types in a form.

Autocomplete

Autosuggest / autocomplete / typeahead

Select

Color Picker

  • coloreact – A tiny Color Picker for React.
  • react-color – Color Pickers from Sketch, Photoshop, Chrome & more.
  • react-input-color – React input color component with hsv color picker.

Toggle

Slider

Radio Button

Type Select

Let the user select something (e.g. a tag) while typing

Tag Input

Let the user add multiple tags in a single input

Autosize Input / Textarea

Star Rating

Drag and Drop

Sortable List

Let the user define an order on a list

  • react-anything-sortable – Sort any children with touch support and IE8 compatibility.
  • react-sortable-hoc – Higher-order components to turn any list into an animated, touch-friendly, sortable list.
  • react-sortable – A sortable list component built with React.
  • sortablejs – A JavaScript library for reorderable drag-and-drop lists.

Rich Text Editor

Markdown Editor

Image Editing

Image manipulation

Form Component Collections

Miscellaneous

Syntax Highlight

  • react-syntax-highlighter – Syntax highlighting component for react with prismjs or highlightjs ast using inline styles.

UI Layout

Components to layout the app’s UI

UI Animation

Animate transitions

Parallax

UI Frameworks

Responsive

Set of components + responsive layout system

  • πŸš€ ant-design – demo/docs – A UI Design Language.
  • atlaskit – Atlassian’s official UI library. (Please… no more Jira though πŸ˜‰)
  • base web – Base Web is a foundation for initiating, evolving, and unifying web products.
  • belle – Configurable React Components with great UX.
  • blueprint – demo – docs – UI toolkit for the web.
  • carbon – demo/docs – A design system built by IBM. (Wait, since when are IBM known for design?? πŸŽ¨)
  • elemental – A flexible and beautiful UI framework for React.js.
  • grommet – The most advanced UX framework for enterprise applications.
  • gestalt – demo/docs – A set of components that supports Pinterest’s design language. (Nice… but surprisingly not as well-designed as I would have thought from Pinterest. πŸ˜¬)
  • pivotal-ui-react – React components based on a custom version of the Bootstrap library.
  • office-ui-fabric-react – React components for building Microsoft web experiences. (πŸ€” But I’m not sure I want a “MSFT experience?”)
  • rctui – A collection of components for React.
  • react-foundation-apps – Foundation Apps components built with React.
  • react-foundation – Foundation as React components.
  • react-uikit-components – React UIkit Components for the UIKit CSS framework.
  • rebass – Configurable React Stateless Functional UI Components.
  • rsuite – demo/docs – A suite of React components.
  • searchkit – React UI components / widgets. The easiest way to build a great search experience with Elasticsearch.
  • semantic-ui-react – The official Semantic-UI-React integration.
  • fluent-ui – demo/docs – πŸŒˆ React components that inspired by Microsoft’s Fluent Design System.

Material Design

  • πŸš€ Material-UI – React components for faster and easier web development. Build your own design system, or start with Material Design.
    • Modal – Accessible modal dialog component for React.
    • Icons – 1,000+ SVG material icons.
    • Slider – Accessible slider component for React.
    • Autocomplete – Accessible autocomplete, combobox, multiselect component for React.
    • Tree View – Accessible tree view component for React.
  • OnsenUI – demo/docs – Mobile app development framework.
  • react-essence – Essence – The Essential Material Design Framework.
  • react-materialize – Material design for react, powered by materializecss.
  • react-toolbox – A set of React components implementing Google’s Material Design.

Mobile

Component Collections

  • dataminr-react-components – Collection of reusable React Components and utility functions.
  • shards-react – docs/demo – A beautiful and modern React design system. Freemium πŸ’°
  • aframe-react – Build virtual reality experiences with A-Frame and React.
  • react-admin – Build admin user experiences on top of REST and GraphQL services.
  • react-desktop – React UI Components for macOS Sierra and Windows 10.
  • react-stack-cards – Collection of stack card effects for galleries and preview grids.

UI Utilities

Reporter

Report computed styles

Visibility Reporter

Report when a component becomes visible/hidden

Measurement Reporter

Determine and report measurements of an element

Device Input

Turn user input into actions

Keyboard Events

Scroll Events

Touch Swipe

Mouse Events

Meta Tags

Set meta tags, <title>, children of

Portal

Render an element at an arbitrary DOM node

  • react-gateway – Render React DOM into a new context (aka “Portal”).
  • react-layer-stack – Simple but ubiquitously powerful and agnostic layering system for React.
  • react-portal – React component for transportation of modals, lightboxes, loading bars… to document.body.

Test User Behavior

A/B tests, experiments, …

  • react-ab – Simple declarative and universal A/B testing component for React.
  • react-experiments – React components for implementing UI experiments.

Code Design

Libraries that help with code design

Data Store

Data flow / data management / data stores / components state / data flow

  • alt – Isomorphic flux implementation.
  • baobab-react – React integration for Baobab.
  • cerebral – A state controller with its own debugger.
  • fluorine-lib – Reactive state and side effect management for React using a single stream of actions.
  • fluxible – A pluggable container for universal flux applications.
  • fluxxor – Flux architecture tools for React.
  • kea – High level architecture for React apps.
  • mobx-react – React bindings for MobX. Create fully reactive components.
  • react-3ducks – demo – Simple state management solution for React.
  • react-controllables – Easily create controllable components.
  • react-i13n – A performant, scalable and pluggable approach to instrumenting your React application.
  • react-redux-provide – Bridges the gap between Redux and the declarative nature of GraphQL/Relay.
  • react-redux – Official React bindings for Redux.
  • react-storage-hoc – demo – Higher-order components for working with localStorage and sessionStorage.
  • recompose – A React utility belt for function components and higher-order components.
  • redux-batched-actions – Reducer + action to reduce actions under a single subscriber notification.
  • redux-batched-subscribe – Store enhancer for which allows batching subscribe notifications.
  • redux – Predictable state container for JavaScript apps.
  • reflux – A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux.
  • reselect – Selector library for Redux.
  • shasta – Dead simple + opinionated toolkit for building redux/react applications.

Form Logic

  • formcat – A simple and easy way to control forms in React using the React Context API
  • formik – Build forms without tears and supports Validation in ease.
  • formsy-react – A form input builder and validator for React JS.
  • plexus-form – A dynamic form component for react using JSON-Schema.
  • react-hook-form – React hooks for form validation without the hassle.
  • react-jsonschema-form – A React component for building Web forms from JSONSchema.
  • react-validation-mixin – Simple validation mixin (HoC) for React.
  • react-final-form – Subscription-based form state management
  • react-formawesome – Complex library for creating awesome forms.
  • surveyjs – The advanced Survey and Form library
  • tcomb-form – Forms library for react.
  • winterfell – Generate complex, validated and extendable JSON-based forms in React.

Router

Props from server

Component properties asynchronously fetched over the network

  • react-async – Asynchronously fetch data for React components.
  • react-refetch – A simple, declarative, and composable way to fetch data for React components.
  • react-resolver – Async rendering & data-fetching for universal React applications.
  • react-router-relay – Relay integration for React Router.
  • redial – Universal data fetching and route lifecycle management for React etc.
  • redux-async-connect – Request async data, store in redux state, and connect to your component.
  • redux-connect – Provides decorator for resolving async props in react-router.

Communication with server

  • adrenaline – Simple Relay alternative.
  • apollo-client – A simple caching client for any GraphQL server and UI framework.
  • cerebral-module-http – HTTP module for Cerebral.
  • react-apollo – React data container for the Apollo Client.
  • react-relay – Relay is a JavaScript framework for building data-driven React applications.
  • react-transmit – Relay-inspired library based on Promises instead of GraphQL.

CSS / Style

  • aphrodite – It’s inline styles, but they work!.
  • classnames – A simple javascript utility for conditionally joining classNames together.
  • inline-style-prefixer – Run-time Autoprefixer for Inline Style Objects.
  • postcss-js – PostCSS for React Inline Styles, Free Style and other CSS-in-JS.
  • radium – A set of tools to manage inline styles on React elements.
  • react-container-query – Modular responsive component.
  • react-css-modules – Seamless mapping of class names to CSS modules inside of React components.
  • react-responsive – Media queries in react for responsive design.
  • styled-components – Visual primitives for the component age.

HTML Template

Isomorphic Apps

  • hypernova – A service for server-side rendering your JavaScript views.
  • isomorphic-relay – Adds server side rendering support to React Relay.
  • isomorphic-style-loader – Isomorphic CSS style loader for Webpack.
  • react-server – React framework with server render for blazing fast page load.
  • rill – Universal web application framework.
  • webpack-isomorphic-tools – Server-side rendering for your Webpack-built applications (e.g. React).

Boilerplate

Scaffold / starter kit / Yeoman generator / stack ensemble / seed

Miscellaneous

  • react-inlinesvg – An SVG loader component for ReactJS.
  • redux-auth-patch – Complete token authentication system for react + redux that supports isomorphic rendering.
  • redux-search – Redux bindings for client-side search.
  • tcomb-react – Alternative syntax for PropTypes.
  • react-find – βš›οΈ Elegant, accessible search component for React.

Utilities

i18n

Internationalization / L10n / localization / translation

  • react-globalize – Bringing the i18n functionality of Globalize, backed by CLDR, to React.
  • react-i18next – Internationalization for react done right. Using the i18next i18n ecosystem.
  • react-intl – Internationalize React apps.
  • react-translate-maker – Universal internationalization (i18n) open source library for React.

Framework bindings / integrations

  • backbone-react-component – A bit of nifty glue that automatically plugs your Backbone models.
  • elm-react-component – A React component which wraps an Elm module to be used in a React application.
  • gl-react – OpenGL / WebGL bindings for React to implement complex effects over images and content.
  • react-backbone – Backbone-aware mixins for react and a whole lot more.
  • react-d3-library – Open source library for using D3 in React.
  • react-elm-components – Write React components in Elm.
  • react-famous – React bridge to Famo.us.
  • react-localstorage – Simple componentized localstorage implementation for Facebook’s React.
  • react-on-rails – Integration of React + Webpack + Rails to build Universal (Isomorphic) Apps.
  • react-swf – Shockwave Flash Player component for React.
  • react-three-renderer – Render into a three.js canvas using React.
  • reactfire – ReactJS mixin for easy Firebase integration.
  • reactive-elements – Allows to use React.js component as HTML element (web component).

Integrations with Third Party Services

Performance

UI

  • inferno – An extremely fast, React-like JavaScript library for building modern user interfaces.
  • react-canvas – High performance <canvas> rendering for React components.
  • react-fastclick – Fast Touch Events for React.
  • react-static-container – Renders static content efficiently.

Inspect

Lazy Load

  • react-infinite-grid – A React component which renders a grid of elements.
  • react-infinite – A browser-ready efficient scrolling container based on UITableView.
  • react-lazy-load – React component that renders children elements when they enter the viewport.
  • react-lazyload – Lazyload your Component, Image or anything matters the performance.
  • react-virtualized – React components for efficiently rendering large lists and tabular data.

App Size

Server-Side Rendering

  • react-esi – A library to boost SSR performance by exposing React components as Edge Side Includes (ESI) fragments

Dev Tools

Test

  • carte-blanche – An isolated development space with integrated fuzz testing for your components.
  • chai-enzyme – Chai.js assertions and convenience functions for testing React Components with enzyme.
  • enzyme – JavaScript Testing utilities for React.
  • jest-cli – Painless JavaScript Testing.
  • legit-tests – Chainable, easy to read, React testing library.
  • react-unit – Lightweight unit test library for ReactJS.
  • redux-ava – Write AVA tests for redux pretty quickly.
  • redux-test-recorder – A redux middleware to automatically generate tests for reducers through ui interaction.
  • ui-harness – Create, isolate and test modular UI components in React.
  • unexpected-react – Plugin for unexpected to enable testing the full React virtual DOM, and also the shallow renderer.

Redux

Inspect

  • fluxguard – PROD change monitoring that highlights all DOM + design changes.
  • react-inspector – Power of Browser DevTools inspectors right inside your React app.
  • react-json-inspector – React JSON inspector component.
  • reactotron – A CLI and OS X app for inspecting your React JS and React Native apps.

Miscellaneous

Miscellaneous

  • html-to-react-components – Extract annotated portions of HTML into React components as separate modules.
  • htmltojsx – Automatically AJAXify plain HTML with the power of React. It’s magic!.
  • jsonx – React JSON Syntax.
  • mozaik – MozaΓ―k is a tool based on nodejs / react / d3 / stylus to easily craft beautiful dashboards.
  • react-blessed – A react renderer for blessed.

Static Website Generator

  • gatsby – Transform plain text into dynamic blogs and websites using React.js.
  • phenomic – Modern static* website generator based on the React and Webpack ecosystem.

Best resources to learn React.js

Muhammad Mubeen

Muhammad Mubeen

Mubeen is a full-stack web & mobile app developer who is very proficient in MEAN.js, Vue, Python, Ionic 4, Flutter, Firebase, ROR, and PHP. He has created multiple mobile and web applications. He is very passionate about sharing his knowledge.

Leave a Reply

Your email address will not be published. Required fields are marked *

Trending