awesome-react-components

a list of some react components, by https://twitter.com/petebray, not a very good one at that
https://github.com/anthonybrown/awesome-react-components

Last synced: 14 days ago
JSON representation

Code Design
- Boilerplate
  - essential-react - A minimal skeleton for building testable React apps using Babel.
  - generator-react-webpack - Yeoman generator for ReactJS and Webpack.
  - generator-starhackit - Full-stack starter kit.
  - gluestick - GlueStick is a command line interface for quickly developing universal web apps.
  - nwb - CLI tool and devDependency for React apps & components and npm modules.
  - react-hot-boilerplate - Minimal live-editing boilerplate for your next ReactJS project.
  - react-isomorphic-starterkit - Create an isomorphic React app in less than 5 minutes.
  - react-redux-universal-hot-example - A starter boilerplate for a universal webapp.
  - reactuate - React/Redux stack (not a boilerplate kit).
  - redux-cli - An opinionated CLI for building redux/react apps quicker.
  - relay-fullstack - Relay Starter Kit.
  - roc - Modern Application Development Ecosystem.
  - universal-redux - An npm package that lets you jump right into coding React and Redux.
  - generator-flux-on-rails - Scaffolder of universal Flux / Redux app, backed by Rails API.
  - react-redux-starter-kit - Get started with React, Redux, and React-Router!.
  - react-boilerplate - Quick packager-agnostic boilerplate for React modules using JSX.
  - create-react-app - Create React apps with no build configuration.
  - electron-react-boilerplate - Live editing development on desktop app.
- Communication with server
  - adrenaline - Simple Relay alternative.
  - react-relay - Relay is a JavaScript framework for building data-driven React applications.
  - react-transmit - Relay-inspired library based on Promises instead of GraphQL.
  - cerebral-module-http - HTTP module for Cerebral.
  - react-apollo - React data container for the Apollo Client.
  - apollo-client - A simple caching client for any GraphQL server and UI framework.
- CSS / Style
  - styled-components - Visual primitives for the component age.
  - aphrodite - It's inline styles, but they work!.
  - classnames - A simple javascript utility for conditionally joining classNames together.
  - 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-css-modules - Seamless mapping of class names to CSS modules inside of React components.
  - inline-style-prefixer - Run-time Autoprefixer for Inline Style Objects.
  - react-container-query - Modular responsive component.
  - react-responsive - Media queries in react for responsive design.
- Data Store
  - alt - Isomorphic flux implementation.
  - baobab-react - React integration for Baobab.
  - cerebral - A state controller with its own debugger.
  - fluxible - A pluggable container for universal flux applications.
  - fluxxor - Flux architecture tools for React.
  - mobx-react - React bindings for MobX. Create fully reactive components.
  - react-controllables - Easily create controllable components.
  - react-i13n - A performant, scalable and pluggable approach to instrumenting your React application.
  - 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-ui - Easy UI state management for react redux.
  - reflux - A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux.
  - shasta - Dead simple + opinionated toolkit for building redux/react applications.
  - fluorine-lib - Reactive state and side effect management for React using a single stream of actions.
  - reselect - Selector library for Redux.
  - kea - High level architecture for React apps.
  - react-redux-provide - Bridges the gap between Redux and the declarative nature of GraphQL/Relay.
  - react-redux - Official React bindings for Redux.
  - redux - Predictable state container for JavaScript apps.
- Form Logic
  - formik - Build forms without tears and supports Validation in ease.
  - formcat - A simple and easy way to control forms in React using the React Context API
  - formsy-react - A form input builder and validator for React JS.
  - newforms - INACTIVE] Isomorphic form-handling for React.
  - plexus-form - A dynamic form component for react using JSON-Schema.
  - react-redux-form - Create forms easily in React with Redux.
  - react-validation-mixin - Simple validation mixin (HoC) for React.
  - 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.
  - redux-form - A Higher Order Component using react-redux to keep form state in a Redux store.
  - react-jsonschema-form - A React component for building Web forms from JSONSchema.
