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: 5 days ago
JSON representation
-
Code Design
-
Form Logic
- formik - Build forms without tears and supports Validation in ease.
- newforms - INACTIVE] Isomorphic form-handling for React.
- react-redux-form - Create forms easily in React with Redux.
- react-formawesome - Complex library for creating awesome forms.
- surveyjs - The advanced Survey and Form library
- react-validation-mixin - Simple validation mixin (HoC) for React.
- formsy-react - A form input builder and validator for React JS.
- winterfell - Generate complex, validated and extendable JSON-based forms in React.
- tcomb-form - Forms library for react.
- plexus-form - A dynamic form component for react using JSON-Schema.
- formcat - A simple and easy way to control forms in React using the React Context API
- 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.
-
CSS / Style
- styled-components - Visual primitives for the component age.
- aphrodite - It's inline styles, but they work!.
- react-css-modules - Seamless mapping of class names to CSS modules inside of React components.
- classnames - A simple javascript utility for conditionally joining classNames together.
- radium - A set of tools to manage inline styles on React elements.
- postcss-js - PostCSS for React Inline Styles, Free Style and other CSS-in-JS.
- react-responsive - Media queries in react for responsive design.
- react-container-query - Modular responsive component.
- inline-style-prefixer - Run-time Autoprefixer for Inline Style Objects.
-
Props from server
- react-refetch - A simple, declarative, and composable way to fetch data for React components.
- redux-connect - Provides decorator for resolving async props in react-router.
- react-async - Asynchronously fetch data for React components.
- react-router-relay - Relay integration for React Router.
- react-resolver - Async rendering & data-fetching for universal React applications.
- redial - Universal data fetching and route lifecycle management for React etc.
- redux-async-connect - Request async data, store in redux state, and connect to your component.
-
Boilerplate
- generator-react-webpack - Yeoman generator for ReactJS and Webpack.
- react-redux-universal-hot-example - A starter boilerplate for a universal webapp.
- generator-starhackit - Full-stack starter kit.
- nwb - CLI tool and devDependency for React apps & components and npm modules.
- react-hot-boilerplate - Minimal live-editing boilerplate for your next ReactJS project.
- gluestick - GlueStick is a command line interface for quickly developing universal web apps.
- 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.
- relay-fullstack - Relay Starter Kit.
- universal-redux - An npm package that lets you jump right into coding React and Redux.
- react-isomorphic-starterkit - Create an isomorphic React app in less than 5 minutes.
- roc - Modern Application Development Ecosystem.
- 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.
-
Data Store
- recompose - A React utility belt for function components and higher-order components.
- redux-ui - Easy UI state management for react redux.
- fluxxor - Flux architecture tools for React.
- react-i13n - A performant, scalable and pluggable approach to instrumenting your React application.
- baobab-react - React integration for Baobab.
- cerebral - A state controller with its own debugger.
- fluxible - A pluggable container for universal flux applications.
- redux-batched-actions - Reducer + action to reduce actions under a single subscriber notification.
- shasta - Dead simple + opinionated toolkit for building redux/react applications.
- 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.
- alt - Isomorphic flux implementation.
- react-controllables - Easily create controllable components.
- mobx-react - React bindings for MobX. Create fully reactive components.
- 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.
-
Router
- react-router-redux - Ruthlessly simple bindings to keep react-router and redux in sync.
- universal-router - A simple middleware-style router for isomorphic JavaScript web apps.
- react-router-component - Declarative router component for React.
- 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.
- monorouter - An isomorphic JS router.
- react-router - A complete routing library for React.
- react-breadcrumbs - Automatic breadcrumbs for React-Router.
- cerebral-module-router - An opinionated URL change handler for Cerebral.
-
Miscellaneous
- tcomb-react - Alternative syntax for PropTypes.
- redux-auth-patch - Complete token authentication system for react + redux that supports isomorphic rendering.
- redux-search - Redux bindings for client-side search.
- react-inlinesvg - An SVG loader component for ReactJS.
-
Communication with server
- react-relay - Relay is a JavaScript framework for building data-driven React applications.
- adrenaline - Simple Relay alternative.
- react-transmit - Relay-inspired library based on Promises instead of GraphQL.
- react-apollo - React data container for the Apollo Client.
- cerebral-module-http - HTTP module for Cerebral.
- apollo-client - A simple caching client for any GraphQL server and UI framework.
-
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-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.
- isomorphic-relay - Adds server side rendering support to React Relay.
- webpack-isomorphic-tools - Server-side rendering for your Webpack-built applications (e.g. React).
-
-
UI Components
-
Chart
- essential js 2 charts - Beautiful and interactive charts & graphs for react.
- recharts - Redefined chart library built with React and D3.
- victory - Data viz for React.
- react-vis - Data visualization library based on React and d3.
- react-chartist - React component for Chartist.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-sigmajs - Lightweight but powerful library for drawing network graphs built on top of SigmaJS.
- react-sparklines - Beautiful and expressive Sparklines React component.
- react-timeseries-charts - Declarative timeseries charts.
- rumble-charts - React components for building composable and flexible charts.
- react-trend - Simple, elegant spark lines.
- react-chartjs - Common react charting components using chart.js.
- react-sparkline - React component for rendering simple sparklines.
- react-micro-bar-chart - React component for micro bar-charts rendered with D3.
- chartify - React.js plugin for building animated draggable and customizable charts.
- reaviz - ReactJS Data Visualization Library based on D3.js
-
Loader
- 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.
- react-redux-loading-bar - Simple Loading Bar for Redux and React.
- react-ladda - React wrapper for Ladda buttons.
- react-progress-button - Simple react.js component for an inline progress indicator.
- react-loaders - Lightweight wrapper around Loaders.css.
- react-block-ui - Easy way to block the user from interacting with your UI.
- react-md-spinner - Material Design spinner components for React.js.
- rc-progress - React Progress Bar.
- react-progress-label - Progress label component.
-
Audio / Video
- react-player - A react component for playing a variety of URLs, including YouTube.
- 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.
- react-youtube - React.js powered YouTube player component.
- react-soundplayer - Create custom SoundCloud players with React.
-
Form Components
- react-beautiful-dnd - Beautiful and accessible drag and drop for lists with React
- react-autosuggest - WAI-ARIA compliant React autosuggest component.
- react-input-enhancements - Set of enhancements for input control.
- react-ace - React Ace Component.
- react-select - A Select control built with and for React JS.
- react-quill - A Quill component for React.
- react-sortable-pane - Sortable and resizable pane component for React.
- react-datepicker - A simple and reusable datepicker component for React.
- react-aria-menubutton - A fully accessible, easily themeable, React-powered menu button.
- react-numpad - A numpad for number, date and time, built with and for React. It's written with the extensibility in mind. The idea of this project is to cover the majority of input types in a form.
- react-calendar - A modular toolkit to build calendar-related things in React.
- react-day-picker - Flexible date picker for React.
- react-simple-timefield - [demo](https://antonfisher.com/react-simple-timefield/) - Simple time input field.
- react-yearly-calendar - React.js Yearly Calendar Component.
- react-input-mask - Yet another react component for input masking.
- react-typeahead - Pure react-based typeahead and typeahead-tokenizer.
- react-select-box - An accessible select box component for React.
- coloreact - A tiny Color Picker for React.
- react-ios-switch - React switch component.
- react-radio-group - Better radio buttons.
- react-autocomplete-input - Autocomplete input field for React.
- react-tagsinput - A simple react component for inputing tags.
- react-tokeninput - Tokeninput component for React.
- react-input-autosize - Auto-resizing input field for React.
- react-awesome-stars-rating - [demo](https://react-awesome-stars-rating.herokuapp.com/) - The star rating component with accessibility.
- react-star-rating-input - React.js component for entering 0-5 (or more) stars.
- react-dragula - Drag and drop so simple it hurts.
- react-anything-sortable - Sort any children with touch support and IE8 compatibility.
- alloyeditor - WYSIWYG editor based on CKEditor with completely rewritten UI.
- megadraft - Rich Text editor built on top of draft.js.
- react-contenteditable - React component for a div with editable contents.
- react-draft-wysiwyg - A Wysiwyg editor build on top of ReactJS and DraftJS.
- react-medium-editor - React wrapper for medium-editor.
- react-trumbowyg - React wrapper for Trumbowyg.
- react-markdown-editor - A markdown editor using React/Reflux.
- react-avatar-editor - Facebook-like, avatar / profile picture component.
- formsy-react-components - A set of React JS components for use in a formsy-react form.
- react-widgets - An à la carte set of polished, extensible, and accessible inputs built for React.
- rc-calendar - React Calendar.
- react-daterange-picker - A React based date range picker.
- input-moment - React datetime picker powered by momentjs.
- react-codemirror - Codemirror Component for React.js.
- ritzy - Collaborative web-based rich text editor.
- react-sortable-hoc - Higher-order components to turn any list into an animated, touch-friendly, sortable list.
- react-sortable - A sortable list component built with React.
- react-typeahead-component - Typeahead, written using the React.js library.
- react-selectize - A Stateless & Flexible Select component for React inspired by Selectize.
- react-color - Color Pickers from Sketch, Photoshop, Chrome & more.
- rc-slider - React Slider.
- react-maskedinput - Masked <input/> React component.
- react-md-editor - React.js Markdown Editor Component.
- @pathofdev/react-tag-input - [demo & docs](https://pathof.dev/projects/react-tag-input) - Minimal tagging component with editable tags
- react-droparea - Drag and Drop library for React.
- react-images-uploader - React.js component for uploading images to the server.
- r-date-picker - React.js high customize date picker component, easy style it.
- react-image-crop - A responsive image cropping tool for React.
- react-date-range - A React component for choosing dates and date ranges.
- react-datetime - A lightweight but complete datetime picker react component.
- react-flatpickr - Flatpickr for React.
- react-credit-cards - Beautiful credit cards for your payment forms.
- react-input-color - React input color component with hsv color picker.
- react-toggle - An elegant, accessible toggle component for React. Also a glorified checkbox.
- react-star-rating - A simple star rating component built with React.
- react-dropzone - Simple HTML5 drag-drop zone with React.js.
- draft-js - A React framework for building text editors.
- react-image-cropper - React image crop.
- react-upload-gallery - React for Upload Image Gallery. Drag & Drop, Sortable, Customize.
- react-syntax-highlighter - Syntax highlighting component for react with prismjs or highlightjs ast using inline styles.
- react-dates - An easily internationalizable, mobile-friendly datepicker library for the web.
- react-big-calendar - Gcal/outlook like calendar component.
- formsy-material-ui - A Formsy compatibility wrapper for Material-UI form components.
- sortablejs - A JavaScript library for reorderable drag-and-drop lists.
- react-avatar-cropper - Aiming to be a complete solution for avatar cropping in react.
- react-designer - Easy to configure, lightweight, editable vector graphics in your react components.
- react-triple-toggle - ⚛️ React multi toggle component.
- react-dnd-touch-backend - Touch Backend for react-dnd.
- react-slider - Slider component for React.
- react-mentions - Mention people in a textarea.
- react-textarea-autosize - <textarea /> component for React which grows with content.
- react-tag-input - A fantastically simple tagging component for your React projects.
- react-dnd - Drag and Drop for React.
- react-draggable - React draggable component.
-
Menu
- react-burger-menu - An off-canvas sidebar with effects and styles.
- react-offcanvas - Off-canvas menus for React.
- react-sidebar - A sidebar component for React.
- react-metismenu - A ready-to-use menu component for React.
- react-contextmenu - Context Menu implemented in React.
- rc-menu - React Menu.
-
Overlay
- react-aria-modal - A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.
- react-modal - Accessible modal dialog component for React.
- react-dock - Resizable dockable react component.
- boron - A collection of dialog animations with React.js.
- react-skylight - A react component for modals and dialogs.
- modali - A delightful modal dialog component, built from the ground up to support React Hooks.
-
Miscellaneous
- react-joyride - Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!.
- react-split-pane - React split-pane component.
- react-blur - React component for blurred backgrounds.
- react-file-reader-input - File input component for control for file reading styling and abstraction.
- react-filter-control - The React filterbuilder component for building the filter criteria in the UI.
- react-swipe-to-delete-ios - [demo](https://arnaudambro.github.io/react-swipe-to-delete-ios/) - To delete an item in a list the same way iOS does.
- typography - A powerful toolkit for building websites with beautiful typography.
- react-json-tree - React JSON Viewer Component, Extracted from redux-devtools.
- react-svg-buttons - Configurable animated SVG buttons for react.
- material-color-hash - Hash strings to Material UI colors.
- react-avatar-generator - Allows users to create random kaleidoscopes to be used as avatars.
- react-facebook - Facebook components like a Login button, Like, Share, Comments, Page or Embedded Post.
- react-resizable-and-movable - Resizable and movable component for React.
- react-resizable-box - Resizable component for React. #reactjs.
- react-color-scroll - Change and blend new colors on the background as you scroll.
- react-avatar - Universal React avatar component makes it possible to generate avatars based on user information.
-
Collapse
- react-accessible-accordion - Accessible Accordion component for React.
- react-collapse - Component-wrapper for collapse animation with react-motion.
-
Carousel
- react-slick - React carousel component.
- react-responsive-carousel - React.js Responsive Carousel (with Swipe).
- react-id-swiper - A library to use idangerous Swiper as a ReactJs component
-
Notification
- reapop - A React & Redux notifications system.
- react-toast-notifications - [demo](https://jossmac.github.io/react-toast-notifications/) - pleasing toast system. _([But no hooks yet](https://github.com/jossmac/react-toast-notifications/issues/20).)_
- react-toastify - [demo](https://fkhadra.github.io/react-toastify/) - best bet out there at the moment. Hooks support. No refs.
- react-notifications-component - [demo](https://teodosii.github.io/react-notifications-component/) - highly configurable notifications. _(Uses refs 🙁)_
- react-notification-system - A complete and totally customizable component for notifications in React. _(Uses refs 🙁)_
- react-notification - Snackbar notifications for React.
- cogo-toast - [demo/docs](https://cogoport.github.io/cogo-toast) - Plug and play, toast messages, with promise support and inbuilt styling, ~3.5K. _(No refs / provider needed 😊)_
- react-snackbar-alert - [demo](https://joeattardi.github.io/react-snackbar-alert/) - Simple snackbar notifications. Uses Context API.
- simple-react-notifications - [demo](https://alexpermyakov.github.io/simple-react-notifications/) - Tiny notification library (1kb gzip).
-
Photo / Image
- react-svg-pan-zoom - A React component that adds pan and zoom features to SVG.
- react-image-gallery - Responsive image gallery, carousel, image slider react component.
- react-intense - A React component for viewing large images up close.
- react-images - A simple lightbox component for displaying an array of images.
- react-photo-gallery - Responsive React Photo Gallery.
- react-compare-image - [demo](https://react-compare-image.yuuniworks.com/) - React component to compare two images using a slider.
- react-image-lightbox - React lightbox component.
-
Map
- react-gmaps - A Google Maps component for React.js.
- react-mapbox-gl - A React binding of mapbox-gl-js.
- react-geosuggest - A React autosuggest for the Google Maps Places API.
- react-leaflet - React components for Leaflet maps.
- react-map-gl - A React wrapper for MapboxGL-js and overlay API.
- google-map-react - Universal google map react component, allows render react components on the google map.
-
UI Navigation
- react-scroll - React scroll component.
- react-swipeable-views - A React Component for binded Tabs and Swipeable Views.
-
Time / Date / Age
- react-timeago - A simple time-ago component for ReactJs.
- timeago-react - Format date with `*** time ago` statement. eg: '3 hours ago'.
-
Tree
- react-treeview - Easy, light, flexible tree view made with React.
- react-treebeard - React Tree View Component. Data-Driven, Fast, Efficient and Customisable.
- react-ui-tree - React tree component.
-
Tabs
- react-tabs - React tabs component.
- react-tabtab - React, tabs.
-
Sticky
- react-sticky - <Sticky /> component for awesome React apps.
- react-headroom - Hide your header until you need it.
- react-stickynode - A performant and comprehensive React sticky.
-
Table / Data Grid
- react-pivot - Data-grid component with pivot-table-like for data display, filtering, and exploration.
- gigatables-react - Sorting, pagination/infinite scroll, global/column search, AJAX CRUD, and more.
- mui-datatables - Advanced and Pretty Data Tables where everything is customisable.
- sematable - Client side sorting, pagination, and text filter for redux/react based apps.
- shineout - [demo](https://shine.wiki/1.3.x/en/components/Table#heading-08-bigdata) - A comprehensive solution for complicated/big-data table.
- reactable - Fast, flexible, and simple data tables in React.
- griddle-react - Simple Grid Component written in React.
- react-data-components - React components for sorting, filtering and pagination of data.
- reactabular - Spectacular tables for React.
- ag-grid - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components.
- react-data-grid - Excel-like grid.
-
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.
-
Icons
- iconify-react - Over 40k icons from 50+ icon sets, including all popular icon and emoji sets.
- react-icons - Svg react icons of popular icon packs using ES6 imports.
-
Paginator
- react-paginate - A ReactJS component that creates a pagination.
- react-laravel-paginex - Laravel Pagination with ReactJS (customizable).
-
Tooltip
- rc-tooltip - React Tooltip.
- react-portal-tooltip - Awesome React tooltips.
- react-tooltip - React tooltip component.
-
Markdown Viewer
- react-markdown - Render Markdown as React components.
-
Infinite Scroll
- react-list - A versatile infinite scroll React component.
-
-
UI Frameworks
-
Responsive
- atlaskit - Atlassian's official UI library. _(Please... no more Jira though 😉)_
- semantic-ui-react - The official Semantic-UI-React integration.
- gestalt - [demo/docs](https://pinterest.github.io/gestalt/#/) - A set of components that supports Pinterest’s design language. _(Nice... but surprisingly not as well-designed as I would have thought from Pinterest. 😬)_
- react-toolbox - A set of React components implementing Google's Material Design.
- belle - Configurable React Components with great UX.
- blueprint - [demo](https://blueprintjs.com/) - [docs](https://blueprintjs.com/docs/) - UI toolkit for the web.
- ant-design - [demo/docs](https://ant.design/docs/react/introduce) - A UI Design Language.
- rctui - A collection of components for React.
- grommet - The most advanced UX framework for enterprise applications.
- carbon - [demo/docs](https://www.carbondesignsystem.com/) - A design system built by IBM. _(Wait, since when are IBM known for design?? 🎨)_
- searchkit - React UI components / widgets. The easiest way to build a great search experience with Elasticsearch.
- react-essence - Essence - The Essential Material Design Framework.
- react-materialize - Material design for react, powered by materializecss.
- elemental - A flexible and beautiful UI framework for React.js.
- react-uikit-components - React UIkit Components for the UIKit CSS framework.
- react-foundation-apps - Foundation Apps components built with React.
- pivotal-ui-react - React components based on a custom version of the Bootstrap library.
- OnsenUI - [demo/docs](https://onsen.io/v2/guide/react/) - Mobile app development framework.
- office-ui-fabric-react - React components for building Microsoft web experiences. _(🤔 But I'm not sure I want a "MSFT experience?")_
- react-foundation - Foundation as React components.
- material-ui - React Components that Implement Google's Material Design. (But possibly [bloated](https://hackernoon.com/how-i-made-my-react-app-4-times-faster-7b929479cac4).)
-
Component Collections
- react-admin - Build admin user experiences on top of REST and GraphQL services.
- react-desktop - React UI Components for macOS Sierra and Windows 10.
- shards-react - [docs/demo](https://designrevision.com/docs/shards-react/getting-started) - A beautiful and modern React design system. Freemium 💰
- react-stack-cards - Collection of stack card effects for galleries and preview grids.
- aframe-react - Build virtual reality experiences with A-Frame and React.
- dataminr-react-components - Collection of reusable React Components and utility functions.
-
Mobile
- antd-mobile - A configurable Mobile UI.
- touchstonejs - Mobile App Framework powered by React.
- reactionic - React Ionic.
-
-
Utilities
-
Integrations with Third Party Services
- redux-segment - Segment.io analytics integration for redux.
- react-recaptcha - A react.js reCAPTCHA for Google.
- react-ga - React Google Analytics Module.
- react-google-analytics - Google analytics component.
- react-stripe-checkout - Load stripe's checkout.js as a react component. Easiest way to use checkout with React.
-
Miscellaneous
- react-media - A CSS media query component for React.
- qrcode.react - A <QRCode/> component for use with React.
- react-children-utilities - Extended utils for React.Children.
- react-middle-ellipsis - [demo](https://bluepeter.github.io/react-middle-ellipsis/) - Truncate long strings in the middle instead of the end.
- react-translate-component - Multi-lingual/localized text content.
- react-faux-dom - DOM like structure that renders to React.
-
Framework bindings / integrations
- 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-famous - React bridge to Famo.us.
- backbone-react-component - A bit of nifty glue that automatically plugs your Backbone models.
- react-d3-library - Open source library for using D3 in React.
- react-localstorage - Simple componentized localstorage implementation for Facebook's React.
- react-swf - Shockwave Flash Player component for React.
- 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.
- reactive-elements - Allows to use React.js component as HTML element (web component).
- gl-react - OpenGL / WebGL bindings for React to implement complex effects over images and content.
- react-elm-components - Write React components in Elm.
- reactfire - ReactJS mixin for easy Firebase integration.
-
i18n
- react-i18next - Internationalization for react done right. Using the i18next i18n ecosystem.
- react-globalize - Bringing the i18n functionality of Globalize, backed by CLDR, to React.
- react-translate-maker - Universal internationalization (i18n) open source library for React.
- react-intl - Internationalize React apps.
-
-
Uncategorized
-
UI Utilities
-
Meta Tags
- 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.
-
Device Input
- react-keydown - Lightweight keydown wrapper for React components.
- react-key-handler - React component to handle keyboard events.
- react-shortcuts - Manage keyboard shortcuts from one place.
- react-scroll-components - A set of components that react to page scrolling.
- react-swipe - Swipe.js as a React component.
- react-aim - Determine the cursor aim for triggering mouse events.
- react-hotkeys - Declarative hotkey and focus area management for React.
-
Reporter
- react-visibility-sensor - Sensor component.
- react-component-queries - Provide props to your Components based on their Width and/or Height.
- react-container-dimensions - Wrapper component that detects element resize.
- react-dimensions - React higher-order component to get dimensions of container.
- react-height - Component-wrapper to determine and report children elements height.
- react-measure - Compute measurements of a React component.
- react-sizeme - Make your React Components aware of their width and height.
- react-height-reporter - React component-wrapper detecting height changes of it's children.
- react-waypoint - A React component to execute a function whenever you scroll to an element.
-
Portal
- react-portal - React component for transportation of modals, lightboxes, loading bars... to document.body.
- react-gateway - Render React DOM into a new context (aka "Portal").
- react-layer-stack - Simple but ubiquitously powerful and agnostic layering system for React.
-
Test User Behavior
- react-ab - Simple declarative and universal A/B testing component for React.
- react-experiments - React components for implementing UI experiments.
-
-
Miscellaneous
-
Static Website Generator
-
Miscellaneous
- htmltojsx - Automatically AJAXify plain HTML with the power of React. It's magic!.
- react-blessed - A react renderer for blessed.
- html-to-react-components - Extract annotated portions of HTML into React components as separate modules.
- jsonx - React JSON Syntax.
- mozaik - Mozaïk is a tool based on nodejs / react / d3 / stylus to easily craft beautiful dashboards.
-
-
Performance
-
UI
- why-did-you-update - Puts your console on blast when React is making unnecessary updates.
- 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.
- 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.
-
Server-Side Rendering
- react-esi - A library to boost SSR performance by exposing React components as Edge Side Includes (ESI) fragments
-
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.
-
-
UI Animation
-
Form Components
- data-driven-motion - Easily animate your data in react.
- react-track - Track the position of DOM elements. Create cool animations.
- react-motion - A spring that solves your animation problems.
- 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-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-transitive-number - React component to apply transition effect to numeric strings, a la old Groupon timers.
- react-web-animation - React components for the Web Animations API -.
- react-tween-state - React animation.
- react-motion-ui-pack - Wrapper component around React Motion for easier UI transitions.
- react-magic-move - MagicMove for React.js.
- rc-animate - Anim react element easily.
- react.animate - State animation plugin for react.js.
- animakit-rotator - AnimakitRotator - React component for the 3D rotation of the blocks.
- animakit-elastic - AnimakitElastic - React component for flexible resizing of the blocks.
- animakit-expander - AnimakitExpander - React component for the expanding and collapsing of the blocks.
- react-scroll-rotate - [demo](https://giladk.github.io/react-scroll-rotate/) - Very simple scroll based element rotation
- velocity-react - React components for Velocity.js.
- react-anime - A super easy animation library for React.
-
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.
-
-
Dev Tools
-
Test
- carte-blanche - An isolated development space with integrated fuzz testing for your components.
- react-unit - Lightweight unit test library for ReactJS.
- redux-test-recorder - A redux middleware to automatically generate tests for reducers through ui interaction.
- unexpected-react - Plugin for unexpected to enable testing the full React virtual DOM, and also the shallow renderer.
- ui-harness - Create, isolate and test modular UI components in React.
- legit-tests - Chainable, easy to read, React testing library.
- 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.
-
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.
-
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
- react-heatpack - A 'heatpack' command for quick React development with webpack hot reloading.
- react-atellier - The smartest way to share interactive components with your team.
- mighty-react-snippets - Crafty React and Redux ES6 snippets for Atom Editor.
- standard-react - JavaScript Standard Style Guide.
- cosmos-js - DX tool for designing truly encapsulated React components.
- react-styleguidist - React style guide generator.
-
-
UI Layout
-
Form Components
- react-spaces - [demo/docs](https://www.allaneagle.com/react-spaces/demo/) - Nestable anchored, resizable, scrollable components.
- autoresponsive-react - Auto responsive grid layout library.
- m-react-splitters - React splitter component, written in TypeScript.
- react-masonry-component - A React.js component for using @desandro's Masonry.
- react-reflex - Flex layout container component for advanced React web applications.
- react-stonecutter - Animated grid layout component for React.
- react-flexbox-grid - A set of React components implementing flexboxgrid with the power of CSS Modules.
- flexbox-react
- react-stack-grid - Pinterest like layout components for React.js.
- react-grid-layout - A draggable and resizable grid layout with responsive breakpoints, for React.
- golden-layout - A multi-screen javascript Layout manager.
- hedron - A no-frills flexbox grid system for React, powered by styled-components.
-
Programming Languages
Categories
Sub Categories
Form Components
115
Miscellaneous
37
Responsive
21
Data Store
20
Chart
19
Boilerplate
18
Framework bindings / integrations
13
Form Logic
13
UI
12
Table / Data Grid
11
Test
10
Loader
10
Router
10
CSS / Style
9
Reporter
9
Notification
9
Device Input
7
Redux
7
Props from server
7
Photo / Image
7
Overlay
6
Component Collections
6
Audio / Video
6
Isomorphic Apps
6
Map
6
Communication with server
6
Menu
6
Integrations with Third Party Services
5
i18n
4
Sticky
3
Tree
3
Tooltip
3
Mobile
3
Portal
3
Inspect
3
Carousel
3
Meta Tags
3
Parallax
2
Collapse
2
HTML Template
2
Tabs
2
Test User Behavior
2
Time / Date / Age
2
UI Navigation
2
App Size
2
Static Website Generator
2
Icons
2
Uncategorized
2
Custom Scrollbar
2
Paginator
2
Server-Side Rendering
1
Markdown Viewer
1
Infinite Scroll
1
Keywords
react
180
javascript
56
react-component
29
reactjs
28
react-components
23
component
13
redux
11
ui
9
typescript
9
components
7
grid
7
css
7
nodejs
6
web
6
webpack
6
babel
6
d3
6
notifications
6
svg
6
form
6
drag-and-drop
5
design-system
5
graphql
5
chart
5
forms
5
isomorphic
5
table
5
relay
5
router
4
datepicker
4
responsive
4
ssr
4
autocomplete
4
reactjs-components
4
jsx
4
sortable
4
html
4
data-visualization
4
toast
4
json
4
carousel
4
universal
4
animation
3
css-in-js
3
mobile
3
react-native
3
modal
3
wysiwyg-editor
3
resizable
3
component-library
3