Giters

nguyenbathanh / awesome-react-components

Catalog of React components / libraries

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React Components Catalog


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.
  • reactabular - Spectacular tables for React.
  • fixed-data-table - A React table component designed to allow presenting thousands of rows of data.
  • sematable - Client side sorting, pagination, and text filter for redux/react based apps.
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.
  • react-modal-box - React Modal Box Component.
  • react-aria-modal - A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.
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

Display data in graphs / diagrams

Tree

Display a tree data structure

UI Navigation

Ways to navigate views

Custom Scrollbar
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
Time / Date / Age

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
Touch Swipe
Miscellaneous
  • react-timesheet - Time Sheet Component for React.
  • react-intl - Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.
  • react-blur - React component for blurred backgrounds.
  • react-markdown - Render Markdown as React components.
  • react-split-pane - React split-pane component.
  • typography - A powerful toolkit for building websites with beautiful typography.
  • react-paginate - A ReactJS component that creates a pagination.
  • react-json-tree - React JSON Viewer Component, Extracted from redux-devtools.
  • react-icons - Svg react icons of popular icon packs using ES6 imports.
  • react-emoji - An emoji mixin for React.
  • react-resizable-and-movable - Resizable and movable component for React.
  • react-dnr - Dragable and Resizable window build with React.js.
  • react-resizable-box - Resizable component for React. #reactjs.
  • react-file-reader-input - React file input component for complete control over styling and abstraction from file reading.
  • react-pagespeed-score - A React component for display a dial-type chart of PageSpeed Insights.
  • react-autolink - An autolink mixin for React.
  • react-svg-buttons - Configurable animated SVG buttons for react.
  • react-avatar - Universal React avatar component makes it possible to generate avatars based on user information.
  • react-joyride - Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!.
  • material-color-hash - Hash strings to Material UI colors.

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 Button
Star Rating
Type Select

Let the user select a tag / something while typing

Masked Input
Autosize Input / Textarea
Image Editing
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.
  • autoresponsive-react - Auto responsive grid layout library.
  • golden-layout - A multi-screen javascript Layout manager.
  • reactwm - A minimal window manager built using React.

UI Animation

Animate transitions

Parallax
  • react-atv-img - A port of @drewwilson’s atvImg (Apple TV 3D parallax effect) library in React.
  • react-parallax-component - Easiest way to add scroll parallax effect on the component.

UI Frameworks

Website

  • 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.

Mobile

  • 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.

Other

  • react-desktop - React UI Components for macOS Sierra and Windows 10.
  • aframe-react - Build virtual reality experiences with A-Frame and React.

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

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 <head>

  • 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.
  • fluxible - 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.
  • mobx-react - React bindings for MobX. Create fully reactive components.
  • cerebral - A state controller with its own debugger.
Form Logic
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
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!.
  • redux-webpack-es6-boilerplate - A starter project for modern React apps with Redux.
  • react-boilerplate - Quick packager-agnostic boilerplate for React modules using JSX.
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

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.
  • 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-bash - A configurable/extendable bash terminal React component.
  • html-to-react-components - Extract annotated portions of HTML into React components as separate modules.
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.

About

Catalog of React components / libraries

License:Creative Commons Zero v1.0 Universal