- HTML Template
  - jsx-control-statements - Neater If and For for React JSX.
  - hyperx - Tagged template string virtual dom builder.
- 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).
- Miscellaneous
  - redux-auth-patch - Complete token authentication system for react + redux that supports isomorphic rendering.
  - tcomb-react - Alternative syntax for PropTypes.
  - redux-search - Redux bindings for client-side search.
- Props from server
  - 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-connect - Provides decorator for resolving async props in react-router.
  - redux-async-connect - Request async data, store in redux state, and connect to your component.
- Router
  - monorouter - An isomorphic JS router.
  - react-router-component - Declarative router component for React.
  - react-router-redux - Ruthlessly simple bindings to keep react-router and redux in sync.
  - react-router-scroll - React Router scroll management.
  - redux-router - Redux bindings for React Router – keep your router state inside your Redux store.
  - rrtr - A complete routing solution for React.js.
  - universal-router - A simple middleware-style router for isomorphic JavaScript web apps.
  - react-breadcrumbs - Automatic breadcrumbs for React-Router.
  - react-router - A complete routing library for React.
  - cerebral-module-router - An opinionated URL change handler for Cerebral.
Dev Tools
- Inspect
  - react-json-inspector - React JSON inspector component.
  - fluxguard - PROD change monitoring that highlights all DOM + design changes.
  - reactotron - A CLI and OS X app for inspecting your React JS and React Native apps.
- Miscellaneous
  - mighty-react-snippets - Crafty React and Redux ES6 snippets for Atom Editor.
  - react-atellier - The smartest way to share interactive components with your team.
  - react-heatpack - A 'heatpack' command for quick React development with webpack hot reloading.
  - standard-react - JavaScript Standard Style Guide.
  - cosmos-js - DX tool for designing truly encapsulated React components.
  - react-styleguidist - React style guide generator.
- Redux
  - redux-devtools-dock-monitor - A resizable and movable dock for Redux DevTools monitors.
  - redux-devtools-filterable-log-monitor - Filterable tree view monitor for Redux DevTools.
  - redux-devtools-inspector - Another Redux DevTools Monitor.
  - redux-devtools-log-monitor - The default monitor for Redux DevTools with a tree view.
  - remote-redux-devtools - Redux DevTools remotely.
  - redux-devtools-chart-monitor - A chart monitor for Redux DevTools.
  - redux-devtools - DevTools for Redux with hot reloading, action replay, and customizable UI.
- Test
  - carte-blanche - An isolated development space with integrated fuzz testing for your components.
  - legit-tests - Chainable, easy to read, React testing library.
  - react-unit - Lightweight unit test library for ReactJS.
  - 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-ava - Write AVA tests for redux pretty quickly.
  - jest-cli - Painless JavaScript Testing.
  - chai-enzyme - Chai.js assertions and convenience functions for testing React Components with enzyme.
  - enzyme - JavaScript Testing utilities for React.
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.
Performance
- App Size
  - babel-plugin-transform-react-remove-prop-types - Remove unnecessary React propTypes.
  - react-lite - An implementation of React that optimizes for small script size.
- Server-Side Rendering
  - react-esi - A library to boost SSR performance by exposing React components as Edge Side Includes (ESI) fragments
- UI
  - react-infinite - A browser-ready efficient scrolling container based on UITableView.
  - react-virtualized - React components for efficiently rendering large lists and tabular data.
  - react-canvas - High performance <canvas> rendering for React components.
  - react-fastclick - Fast Touch Events for React.
  - react-static-container - Renders static content efficiently.
  - react-perf-tool - Debug performance of your React application.
  - why-did-you-update - Puts your console on blast when React is making unnecessary updates.
  - react-infinite-grid - A React component which renders a grid of elements.
  - 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-render-visualizer - Render visualizer for ReactJS.
  - inferno - An extremely fast, React-like JavaScript library for building modern user interfaces.
