Git Product home page Git Product logo

awesome-react-components's Introduction

Awesome React Components Awesome

Curated List of React Components / Libraries.

Contribution

To add a Component / Library:

  • Add a line to this list by opening a new pull request
  • Line format: - [npm-package-name](https://github.com/foo/bar) - short description without emojis.
  • Add the line at the end of a section
  • If it doesn't fit any section then open a new issue so we can discuss creating a new section
Collaboration

I'm looking to maintain this list with others. If you are interested let me know and we'll create a GitHub organization.

Table of Content


---

UI Components

Table / Data Grid
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.
Modals

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

A temporary little modal to notify the user

Tooltips
Menu/Sidebar
  • react-burger-menu - An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations.
  • react-sidebar - A sidebar component for React.
Implementations similar to position: sticky
Tabs
Loading Indicators

Let user know that something is being loaded

  • halogen - A collection of loading spinners with React.js.
  • react-ladda - React wrapper for Ladda buttons.
  • react-progress-button - Simple react.js component for an inline progress indicator.
  • react-loader - React component that displays a spinner via spin.js until your component is loaded.
  • react-spinkit - A collection of loading indicators animated with CSS for React.
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

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
  • react-time - Component for React to render relative and/or formatted dates into <time> HTML5 element.
Photo/Image Gallery
Touch Swipe
Miscellaneous
  • react-custom-scrollbars - React scrollbars component.
  • 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 - An opinionated toolkit for building websites with beautiful typography.
  • react-paginate - A ReactJS component that creates a pagination.
  • react-scrollbar - Scrollbar component for React.
  • react-json-tree - React JSON Viewer Component, Extracted from redux-devtools.
  • react-icons - svg react icons of popular icon packs using ES6 imports.

UI Layout

Components to layout the app's UI

UI Forms

Let user enter data

Form Logic/Frameworks

  • react-jsonschema-form - A React component for building Web forms from JSONSchema.
  • react-validation-mixin - Simple validation mixin (HoC) for React.
  • newforms - 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.

Form UI/Components/Inputs

Date / Time picker, Schedular
Rich Text Editing
Sortable List

Let user define an order on a list

  • sortablejs - Sortable — is a minimalist 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.
Drag and Drop
Autosuggest / Autocomplete / Typeahead
Select
  • react-selectize - A Stateless & Flexible Select component for React inspired by Selectize.
  • react-aria-menubutton - A fully accessible, easily themeable, React-powered menu button.
  • react-select - A Select control built with and for React JS.
Color Picker
Toggle
  • react-toggle - An elegant, accessible toggle component for React. Also a glorified checkbox.
Slider
Radio buttons
Type Selection

Let user select 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 Collection
Miscellaneous
  • react-designer - Easy to configure, lightweight, editable vector graphics in your react components.

UI Animation/Transition

Parallax
  • react-atv - 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.
  • dataminr-react-components - Collection of reusable React Components and utility functions.
  • 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.
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.

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

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

Router
Components State / Data Store / 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 https://github.com/rackt/redux 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.
Components State/Props Coming from Server
  • 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.
HTML Template
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 - Dynamic Autoprefixer for inline styles.
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.
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.
Scaffolds / Boilerplates / Starter Kits / Generators / Examples
  • 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 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.
Miscellaneous

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.

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-virtualized - React components for efficiently rendering large lists and tabular data.
  • 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-lazy-load - React component that renders children elements when they enter the viewport.

App Size

Dev Tools

Redux
Inspect
Miscellaneous

Utilities

  • react-faux-dom - DOM like structure that renders to React.
  • react-translate-component - A component for React that utilizes the Counterpart module to provide multi-lingual/localized text content.
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.

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.
  • react-stripe-checkout - Load stripe's checkout.js as a react component. Easiest way to use checkout with React.
  • 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 OS X El Capitan 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.
Static Website Generator
  • gatsby - Transform plain text into dynamic blogs and websites using React.js.
  • phenomic - Modern website generator based on the React and Webpack ecosystem.
  • sitegen - Generate websites by composing React components.

Creative Things

Things that lead to the thought "I didn't think about this but this is a great idea". This is a new section and many other things should be included here. Open an Issue if you think a/your component should be added.

awesome-react-components's People

Contributors

brillout avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.