https://github.com/brillout/awesome-react-components 515 stars today Catalog of React components / libraries
React Components Catalog
Catalog of React components / libraries
Contents
UI Components
Table / Data Grid
reactable - Fast, flexible, and simple data tables in React.
ag-grid - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components.
griddle-react - Simple Grid Component written in React.
react-datagrid - A carefully crafted DataGrid for React.
react-data-components - React components for sorting, filtering and pagination of data.
react-bootstrap-table - It's a react table for bootstrap.
react-data-grid - Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like.
react-pivot - React-Pivot is a data-grid component with pivot-table-like functionality for data display, filtering, and exploration.
autoresponsive-react - Auto Responsive Layout Library For React.
Infinite Scroll
react-lazyload - Lazyload your Component, Image or anything matters the performance.
react-infinity - A UITableView Inspired list and grid display solution with element culling and smooth animations.
react-infinite - A browser-ready efficient scrolling container based on UITableView.
react-infinite-grid - A React component which renders a grid of elements.
react-list - A versatile infinite scroll React component.
Modals
Display overlay / modal / dialog
react-dock - Resizable dockable react component.
react-overlays - Utilities for creating robust overlay components.
boron - A collection of dialog animations with React.js.
react-modal2 - Simple modal component for React.
react-modal - Accessible modal dialog component for React.
react-skylight - A react component for modals and dialogs.
rodal - A React modal with animations.
Notification
A temporary little modal to notify the user
Tooltips
Menu
Menus / Sidebars
Sticky
Implementations similar to position: sticky
Tabs
Loading / Progress Indicators
Let the user know that something is being loaded
Carousels
Collapse
react-collapse - Component-wrapper for collapse animation with react-motion for elements with variable (and dynamic) height.
Charts
Displays data in graphs / diagrams
Display a Tree Data Structure
UI Navigation
Ways to navigate views
Custom Scrollbar
Media
Audio / Video
react-player - A react component for playing a variety of URLs, including file paths, YouTube, SoundCloud and Vimeo.
react-youtube - React.js powered YouTube player component.
react-soundplayer - Create custom SoundCloud players with React.
react-video - React component to load video from Vimeo or Youtube across any device.
Map
Display time / date / age
react-time - Component for React to render relative and/or formatted dates into <time> HTML5 element.
react-timeago - A simple time-ago component for ReactJs.
Photo / Image Gallery
Touch Swipe
Miscellaneous
Component Collections
Form Components
Let the user enter data
Date / Time picker
Rich Text Editing
Sortable List
Let the user define an order on a list
sortablejs - Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery. Supports Meteor, AngularJS, React, Polymer, Knockout and any CSS library, e.g. Bootstrap.
react-anything-sortable - A ReactJS component that can sort any children with touch support and IE8 compatibility.
react-sortable-hoc - A set of higher-order components to turn any list into an animated, touch-friendly, sortable list.
react-sortable - A sortable list component built with React.
Drag and Drop
Autocomplete
Autosuggest / autocomplete / typeahead
Select
Color Picker
Toggle
Slider
Radio buttons
Type Select
Let the user select a tag / something while typing
Maksed Input
Autosize Input / Textarea
Image Editing
react-avatar-cropper - Aiming to be a complete solution for avatar cropping in react.
react-avatar-editor - Facebook like, avatar / profile picture component. Resize and crop your uploaded image using a clear user interface.
react-image-crop - A responsive image cropping tool for React.
Markdown Editor
Form Component Collections
Miscellaneous
react-designer - Easy to configure, lightweight, editable vector graphics in your react components.
UI Layout
Components to layout the app's UI
UI Animation
Animate transitions
Parallax
react-atv-img - A port of @drewwilson’s atvImg (Apple TV 3D parallax effect) library in React.
UI Frameworks
Mobile Frameworks
onsenui - Hybrid Mobile App UI Framework for iOS and Material Design with Angular and React Components.
reactionic - React Ionic.
touchstonejs - Mobile App Framework powered by React.
UI Frameworks
elemental - A flexible and beautiful UI framework for React.js.
rctui - A collection of components for React.
belle - Configurable React Components with great UX.
react-uikit-components - React UIkit Components for the UIKit CSS framework.
searchkit - React UI components / widgets. The easiest way to build a great search experience with Elasticsearch.
rebass - Configurable React Stateless Functional UI Components.
react-foundation-apps - Foundation Apps components built with React.
grommet - The most advanced UX framework for enterprise applications.
Bootstrap
Material Design
react-mdl - React Components for Material Design Lite.
react-materialize - Material design for react, powered by materializecss.
react-toolbox - A set of React components implementing Google's Material Design specification with the power of CSS Modules.
react-material - Material design components written with React.js and React Style.
material-ui - React Components that Implement Google's Material Design.
react-essence - Essence - The Essential Material Design Framework.
UI Utilites
Reporter
Report computed styles
Visibility Reporter
Report when a component becomes visible/hidden
react-waypoint - A React component to execute a function whenever you scroll to an element.
react-visibility-sensor - Sensor component for React that notifies you when it goes in or out of the window viewport.
Measurement Reporter
Determine and report measurements of an element
react-measure - Compute measurements of a React component.
react-height - Component-wrapper to determine and report children elements height.
react-height-reporter - React component-wrapper detecting height changes of it's children.
react-dimensions - React higher-order component to get dimensions of container.
Portal
Render React DOM into a new context (aka "Portal")
react-portal - React component for transportation of modals, lightboxes, loading bars... to document.body.
Device Events
Keyboard Events
react-keydown - Lightweight keydown wrapper for React components.
react-hotkeys - Declarative hotkey and focus area management for React.
Scroll Events
Touch Events
Mouse Events
react-aim - Determine the cursor aim for triggering mouse events.
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.
Set children of
react-helmet - A document head manager for React.
react-document-title - Declarative, nested, stateful, isomorphic document.title for React.
react-document-meta - HTML meta tags for React-based apps. Works for both client- and server-side rendering, and has a strict but flexible API.
Code Design
Libraries that help with code design
Data Store
Data flow / data management / data stores / components state / data flow
react-redux - Official React bindings for Redux.
fluorine-lib - Reactive state and side effect management for React using a single stream of actions.
redux-batched-actions - Redux higher order reducer + action to reduce actions under a single subscriber notification.
react-i13n - A performant, scalable and pluggable approach to instrumenting your React application.
shasta - Dead simple + opinionated toolkit for building redux/react applications.
react-redux-provide - Bridges the gap between Redux and the declarative nature of GraphQL/Relay. Share, manipulate, and replicate application state across any number of components.
redux-batched-subscribe - Store enhancer for which allows batching subscribe notifications.
reflux - A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux.
fluxxor - Flux architecture tools for React.
dispatchr - A pluggable container for universal flux applications.
alt - Isomorphic flux implementation.
baobab-react - React integration for Baobab.
reselect - Selector library for Redux.
react-controllables - Easily create controllable components.
recompose - A React utility belt for function components and higher-order components.
redux-ui - Easy UI state management for react redux.
redux - Predictable state container for JavaScript apps.
Form Logic
react-jsonschema-form - A React component for building Web forms from JSONSchema.
react-validation-mixin - Simple validation mixin (HoC) for React.
newforms - INACTIVE] Isomorphic form-handling for React.
formsy-react - A form input builder and validator for React JS.
redux-form - A Higher Order Component using react-redux to keep form state in a Redux store.
winterfell - Generate complex, validated and extendable JSON-based forms in React.
react-redux-form - Create forms easily in React with Redux.
tcomb-form - Forms library for react.
plexus-form - A dynamic form component for react using JSON-Schema.
Router
Props from server
Component properties asynchronously fetched over the network
react-async - Asynchronously fetch data for React components.
redux-async-connect - It allows you to request async data, store them in redux state and connect them to your react component.
async-props - Co-located data loading for React Router.
react-router-relay - Relay integration for React Router.
redux-connect - Provides decorator for resolving async props in react-router, extremely useful for handling server-side rendering in React.
react-resolver - Async rendering & data-fetching for universal React applications.
react-refetch - A simple, declarative, and composable way to fetch data for React components.
relay-nested-routes - Relay integration for React Router.
redial - Universal data fetching and route lifecycle management for React etc.
Communication with server
adrenaline - Simple Relay alternative.
react-transmit - Relay-inspired library based on Promises instead of GraphQL.
apollo-client - A simple caching client for any GraphQL server and UI framework.
react-apollo - React data container for the Apollo Client.
react-relay - Relay is a JavaScript framework for building data-driven React applications.
CSS / Style
react-responsive - Media queries in react for responsive design.
react-css-modules - Seamless mapping of class names to CSS modules inside of React components.
aphrodite - It's inline styles, but they work!.
postcss-js - PostCSS for React Inline Styles, Free Style and other CSS-in-JS.
react-inline-css - Write CSS inside your React components!.
classnames - A simple javascript utility for conditionally joining classNames together.
react-container-query - Modular responsive component.
react-look - Advanced & Dynamic Component Styling for React and React Native. Ships with powerful Plugins, Mixins and Developer Tools.
stilr - Encapsulated styling for your javascript components with all the power of javascript and CSS combined.
react-css-components - Define React presentational components with CSS.
inline-style-prefixer - Run-time Autoprefixer for Inline Style Objects.
HTML Template
Isomorphic Apps
hypernova - A service for server-side rendering your JavaScript views.
react-server - React framework with server render for blazing fast page load and seamless transitions between pages in the browser.
webpack-isomorphic-tools - Server-side rendering for your Webpack-built applications (e.g. React).
isomorphic-relay - Adds server side rendering support to React Relay.
rill - Universal web application framework.
isomorphic-style-loader - Isomorphic CSS style loader for Webpack.
Boilerplate
Boilerplates / scaffolds / starter kits / generators / stack ensembles
redux-cli - An opinionated CLI for building redux/react apps quicker.
reactuate - React/Redux stack (not a boilerplate kit).
essential-react - A minimal skeleton for building testable React apps using Babel.
gluestick - GlueStick is a command line interface for quickly developing universal web applications using React and Redux.
relay-fullstack - Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS.
universal-redux - An npm package that lets you jump right into coding React and Redux with universal (isomorphic) rendering. Only manage Express setups or Webpack configurations if you want to.
nwb - CLI tool and devDependency for React apps & components and npm modules.
react-redux-universal-hot-example - A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform.
generator-starhackit - StarHackIt: React/Redux + Node full-stack starter kit with authentication and authorization, data backed by SQL.
react-isomorphic-starterkit - Create an isomorphic React app in less than 5 minutes.
generator-react-webpack - Yeoman generator for ReactJS and Webpack.
electron-react-boilerplate - Live editing development on desktop app.
reactpack - Build your react apps with one command and one npm i
.
react-hot-boilerplate - Minimal live-editing boilerplate for your next ReactJS project.
generator-flux-on-rails - Scaffolder of universal Flux / Redux app, backed by Rails API.
roc - Modern Application Development Ecosystem.
react-redux-starter-kit - Get started with React, Redux, and React-Router!.
Miscellaneous
Utilities
Framework bindings / integrations
reactfire - ReactJS mixin for easy Firebase integration.
react-famous - React bridge to Famo.us.
react-canvas - High performance <canvas> rendering for React components.
backbone-react-component - A bit of nifty glue that automatically plugs your Backbone models and collections into your React components, on the browser and server.
elm-react-component - A React component which wraps an Elm module to be used in a React application.
react-three-renderer - Render into a three.js canvas using React.
gl-react - OpenGL / WebGL bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm.
react-d3-library - Open source library for using D3 in React.
gl-react-dom - WebGL bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm.
react-on-rails - Integration of React + Webpack + Rails to build Universal (Isomorphic) Apps.
react-backbone - Backbone-aware mixins for react and a whole lot more.
react-swf - Shockwave Flash Player component for React.
react-localstorage - Simple componentized localstorage implementation for Facebook's React.
reactive-elements - Allows to use React.js component as HTML element (web component).
Integrations with Third Party Services
Tests
ui-harness - Create, isolate and test modular UI components in React.
redux-test-recorder - A redux middleware to automatically generate tests for reducers through ui interaction.
legit-tests - Chainable, easy to read, React testing library.
unexpected-react - Plugin for [unexpected]( to enable testing the full React virtual DOM, and also the shallow renderer.
chai-enzyme - Chai.js assertions and convenience functions for testing React Components with enzyme.
react-unit - Lightweight unit test library for ReactJS.
enzyme - JavaScript Testing utilities for React.
redux-ava - Write AVA tests for redux pretty quickly.
carte-blanche - An isolated development space with integrated fuzz testing for your components. See them individually, explore them in different states and quickly and confidently develop them.
Performance
UI
react-fastclick - Fast Touch Events for React.
react-static-container - Renders static content efficiently by allowing React to short-circuit the reconciliation process.
inferno - An extremely fast, React-like JavaScript library for building modern user interfaces.
Inspect
Lazy Load
react-lazyload - Lazyload your Component, Image or anything matters the performance.
react-infinity - A UITableView Inspired list and grid display solution with element culling and smooth animations.
react-infinite - A browser-ready efficient scrolling container based on UITableView.
react-infinite-grid - A React component which renders a grid of elements.
react-virtualized - React components for efficiently rendering large lists and tabular data.
react-lazy-load - React component that renders children elements when they enter the viewport.
App Size
Dev Tools
Redux
Inspect
Miscellaneous
react-atellier - The smartest way to share interactive components with your team.
standard-react - JavaScript Standard Style Guide.
cosmos-js - DX tool for designing truly encapsulated React components.
react-heatpack - A 'heatpack' command for quick React development with webpack hot reloading.
Miscellaneous
structor - An advanced GUI editor for React.
react-blessed - A react renderer for blessed.
react-komik - ReactJS based comic strip creator using fabric.js canvas rendering.
react-styleguidist - React style guide generator.
redux-segment - Segment.io analytics integration for redux.
mozaik - Mozaïk is a tool based on nodejs / react / d3 / stylus to easily craft beautiful dashboards.
htmltojsx - Automatically AJAXify plain HTML with the power of React. It's magic!.
react-desktop - React UI Components for macOS Sierra and Windows 10.
react-bash - A configurable/extendable bash terminal React component.
html-to-react-components - Extract annotated portions of HTML into React components as separate modules.
react-joyride - Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!.
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.
sitegen - Generate websites by composing React components.