Awesome React components & libraries to use 🏆

This is a list of awesome useful react components and libraries that can solve your problems and boost your app performance & creativity.

UI Components

Editable data grid / spreadsheet

• ag-grid — Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components.
• gigatables-react — Sorting, pagination/infinite scroll, global/column search, AJAX CRUD, and more.
• react-data-grid — Excel-like grid.
• revo-grid — demo/docs — Powerfull Data Grid for React / AngularJS / Vue / Web Components with advanced customization.
• ReactGrid — demo/docs — Add spreadsheet-like behavior to your app
• jqwidgets-react-grid — Filtering, Pagination, Grouping, Export to Excel, PDF, CRUD and more.

Table

• autoresponsive-react — Auto Responsive Layout Library For React.
• ka-table — demo — Customizable table component with sorting, filtering, grouping, virtualization, editing etc. 🆕
• material-table — demo/docs — Built on Material UI, plus: grouping, tree data, expandable rows, export, inline editing
• mui-datatables — Built on Material-UI. Search, styling, filtering, resize/hide columns, export, print, select/expand rows.
• react-data-table — demo/docs — accessible, responsive, themable, declaratively configurable table with sorting, selectable rows, expandable rows, pagination
• react-table — demo — Hooks for building fast and extendable tables and datagrids
• rsuite-table — demo/docs — A table component that supports virtualized.
• sematable — Client-side sorting, pagination, and text filter for redux/react based apps.
• DevExtreme React Grid — High-performance plugin-based data grid for Bootstrap and Material Design.
• Smart React Grid — Fast and feature-complete data grid with Material Design.
• KendoReact Grid — Powerful data grid component with 100+ ready-to-use features like paging, sorting, export to Excel, and more.

Infinite Scroll

• @egjs/react-infinitegrid — npm — demo — A module used to arrange card elements including content infinitely according to various layout types.
• react-lazyload — Lazyload your Component, Image or anything matters the performance.
• react-list — A versatile infinite scroll React component.
• react-virtualized — React components for efficiently rendering large lists and tabular data.
• react-recycled-scrolling — npm — demo — Simulate scrolling using fixed number of DOM elements for large lists with React Hooks

Overlay

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

• boron — A collection of dialog animations with React.js.
• 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-skylight — A react component for modals and dialogs.
• reoverlay — demo — The missing solution for managing modals.
• sweetalert2 — demo/docs — A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript’s popup boxes. Zero dependencies.
• sweetalert2-react-content — Official SweetAlert2 enhancer adding support for React elements as content

Notification

Toaster / snackbar — Notify the user with a modeless temporary little popup

• cogo-toast — demo/docs — Plug and play, Promise support, inbuilt styling, ~3.5K. (No refs / provider needed 😊)
• react-notifications-component — demo — Highly customizable and easy-to-use component for notifications.
• notistack — demo — docs — Highly customizable notification snackbars (toasts) that can be stacked on top of each other
• react-toast — demo — docs — Minimal toast notifications.
• 🚀 react-toastify — demo — best bet out there at the moment. Hooks support. No refs.
• react-toast-notifications — demo — pleasing toast system.
• reapop — A React & Redux notifications system.
• simple-react-notifications — demo — Tiny notification library (1kb gzip).
• react-hot-toast — demo — Smoking 🔥hot🔥 Notifications for React. Lightweight, customizable and beautiful by default.

Tooltip

• react-tooltip — React tooltip component.

Menu

Menus / sidebars

• hamburger-react — demo/docs — Animated hamburger menu icons for React.
• react-burger-menu — An off-canvas sidebar with effects and styles.
• react-offcanvas — Off-canvas menus for React.
• react-planet — demo — Create circular menus which looks like planets.

Sticky

Fixed headers / scroll-up headers / sticky elements

• react-headroom — Hide your header until you need it.
• react-sticky — <Sticky /> component for awesome React apps.
• react-stickynode — A performant and comprehensive React sticky.

Tabs

• react-tabs — React tabs component.
• react-tabtab — React, tabs.

Loader

Loaders/spinners/progress bars — Let the user know that something is loading