UI Animation
- Form Components
  - animakit-elastic - AnimakitElastic - React component for flexible resizing of the blocks.
  - animakit-expander - AnimakitExpander - React component for the expanding and collapsing of the blocks.
  - animakit-rotator - AnimakitRotator - React component for the 3D rotation of the blocks.
  - data-driven-motion - Easily animate your data in react.
  - rc-animate - Anim react element easily.
  - react-flip-move - Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
  - react-gsap-enhancer - Use the full power of React and GSAP together.
  - react-magic-move - MagicMove for React.js.
  - react-motion-ui-pack - Wrapper component around React Motion for easier UI transitions.
  - react-motion - A spring that solves your animation problems.
  - react-mt-svg-lines - A React.js wrapper component to animate the line stroke in SVGs.
  - react-router-transition - Transitions built for react-router, powered by react-motion.
  - react-spark-scroll - Scroll-based actions and animations for react.
  - react-track - Track the position of DOM elements. Create cool animations.
  - react-transitive-number - React component to apply transition effect to numeric strings, a la old Groupon timers.
  - react-tween-state - React animation.
  - react-web-animation - React components for the Web Animations API -.
  - react.animate - State animation plugin for react.js.
  - react-scroll-rotate - [demo](https://giladk.github.io/react-scroll-rotate/) - Very simple scroll based element rotation
  - react-anime - A super easy animation library for React.
  - velocity-react - React components for Velocity.js.
- Parallax
  - react-parallax-component - Easiest way to add scroll parallax effect on the component.
  - react-atv-img - A port of @drewwilson’s atvImg (Apple TV 3D parallax effect) library in React.
UI Components
- Audio / Video
  - react-player - A react component for playing a variety of URLs, including YouTube.
  - react-dailymotion - Dailymotion player component for React.
  - react-music - Make beats with React.
  - video-react - A web video player built for the HTML5 world using React library.
  - react-youtube - React.js powered YouTube player component.
  - react-soundplayer - Create custom SoundCloud players with React.
- Carousel
  - react-id-swiper - A library to use idangerous Swiper as a ReactJs component
  - react-responsive-carousel - React.js Responsive Carousel (with Swipe).
  - react-slick - React carousel component.
- Chart
  - essential js 2 charts - Beautiful and interactive charts & graphs for react.
  - react-chartist - React component for Chartist.js.
  - react-chartjs - Common react charting components using chart.js.
  - 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-micro-bar-chart - React component for micro bar-charts rendered with D3.
  - 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.
  - chartify - React.js plugin for building animated draggable and customizable charts.
  - reaviz - ReactJS Data Visualization Library based on D3.js
- Collapse
  - react-accessible-accordion - Accessible Accordion component for React.
  - react-collapse - Component-wrapper for collapse animation with react-motion.
- Custom Scrollbar
  - react-custom-scroll - [demo](http://rommguy.github.io/react-custom-scroll/example/demo.html) - Easily customize the browser scroll bar with native OS scroll behavior.
  - react-scrollbar - Scrollbar component for React.
- Form Components
  - input-moment - React datetime picker powered by momentjs.
  - rc-calendar - React Calendar.
  - react-calendar - A modular toolkit to build calendar-related things in React.

Programming Languages

JavaScript 308 TypeScript 70 CoffeeScript 5 CSS 3 SCSS 1 Less 1 LiveScript 1 Rust 1 Ruby 1

awesome-react-components

Code Design

Boilerplate

Communication with server

CSS / Style

Data Store

Form Logic

HTML Template

Isomorphic Apps

Miscellaneous

Props from server

Router

Dev Tools

Inspect

Miscellaneous

Redux

Test

Miscellaneous

Miscellaneous

Static Website Generator

Performance

App Size

Server-Side Rendering

UI

UI Animation

Form Components

Parallax

UI Components

Audio / Video

Carousel

Chart

Collapse

Custom Scrollbar

Form Components