Catalog of React components / libraries / React 学习大全
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
awesome-react-components
README.md

README.md

awesome-react-components-all

Catalog of React components / libraries / React 学习大全 -> KARL-Dujinyang

Lang -> 2016 React动态更新

Karl-dujinyang -> React大全,Star,Fork备用。

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.
  • react-virtualized - React components for efficiently rendering large lists and tabular data.
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.
  • react-music - Make beats with React.
  • react-dailymotion - Dailymotion player component for React.
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

Masked 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

  • rgx - React grid system based on minimum and maximum widths.
  • react-flexbox - React flexbox implementation.
  • react-masonry-mixin - A React.js mixin for using @desandro's Masonry.
  • react-inline-grid - Predictable flexbox based grid for React.
  • react-layout-components - Layout Components for React based on Flexbox.
  • react-grid-layout - A draggable and resizable grid layout with responsive breakpoints, for React.
  • react-masonry-component - A React.js component for using @desandro's Masonry.
  • react-flexbox-grid - A set of React components implementing flexboxgrid with the power of CSS Modules.
  • react-stonecutter - Animated grid layout component for React.
  • flexbox-react Unopinionated, standard compliant flexbox components. You don't need to learn any propietary syntax. If you know how to use flexbox, you know how to use flexbox-react components.

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

  • create-react-app Create React apps with no build configuration.
  • 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).
  • react-elm-components - Write React components in Elm.
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.