• react-block-ui — Easy way to block the user from interacting with your UI.
• react-loader — React component that displays a spinner via spin.js until your component is loaded.
• react-md-spinner — Material Design spinner components for React.js.
• react-progress-button — Simple react.js component for an inline progress indicator.
• react-progress-label — Progress label component.
• react-redux-loading-bar — Simple Loading Bar for Redux and React.
• react-spinkit — A collection of loading indicators animated with CSS for React.
• react-spinners-css — Amazing collection of react spinners components.

Carousel

• @egjs/react-flicking — npm — demo — It’s reliable, flexible and extendable carousel.
• flat-carousel — demo Light weight carousel component for general purpose.
• react-awesome-slider — demo — 3D animated 60fps media and content slider/carousel.
• pure-react-carousel — Built from scratch and not highly opinionated.
• react-id-swiper — A library to use idangerous Swiper as a ReactJs component
• react-instagram-zoom-slider — demo — A slider component with pinch to zoom capabilities inspired by Instagram.
• react-responsive-carousel — React.js Responsive Carousel (with Swipe).
• react-slick — React carousel component.
• keen-slider — demo — Performant carousel/slider with native touch/swipe behaviour.

Buttons

• react-awesome-button — demo — 3D animated 60fps buttons with load progress and social share actions.
• reactive-button — demo — docs — A beautiful animated button component with progress indicator.

Collapse

• react-accessible-accordion — Accessible Accordion component for React.
• react-collapse — Component-wrapper for collapse animation with react-motion.
• react-tabbordion — demo — Universal, semantic and CSS-only components for creating Accordions and Tabs.

Chart

Display data in charts/graphs/diagrams

• chartify — React.js plugin for building animated draggable and customizable charts.
• essential js 2 charts — Beautiful and interactive charts & graphs for react.
• jscharting-react — React chart component offering a complete set of chart types and engaging data visualizations with JSCharting.
• react-chartist — React component for Chartist.js.
• react-charty — demo — Small but powerful interactive data viz with multiple chart types, animations, zooming, theming.
• react-chartjs-2 — Common react charting components using Chart.js 2.0.
• 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.
• 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.
• semiotic — Semiotic is a data visualization framework for React.
• DevExtreme React Chart — High-performance plugin-based chart for Bootstrap and Material Design.
• Smart React Chart — Feature complete Charting library.
• react-muze — React wrapper for muze(free data visualization library for creating exploratory data visualizations in the browser, using WebAssembly)

Tree

Display a tree data structure

• react-treebeard — React Tree View Component. Data-Driven, Fast, Efficient and Customisable.
• react-treeview — Easy, light, flexible tree view made with React.

UI Navigation

Ways to navigate views

• react-scroll — React scroll component.
• react-swipeable-views — A React Component for binded Tabs and Swipeable Views.

Custom Scrollbar

• rc-scrollbars — demo — Customizable scrollbars with flex options and 60FPS
• react-custom-scroll — demo — Easily customize the browser scroll bar with native OS scroll behaviour.
• react-scrollbar — Scrollbar component for React.
• react-shadow-scroll — Component that customizes the image and inserts shadow when scrolling exists.

Audio / Video

• react-dailymotion — Dailymotion player component for React.
• react-player — A react component for playing a variety of URLs, including YouTube.
• react-soundplayer — Create custom SoundCloud players with React.
• react-youtube — React.js powered YouTube player component.
• video-react — A web video player built for the HTML5 world using React library.
• material-ui-audio-player — Audio player for material UI design.

Map

• google-map-react — Universal google map react component, allows render react components on the google map.
• 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.
• react-mapbox-gl — A React binding of Mapbox-gl-js.
• react-svg-map — demo — A set of components to display an interactive SVG map.

Time / Date / Age

Display time / date / age

• react-timeago — A simple time-ago component for ReactJs.
• timeago-react — Format date with *** time ago statement. eg: '3 hours ago'.
• react-google-flight-datepicker — Google flight date picker implemented in ReactJS.

Photo / Image

Display images/photos

• react-compare-image — demo — React component to compare two images using a slider.
• react-image-gallery — Responsive image gallery, carousel, image slider react component.
• react-image-lightbox — React lightbox component.
• react-images — A simple lightbox component for displaying an array of images.
• react-intense — A React component for viewing large images up close.
• react-photo-gallery — Responsive React Photo Gallery.
• react-svg-pan-zoom — A React component that adds pan and zoom features to SVG.
• react-particle-image — demo — Render images as interactive particles.
• react-imgix — Add fast, responsive images as an image, picture, or background!

