Giters

kielbarry / awesome-react-components

Catalog of React Components & Libraries

Home Page:https://devarchy.com/react

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React Components & Libraries

  • Official website: devarchy.com/react
  • Use devarchy to add a library to the catalog
  • This readme is updated when a Library is approved on Devarchy. (Meaning that all new libraries awaiting for approval are visible only on Devarchy.)

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

Overlay

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

  • 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

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

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.
  • video-react - A web video player built for the HTML5 world using React library.

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.
  • timeago-react - Simple and efficient react component to format date with *** time ago statement. eg: '3 hours ago'.

Photo / Image

Display images / photos

Icons

Display icons / icon set / emojis

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.

Autocomplete

Autosuggest / autocomplete / typeahead

Select

Color Picker

Toggle

Slider

Radio Button

Type Select

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

Autosize Input / Textarea

Star Rating

Drag and Drop

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.

Rich Text Editor

Markdown Editor

Image Editing

Image manipulation

Form Component Collections

Miscellaneous

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.
  • react-stack-grid - Pinterest like layout components for React.js.
  • react-reflex - Flex layout container component for advanced React web applications.
  • reflexbox - React flexbox layout and grid system.
  • hedron - A no-frills flexbox grid system for React, powered by styled-components.
  • react-resizer - A React component for resizing HTML elements.
  • m-react-splitters - React splitter component, written in TypeScript.

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

Responsive

Set of components + responsive layout system

  • 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.
  • @blueprintjs/core - Core styles & components.
  • react-foundation - Foundation as React components.
  • semantic-ui-react - The official Semantic-UI-React integration.
  • pivotal-ui-react - React components based on a custom version of the Bootstrap library.
  • antd - A UI Design Language.

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.
  • antd-mobile - A configurable Mobile UI.

Component Collections

Set of components without layout system

Other

  • react-desktop - React UI Components for macOS Sierra and Windows 10.
  • aframe-react - Build virtual reality experiences with A-Frame and React.
  • admin-on-rest - A frontend framework for building admin SPAs on top of REST services, using React and Material Design.

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

Device Input

Turn user input into actions

Keyboard Events

Scroll Events

Touch Events

Touch Swipe

Mouse Events

  • react-aim - Determine the cursor aim for triggering mouse events.

Meta Tags

Set meta tags, <title>, 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.

Portal

Render an element at an arbitrary DOM node

  • react-portal - React component for transportation of modals, lightboxes, loading bars... to document.body.
  • react-layer-stack - Simple but ubiquitously powerful and agnostic layering system for React. Useful for any kind of windowing/popover/modals/tooltip application.
  • react-gateway - Render React DOM into a new context (aka "Portal").

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

  • 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.
  • kea - High level architecture for React apps.

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.
  • 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.
  • radium - A set of tools to manage inline styles on React elements.
  • styled-components - Visual primitives for the component age.

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

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

  • 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

i18n

Internationalization / L10n / localization / translation

  • 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-i18next - Internationalization for react done right. Using the i18next i18n ecosystem.
  • react-translate-maker - Universal internationalization (i18n) open source library for React.
  • react-globalize - Bringing the i18n functionality of Globalize, backed by CLDR, to React.

Framework bindings / integrations

  • reactfire - ReactJS mixin for easy Firebase integration.
  • react-famous - React bridge to Famo.us.
  • 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

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.
  • react-canvas - High performance <canvas> rendering for React components.
  • 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

Test

  • 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.
  • jest-cli - Painless JavaScript Testing.

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

https://devarchy.com/react

License:Creative Commons Zero v1.0 Universal