Icons

Display icons/icon set/emojis

• 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.
• react-open-doodles — Awesome free illustrations as react components.

Paginator

Display a control element to paginate

• react-paginate — A ReactJS component that creates pagination.
• react-laravel-paginex — Laravel Pagination with ReactJS (customizable).

Markdown Viewer

Display parsed markdown source

• react-markdown — Render Markdown as React components.

Canvas

Sketch input using Canvas or SVG

• react-konva — React Konva is a JavaScript library for drawing complex canvas graphics with bindings to the Konva Framework.
• react-sketch — A Sketch tool for React-based applications, backed-up by FabricJS
• react-sketch-canvas — Demo Freehand vector drawing tool for React using SVG as a canvas. Accepts input from Mouse, touch, and graphic tablets

Miscellaneous

• react-advanced-news-ticker — demo — A flexible and animated vertical news ticker component
• react-avatar-generator — Allows users to create random kaleidoscopes to be used as avatars.
• react-awesome-query-builder — demo — Visual query builder from form fields, with SQL, MongoDB and JSON export
• react-blur — React component for blurred backgrounds.
• react-demo-tab — demo — A React component to easily create demos of other components.
• react-facebook — Facebook components like a Login button, Like, Share, Comments, Page or Embedded Post.
• fastcomments-react — demo — FastComments component for embedding a live comment thread on a page or SPA.
• react-pdf-viewer — docs — A React component to view a PDF document.
• react-simple-chatbot — demo — A simple chatbot component to create conversation chats.
• react-file-reader-input — File input component for control for file reading styling and abstraction.
• react-filter-control — The React filter builder component for building the filter criteria in the UI.
• react-joyride — Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!.
• react-json-tree — React JSON Viewer Component, Extracted from redux-devtools.
• react-resizable-and-movable — Resizable and movable component for React.
• react-resizable-box — Resizable component for React. #reactjs.
• react-searchbox-awesome — demo — Minimalistic searchbox.
• react-split-pane — React split-pane component.
• react-swipe-to-delete-ios — demo — To delete an item in a list the same way iOS does.
• typography — A powerful toolkit for building websites with beautiful typography.
• react-pulse-text — demo/docs — Allows you to animate the text of any property of another component.
• captcha-image — Allows you to generate a random captcha image with options.
• react-pdf — Display PDFs in your React app as easily as if they were images.
• react-customizable-chat-bot — Demo — Build your own chatbot matching your brand needs in minutes.
• @restpace/schema-form — Demo — Easily build complex forms automatically from a JSON Schema.

Form Components

Let the user enter data

Date / Time picker

Date picker / time picker / datetime picker / date range picker

• date-range-picker — demo — A calendar component that supports date, range & ranges picks.
• react-big-calendar — Gcal/outlook like calendar component.
• react-date-range — A React component for choosing dates and date ranges.
• react-datepicker — A simple and reusable datepicker component for React.
• react-datepicker2 — demo — docs A simple and reusable datepicker component (with persian jalali calendar support).
• react-datetime — A lightweight but complete datetime picker react component.
• react-day-picker — Flexible date picker for React.
• react-flatpickr — Flatpickr for React.
• react-nice-dates — demo/docs A responsive, touch-friendly, and modular date picker library.
• react-simple-timefield — demo — Simple time input field.
• react-timezone-select — demo — Dynamic, succinct timezone select. Based on react-select.
• react-yearly-calendar — React.js Yearly Calendar Component.
• DevExtreme React Scheduler — High-performance plugin-based scheduler/calendar for Material Design.
• jQWidgets Scheduler — Feature complete Scheduling library.
• react-calendar — Ultimate calendar for your React app.
• react-date-picker — A date picker for your React app.

Emoji picker

• interweave-emoji-picker — A React based emoji picker powered by Interweave and Emojibase.

Input Types

Masked inputs, specialized inputs; email / telephone number / credit card / etc.

• react-credit-cards — Beautiful credit cards for your payment forms.
• react-payment-inputs — demo — A zero-dependency container to help with payment card input fields.
• react-input-mask — demo — Yet another react component for input masking.
• react-maskedinput — Masked <input/> React component.
• react-text-mask — Input mask for React, Angular, and vanilla JavaScript. Flexible, robust & tiny.
• react-numpad — demo — Extensible number pad control for numbers, dates and times.

Autocomplete

Autosuggest / autocomplete / typeahead

• react-autosuggest — WAI-ARIA compliant React autosuggest component.
• react-typeahead — Pure react-based typeahead and typeahead-tokenizer.

Select

• react-aria-menubutton — A fully accessible, easily themeable, React-powered menu button.
• react-functional-select — demo — Micro-sized & micro-optimized select component for React.js.
• react-select-box — An accessible select box component for React.
• react-select — A Select control built with and for React JS.

Color Picker

• coloreact — A tiny Color Picker for React.
• react-color — Color Pickers from Sketch, Photoshop, Chrome & more.
• react-input-color — React input color component with hsv color picker.

Toggle

• react-ios-switch — React switch component.
• react-toggle — An elegant, accessible toggle component for React. Also a glorified checkbox.
• react-triple-toggle — ⚛️ React multi toggle component.

Slider

• react-slider — Slider component for React.

Radio Button

• react-radio-group — Better radio buttons.

Type Select

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

• react-autocomplete-input — Autocomplete input field for React.
• react-mentions — Mention people in a textarea.

Tag Input

Let the user add multiple tags in a single input

• @pathofdev/react-tag-input — demo & docs — Minimal tagging component with editable tags
• react-tag-input — A fantastically simple tagging component for your React projects.
• react-tagsinput — A simple react component for inputing tags.
• react-tokeninput — Tokeninput component for React.

Autosize Input / Textarea

• react-input-autosize — Auto-resizing input field for React.
• react-textarea-autosize — <textarea /> component for React which grows with content.

Star Rating

• react-awesome-stars-rating — demo — The star rating component with accessibility.
• react-star-rating-input — React.js component for entering 0–5 (or more) stars.
• react-star-rating — A simple star rating component built with React.

Drag and Drop

• react-beautiful-dnd — Beautiful and accessible drag and drop for lists with React
• react-dnd — Drag and Drop for React.
• react-drag-sizing — “Drag to resize” (sizing) as React Component.
• react-draggable — React draggable component.
• react-dragula — Drag and drop so simple it hurts.
• react-dropzone — Simple HTML5 drag-drop zone with React.js.
• react-movable — Accessible and minimalistic (<4kB gzipped) library for vertical drag and drop in lists and tables.
• react-sortable-pane — Sortable and resizable pane component for React.

Sortable List

Let the user define an order on a list

• react-anything-sortable — Sort any children with touch support and IE8 compatibility.
• react-sortable — A sortable list component built with React.
• sortablejs — Lists reorderable by drag-and-drop, within and among lists.

Rich Text Editor

• alloyeditor — WYSIWYG editor based on CKEditor with completely rewritten UI.
• ckeditor4-react — An official CKEditor 4 rich text editor wrapper.
• ckeditor5-react — An official CKEditor 5 rich text editor wrapper.
• draft-js — A React framework for building text editors.
• megadraft — Rich Text editor built on top of draft.js.
• react-ace — Ace (Advanced Code Editor) wraper.
• react-codemirror — CodeMirror wrapper.
• react-contenteditable — React component for a div with editable contents.
• react-draft-wysiwyg — WYSIWYG editor build on top of DraftJS.
• react-editor — Simple richtext editor that can insert images and HTML.
• react-medium-editor — medium-editor wrapper.
• react-quill — Quill wrapper.
• react-trumbowyg — Trumbowyg wrapper.

Markdown Editor

• react-markdown-editor — A markdown editor using React/Reflux.
• react-md-editor — Markdown editor.

Image Editing

Image manipulation

• react-avatar-cropper — Aiming to be a complete solution for avatar cropping in react.
• react-avatar-editor — Facebook-like, avatar / profile picture component.
• react-easy-crop — Component to crop/rotate images/videos with easy interactions. Touch friendly.
• react-image-crop — A responsive image cropping tool for React.
• react-image-cropper — Image cropper.

Form Component Collections

• formsy-material-ui — A Formsy compatibility wrapper for Material-UI form components.
• formsy-react-components — A set of React JS components for use in a formsy-react form.
• react-input-enhancements — Set of enhancements for input control.
• react-widgets — An à la carte set of polished, extensible, and accessible inputs.

Miscellaneous

• interweave — React library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more.
• react-designer — Easy to configure, lightweight, editable vector graphics in your react components.
• react-upload-gallery — React for Upload Image Gallery. Drag & Drop, Sortable, Customize.

Syntax Highlight

• react-syntax-highlighter — Syntax highlighting component with Prismjs or Highlightjs AST using inline styles.

UI Layout

Components to layout the app’s UI

• autoresponsive-react — Auto responsive grid layout library.
• flexbox-react Unopinionated, standard compliant flexbox components.
• golden-layout — A multi-screen JavaScript Layout manager.
• hedron — A no-frills flexbox grid system, powered by styled-components.
• m-react-splitters — Splitter component, written in TypeScript.
• muuri-react — demo — docs — Responsive, sortable, filterable and draggable grid layouts.
• react-grid-layout — A draggable and resizable grid layout with responsive breakpoints, for React.
• react-masonry-component — Wrapper for @desandro’s Masonry.
• react-reflex — Flex layout container component for advanced React web applications.
• react-spaces — demo/docs — Nestable anchored, resizable, scrollable components.
• react-stonecutter — Animated grid layout component.
• react-colrow — Responsive grid layout components. Based on css flexbox. Support fraction width, auto grow.

UI Animation

Animate transitions

• react-tweenful — demo — Animation engine that lets you animate DOM nodes, mounting, unmounting, child changes/transitions.
• data-driven-motion — Easily animate your data.
• react-anime — A super easy animation library.
• 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 wrapper.
• react-tsparticles — A lightweight component to easily create interactive particles animations
• react-motion — A spring that solves your animation problems.
• react-mt-svg-lines — Wrapper to animate the line stroke in SVGs.
• react-router-transition — Transitions built for react-router, powered by react-motion.
• react-spring — A spring physics based animation library.
• framer-motion — An animation and gesture library.
• react-spark-scroll — Scroll-based actions and animations for react.
• react-track — Track the position of DOM elements. Create cool animations.
• react-transitive-number — Apply transition effect to numeric strings, a la old Groupon timers.
• react-web-animation — React components for the Web Animations API -.
• velocity-react — Velocity.js wrapper.
• auto-size-transition — A component that scale dynamically according to the internal children size
• react-particles-bg — Particles backgrounds.
• gooey-react — demo/docs — The gooey effect for React, used for shape blobbing / metaballs.

Parallax

• react-parallax-component — Easiest way to add scroll parallax effect on the component.
• react-parallax-tilt — demo — Easily apply parallax tilt hover effect on components.

UI Frameworks

Responsive

Set of components + responsive layout system

• zeit-ui-react — Modern and minimalist React UI library.
• 🚀 ant-design — demo/docs — A UI Design Language from China. Individual components available.
• atlaskit — Atlassian’s official UI library, with components from badge to tree table.
• base web — Base Web is a foundation for initiating, evolving, and unifying web products.
• belle — Configurable React Components with great UX.
• carbon — demo/docs — A design system built by IBM.
• chakra-ui — demo/docs — Simple, Modular & Accessible UI Components for your React Applications.
• evergreen — demo/docs — Evergreen React UI Framework by Segment.
• fluent-ui — demo/docs — 🌈 React components that inspired by Microsoft’s Fluent Design System.
• grommet — The most advanced UX framework for enterprise applications.
• gestalt — demo/docs — A set of components that supports Pinterest’s design language.
• insites-ui — Modern, opinionated, minimal, yet powerful React components library, powered by Styled Components.
• office-ui-fabric-react — React components for building Microsoft web experiences.
• orbit-components — Components for building travel oriented projects.
• pivotal-ui-react — React components based on a custom version of the Bootstrap library.
• primereact — A complete UI Framework with 50+ components featuring material, bootstrap and custom themes.
• react-bootstrap — Bootstrap components built with React.
• react-foundation — Foundation as React components.
• reakit — demo/docs Toolkit for building accessible rich web apps
• rebass — Configurable React Stateless Functional UI Components.
• searchkit — React UI components / widgets. The easiest way to build a great search experience with Elasticsearch.
• semantic-ui-react — The official Semantic-UI-React integration.
• shineout — demo — Chinese-friendly set of components: form elements, navigation, table, tree, tree select drop-down etc.

Material Design

• 🚀 Material-UI — Full suite of components. Build your own design system, or start with Material Design.
• Autocomplete — Accessible autocomplete, combobox, multiselect
• Icons — 1,000+ SVG material icons.
• Modal — Accessible modal dialog component.
• Slider — Accessible slider component.
• Table — table with sorting, selecting, pagination, virtualized.
• Tree View — Accessible tree view component for React.
• react-essence — Essence — The Essential Material Design Framework.
• react-materialize — Material design for react, powered by materializecss.
• react-toolbox — A set of React components implementing Google’s Material Design.
• mdbootstrap — React Bootstrap with Material Design

Mobile

• antd-mobile — Configurable Mobile UI from China.
• Ionic React — Ionic Framework: easily build Android, Desktop and Progressive Web Apps with one code base.
• OnsenUI — demo/docs — Mobile app framework with Material and flat (iOS) designs. Based on Web Components.

Component Collections

• blueprint — demo — docs — UI toolkit for building complex, data-dense web interfaces for desktop (not mobile) applications.
• dataminr-react-components — Collection of reusable React Components and utility functions.
• shards-react — docs/demo — A beautiful and modern React design system. Freemium 💰
• aframe-react — Build virtual reality experiences with A-Frame and React.
• react-admin — Build admin user experiences on top of REST and GraphQL services.
• react-desktop — React UI Components for macOS Sierra and Windows 10.
• matrix-card — demo — Simplest possible component to generate matrix rain style cards.
• rsuite — demo/docs — Suite of components for “enterprise system products”.

UI Utilities

Reporter

Report computed styles

Visibility Reporter

Report when a component becomes visible/hidden

• react-visibility-sensor — Sensor component.
• react-waypoint — A React component to execute a function whenever you scroll to an element.

Measurement Reporter

Determine and report measurements of an element

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

Device Input

Turn user input into actions

Keyboard Events

• react-hotkeys — Declarative hotkey and focus area management for React.
• react-key-handler — React component to handle keyboard events.
• react-keydown — Lightweight keydown wrapper for React components.
• react-shortcuts — Manage keyboard shortcuts from one place.
• useKeyCapture — A custom hook to ease the key-press listeners of a target/global.

Scroll Events

• react-scroll-components — A set of components that react to page scrolling.

Touch Swipe

• react-swipe — Swipe.js as a React component.

Mouse Events

• react-aim — Determine the cursor aim for triggering mouse events.
• react-hook-mighty-mouse — demo — Hook that tracks mouse events on selected element.

Meta Tags

Set meta tags, <title>, children of

• react-document-meta — HTML meta tags for React-based apps.
• react-document-title — Declarative, nested, stateful, isomorphic document.title for React.
• react-helmet — A document head manager for React.

Portal

Render an element at an arbitrary DOM node

• react-gateway — Render React DOM into a new context (aka “Portal”).
• react-layer-stack — Simple but ubiquitously powerful and agnostic layering system for React.
• react-portal — React component for transportation of modals, lightboxes, loading bars… to document.body.

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

• alt — Isomorphic flux implementation.
• baobab-react — React integration for Baobab.
• cerebral — A state controller with its own debugger.
• effector-react — React bindings for effector, an effective multi-store state manager.
• fluorine-lib — Reactive state and side effect management for React using a single stream of actions.
• fluxible — A pluggable container for universal flux applications.
• fluxxor — Flux architecture tools for React.
• kea — High level architecture for React apps.
• mobx-react — React bindings for MobX. Create fully reactive components.
• react-3ducks — demo — Simple state management solution for React.
• react-controllables — Easily create controllable components.
• react-i13n — A performant, scalable and pluggable approach to instrumenting your React application.
• react-redux-provide — Bridges the gap between Redux and the declarative nature of GraphQL/Relay.
• react-redux — Official React bindings for Redux.
• react-storage-hoc — demo — Higher-order components for working with localStorage and sessionStorage.
• 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 — Predictable state container for JavaScript apps.
• reflux — A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux.
• reselect — Selector library for Redux.
• resourcerer — Declarative data-fetching framework for REST APIs
• shasta — Dead simple + opinionated toolkit for building redux/react applications.

Form Logic

• data-driven-forms — A declarative way for building forms with all the functionality.
• formcat — A simple and easy way to control forms in React using the React Context API
• formik — Build forms without tears and supports Validation in ease.
• formsy-react — A form input builder and validator for React JS.
• plexus-form — A dynamic form component for react using JSON-Schema.
• react-hook-form — React hooks for form validation without the hassle.
• react-jsonschema-form — A React component for building Web forms from JSONSchema.
• react-validation-mixin — Simple validation mixin (HoC) for React.
• react-final-form — Subscription-based form state management
• react-formawesome — Complex library for creating awesome forms.
• surveyjs — The advanced Survey and Form library

Router

• cerebral-module-router — An opinionated URL change handler for Cerebral.
• monorouter — An isomorphic JS router.
• react-breadcrumbs — Automatic breadcrumbs for React-Router.
• react-router-component — Declarative router component for React.
• react-router-scroll — React Router scroll management.
• react-router — A complete routing library for React.
• redux-router — Redux bindings for React Router — keep your router state inside your Redux store.
• universal-router — A simple middleware-style router for isomorphic JavaScript web apps.
• redux-first-history — Redux First History — Redux history binding support react-router — @reach/router — wouter

Props from server

Component properties asynchronously fetched over the network

• 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-async-connect — Request async data, store in redux state, and connect to your component.
• redux-connect — Provides decorator for resolving async props in react-router.
• axios-react — HTTP client component for React.

Communication with server

• adrenaline — Simple Relay alternative.
• apollo-client — A simple caching client for any GraphQL server and UI framework.
• cerebral-module-http — HTTP module for Cerebral.
• react-apollo — React data container for the Apollo Client.
• react-relay — Relay is a JavaScript framework for building data-driven React applications.
• react-transmit — Relay-inspired library based on Promises instead of GraphQL.

CSS / Style

• aesthetic — A powerful type-safe, framework agnostic, CSS-in-JS library for styling components, whether it be plain objects, importing stylesheets, or simply referencing external class names.
• aphrodite — It’s inline styles, but they work!.
• classnames — A simple javascript utility for conditionally joining classNames together.
• inline-style-prefixer — Run-time Autoprefixer for Inline Style Objects.
• paperclip — docs — Build UI primitivites with plain HTML & CSS.
• radium — A set of tools to manage inline styles on React elements.
• react-container-query — Modular responsive component.
• react-css-modules — Seamless mapping of class names to CSS modules inside of React components.
• react-responsive — Media queries in react for responsive design.
• reactponsive — Responsive components and hooks.
• styled-components — Visual primitives for the component age.

HTML Template

• hyperx — Tagged template string virtual dom builder.
• jsx-control-statements — Neater If and For for React JSX.

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

Boilerplate

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

• create-react-app — Create React apps with no build configuration.
• crisp-react — Express integration in TypeScript with support for multiple SPAs and pitfall avoidance.
• electron-react-boilerplate — Live editing development on desktop app.
• 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-boilerplate — Quick packager-agnostic boilerplate for React modules using JSX.
• react-hot-boilerplate — Minimal live-editing boilerplate for your next ReactJS project.
• 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.
• create-react-dependency — Create react dependencies with no build configuration.
• phoenix — A simple boilerplate that helps you make your react application with Server Side Rendering & Localization support.
• react-enterprise-starter-kit — Highly Scalable and Performant Awesome React Starter Kit for an enterprise application with a very easy maintainable codebase.
• express-react-boilerplate — A tool that helps programmers create Express & React projects easily base on react-cool-starter.

Miscellaneous

• react-inlinesvg — An SVG loader component for ReactJS.
• redux-auth-patch — Complete token authentication system for react + redux that supports isomorphic rendering.
• redux-search — Redux bindings for client-side search.
• tcomb-react — Alternative syntax for PropTypes.
• react-find — ⚛️ Elegant, accessible search component for React.
• react-universal-hooks — 🎉 support react hooks everywhere (Functional or Class Component).

Utilities

• qrcode.react — A <QRCode/> component for use with React.
• react-children-utilities — Extended utils for React.Children.
• react-media — A CSS media query component for React.
• react-middle-ellipsis — demo — Truncate long strings in the middle instead of the end.
• react-translate-component — Multi-lingual/localized text content.

i18n

Internationalization / L10n / localization / translation

• react-i18next — Internationalization for react done right. Using the i18next i18n ecosystem.
• react-intl — Internationalize React apps.
• react-translate-maker — Universal internationalization (i18n) open source library for React.
• react-intl-universal — demo Internationalize React apps. Not only for React.Component but also for Vanilla JS.
• js-lingui — docs — A readable, automated, and optimized (5 kb) internationalization for JavaScript.

Framework bindings / integrations

• backbone-react-component — A bit of nifty glue that automatically plugs your Backbone models.
• elm-react-component — A React component which wraps an Elm module to be used in a React application.
• gl-react — OpenGL / WebGL bindings for React to implement complex effects over images and content.
• react-backbone — Backbone-aware mixins for react and a whole lot more.
• react-d3-library — Open source library for using D3 in React.
• react-elm-components — Write React components in Elm.
• react-famous — React bridge to Famo.us.
• react-localstorage — Simple componentized localstorage implementation for Facebook’s React.
• react-lottie-player — demo — Declarative lottie animation player.
• react-on-rails — Integration of React + Webpack + Rails to build Universal (Isomorphic) Apps.
• react-three-renderer — Render into a three.js canvas using React.
• react-threejs — Simplest bindings between React & Three.js
• reactfire — ReactJS mixin for easy Firebase integration.
• reactive-elements — Allows to use React.js component as HTML element (web component).

Integrations with Third Party Services

• react-ga — React Google Analytics Module.
• react-google-analytics — Google analytics component.
• react-recaptcha — A react.js reCAPTCHA for Google.
• react-stripe-checkout — Load stripe’s checkout.js as a react component. Easiest way to use checkout with React.
• redux-segment — Segment.io analytics integration for redux.

Performance

UI

• inferno — An extremely fast, React-like JavaScript library for building modern user interfaces.
• react-fastclick — Fast Touch Events for React.
• react-static-container — Renders static content efficiently.

Inspect

• react-perf-tool — Debug performance of your React application.
• react-render-visualizer — Render visualizer for ReactJS.

Lazy Load

• react-infinite-grid — A React component which renders a grid of elements.
• react-infinite — A browser-ready efficient scrolling container based on UITableView.
• 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-virtualized — React components for efficiently rendering large lists and tabular data.

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

Dev Tools

Test

• carte-blanche — An isolated development space with integrated fuzz testing for your components.
• chai-enzyme — Chai.js assertions and convenience functions for testing React Components with enzyme.
• enzyme — JavaScript Testing utilities for React.
• jest-cli — Painless JavaScript Testing.
• react-unit — Lightweight unit test library for ReactJS.
• redux-ava — Write AVA tests for redux pretty quickly.
• redux-test-recorder — A redux middleware to automatically generate tests for reducers through ui interaction.
• rut — React testing made easy with react-test-renderer. Supports DOM and custom renderers.
• 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

• redux-devtools-chart-monitor — A chart monitor for Redux DevTools.
• 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.
• redux-devtools — DevTools for Redux with hot reloading, action replay, and customizable UI.
• remote-redux-devtools — Redux DevTools remotely.

Inspect

• fluxguard — PROD change monitoring that highlights all DOM + design changes.
• react-inspector — Power of Browser DevTools inspectors right inside your React app.
• react-json-inspector — React JSON inspector component.
• reactotron — A CLI and OS X app for inspecting your React JS and React Native apps.

Miscellaneous

• component-controls — demo — docs — A next-generation tool to create blazing-fast documentation sites.
• cosmos-js — DX tool for designing truly encapsulated React components.
• react-demo-tab-cli — CLI tool for creating demos of react components.
• react-heatpack — A ‘heatpack’ command for quick React development with webpack hot reloading.
• react-styleguidist — React style guide generator.
• standard-react — JavaScript Standard Style Guide.

Miscellaneous

• DataFormsJS JSX Loader — Small JavaScript Compiler for quickly converting JSX to JS directly on a web page.
• 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.

Cloud Solutions

Databases

• crisp-bigquery — Full stack Google BigQuery with Express in TypeScript.
• react-server-routing-example — Universal client/server routing and data with AWS DynamoDB.

Enjoy :)