Absolutely Awesome React Components & Libraries

🚀 Absolutely Awesome React Components & Libraries

This is a list of AWESOME components. Nope, it’s NOT a comprehensive list of every React component under the sun. So, what does “awesome” mean? Well:

It solves a real problem
It does so in a 🦄 unique, 🦋 beautiful, or 🏆 exceptional way. (And it’s not super popular and well-known… no point in listing those.)
It has recent code commits!

Look for a 🚀 for truly amazing projects. And look for quickie maintainer commentary and reviews in (italic parens) after some listings of note.

Maintainers:

@petebray, author of Fluxguard — monitor PROD website changes.
@brillout, author of Wildcard API — create an RPC-like API as an alternative to REST and GraphQL.

Contributing

Please review our contributing guidelines. We keep this list fresh by requiring all PRs to remove one or more non-awesome entries from this list. Please ONLY PR a new resource if you are ALSO removing one.

UI Components
UI Layout
UI Animation
- Parallax
UI Frameworks
UI Utilities
Code Design
Utilities
Performance
Dev Tools
- Test
- Redux
- Inspect
- Miscellaneous
Miscellaneous
- Static Website Generator
Cloud Solutions
- Databases

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.
af-virtual-scroll - demo - docs - Render large scrollable lists and tables.
react-window - demo - React components for efficiently rendering large lists and tabular data

Overlay

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

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

Sticky

Fixed headers / scroll-up headers / sticky elements

react-headroom - Hide your header until you need it.
react-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-progress-label - Progress label component.
react-redux-loading-bar - Simple Loading Bar for Redux and React.
react-spinners-css - Amazing collection of react spinners components.
react-spinners - A collection of loading spinner components for react.
react-content-loader - SVG-Powered component to easily create placeholder loadings (like Facebook’s cards loading).

Carousel

@egjs/react-flicking - npm - demo - It’s reliable, flexible and extendable carousel.
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 behavior.
react-image-magnify - demo - Responsive React image carousel zoom component for touch and mouse. Designed for shopping site product detail

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 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 behavior.
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.
pigeon-maps - demo - ReactJS Maps without external dependencies.
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

lightGallery - demo - docs - Full-featured lightbox gallery component.
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-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 a pagination.
react-laravel-paginex - Laravel Pagination with ReactJS (customizable).
paginated - React render props & custom hook to build pagination.

Markdown Viewer

Display parsed markdow 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 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 filterbuilder component for building the filter criteria in the UI.
react-headings - Auto-increment your HTML headings (h1, h2, etc.) for improved accessibility and SEO, no matter your component structure, while you keep full control of what’s rendered.
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.
react-swipeable-list - demo - Configurable component to render list with swipeable items.
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.
react-darkreader - 🌓 A React Hook for adding a dark / night mode to your site inspired by darkreader.
react-apple-signin-auth -  Apple signin for React using the official Apple JS SDK.

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 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.
react-column-select - A column select component built for react.

Color Picker

coloreact - A tiny Color Picker for React.
react-color - Color Pickers from Sketch, Photoshop, Chrome & more.
react-colorful - A tiny (2,5 KB), dependency-free, fast and accessible color picker component.
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-autowidth-input - Highly configurable & extensible automatically sized input field built with hooks.
react-textarea-autosize - component for React which grows with content.</li> </ul> <h5>Star Rating</h5> <ul> <li><a href="https://github.com/fedoryakubovich/react-awesome-stars-rating">react-awesome-stars-rating</a> - <a href="https://react-awesome-stars-rating.herokuapp.com/">demo</a> - The star rating component with accessibility.</li> <li><a href="https://github.com/ikr/react-star-rating-input">react-star-rating-input</a> - React.js component for entering 0-5 (or more) stars.</li> <li><a href="https://github.com/cameronroe/react-star-rating">react-star-rating</a> - A simple star rating component built with React.</li> </ul> <h5>Drag and Drop</h5> <ul> <li><a href="https://github.com/atlassian/react-beautiful-dnd">react-beautiful-dnd</a> - Beautiful and accessible drag and drop for lists with React</li> <li><a href="https://github.com/gaearon/react-dnd">react-dnd</a> - Drag and Drop for React.</li> <li><a href="https://github.com/fritx/react-drag-sizing">react-drag-sizing</a> - “Drag to resize” (sizing) as React Component.</li> <li><a href="https://github.com/mzabriskie/react-draggable">react-draggable</a> - React draggable component.</li> <li><a href="https://github.com/bevacqua/react-dragula">react-dragula</a> - Drag and drop so simple it hurts.</li> <li><a href="https://github.com/okonet/react-dropzone">react-dropzone</a> - Simple HTML5 drag-drop zone with React.js.</li> <li><a href="https://github.com/tajo/react-movable">react-movable</a> - Accessible and minimalistic (<4kB gzipped) library for vertical drag and drop in lists and tables.</li> <li><a href="https://github.com/bokuweb/react-sortable-pane">react-sortable-pane</a> - Sortable and resizable pane component for React.</li> </ul> <h5>Sortable List</h5> <p><em>Let the user define an order on a list</em></p> <ul> <li><a href="https://github.com/jasonslyvia/react-anything-sortable">react-anything-sortable</a> - Sort any children with touch support and IE8 compatibility.</li> <li><a href="https://github.com/danielstocks/react-sortable">react-sortable</a> - A sortable list component built with React.</li> <li><a href="https://github.com/SortableJS/Sortable">sortablejs</a> - Lists reorderable by drag-and-drop, within and among lists.</li> </ul> <h5>Rich Text Editor</h5> <ul> <li><a href="https://github.com/liferay/alloy-editor">alloyeditor</a> - WYSIWYG editor based on CKEditor with completely rewritten UI.</li> <li><a href="https://github.com/ckeditor/ckeditor4-react">ckeditor4-react</a> - An official CKEditor 4 rich text editor wrapper.</li> <li><a href="https://github.com/ckeditor/ckeditor5-react">ckeditor5-react</a> - An official CKEditor 5 rich text editor wrapper.</li> <li><a href="https://github.com/facebook/draft-js">draft-js</a> - A React framework for building text editors.</li> <li><a href="https://github.com/edtr-io/edtr-io">edtr-io</a> - <a href="https://edtr.io/">demo</a> - <a href="https://edtr.io/docs/getting-started">docs</a> - WYSIWYG in-line web editor with plugins.</li> <li><a href="https://github.com/globocom/megadraft">megadraft</a> - Rich Text editor built on top of draft.js.</li> <li><a href="https://github.com/securingsincity/react-ace">react-ace</a> - Ace (Advanced Code Editor) wraper.</li> <li><a href="https://github.com/JedWatson/react-codemirror">react-codemirror</a> - CodeMirror wrapper.</li> <li><a href="https://github.com/lovasoa/react-contenteditable">react-contenteditable</a> - React component for a div with editable contents.</li> <li><a href="https://github.com/jpuri/react-draft-wysiwyg">react-draft-wysiwyg</a> - WYSIWYG editor build on top of <a href="https://draftjs.org/">DraftJS</a>.</li> <li><a href="https://github.com/fritx/react-editor">react-editor</a> - Simple richtext editor that can insert images and HTML.</li> <li><a href="https://github.com/wangzuo/react-medium-editor">react-medium-editor</a> - medium-editor wrapper.</li> <li><a href="https://github.com/zenoamaro/react-quill">react-quill</a> - Quill wrapper.</li> <li><a href="https://github.com/RD17/react-trumbowyg">react-trumbowyg</a> - <a href="https://alex-d.github.io/Trumbowyg/">Trumbowyg</a> wrapper.</li> <li><a href="https://github.com/remirror/remirror">remirror</a> - <a href="https://remirror.io/playground">demo</a> - <a href="https://remirror.io/docs">docs</a> - ProseMirror toolkit for React.</li> <li><a href="https://github.com/ianstormtaylor/slate">slate</a> - <a href="http://slatejs.org/">demo</a> - <a href="https://docs.slatejs.org/">docs</a> - A completely customizable framework for building rich text editors.</li> <li><a href="https://github.com/appleple/smartblock">smartblock</a> - <a href="https://appleple.github.io/smartblock/">demo</a> - <a href="https://appleple.github.io/smartblock/get-started">docs</a> - Block based WYSIWYG editor based on ProseMirror.</li> </ul> <h5>Markdown Editor</h5> <ul> <li><a href="https://github.com/jrm2k6/react-markdown-editor">react-markdown-editor</a> - A markdown editor using React/Reflux.</li> <li><a href="https://github.com/JedWatson/react-md-editor">react-md-editor</a> - Markdown editor.</li> </ul> <h5>Image Editing</h5> <p><em>Image manipulation</em></p> <ul> <li><a href="https://github.com/DropsOfSerenity/react-avatar-cropper">react-avatar-cropper</a> - Aiming to be a complete solution for avatar cropping in react.</li> <li><a href="https://github.com/mosch/react-avatar-editor">react-avatar-editor</a> - Facebook-like, avatar / profile picture component.</li> <li><a href="https://github.com/ricardo-ch/react-easy-crop">react-easy-crop</a> - Component to crop/rotate images/videos with easy interactions. Touch friendly.</li> <li><a href="https://github.com/DominicTobias/react-image-crop">react-image-crop</a> - A responsive image cropping tool for React.</li> <li><a href="https://github.com/jerryshew/react-image-cropper">react-image-cropper</a> - Image cropper.</li> </ul> <h5>Form Component Collections</h5> <ul> <li><a href="https://github.com/mbrookes/formsy-material-ui">formsy-material-ui</a> - A Formsy compatibility wrapper for Material-UI form components.</li> <li><a href="https://github.com/twisty/formsy-react-components">formsy-react-components</a> - A set of React JS components for use in a formsy-react form.</li> <li><a href="https://github.com/alexkuz/react-input-enhancements">react-input-enhancements</a> - Set of enhancements for input control.</li> <li><a href="https://github.com/jquense/react-widgets">react-widgets</a> - An à la carte set of polished, extensible, and accessible inputs.</li> </ul> <h5>Miscellaneous</h5> <ul> <li><a href="https://github.com/milesj/interweave">interweave</a> - React library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more.</li> <li><a href="https://github.com/fatiherikli/react-designer">react-designer</a> - Easy to configure, lightweight, editable vector graphics in your react components.</li> <li><a href="https://github.com/TPMinan/react-upload-gallery">react-upload-gallery</a> - React for Upload Image Gallery. Drag & Drop, Sortable, Customize.</li> </ul> <h5>Syntax Highlight</h5> <ul> <li><a href="https://github.com/conorhastings/react-syntax-highlighter">react-syntax-highlighter</a> - Syntax highlighting component with Prismjs or Highlightjs AST using inline styles.</li> </ul> <h3>UI Layout</h3> <p><em>Components to layout the app’s UI</em></p> <ul> <li><a href="https://github.com/xudafeng/autoresponsive-react">autoresponsive-react</a> - Auto responsive grid layout library.</li> <li><a href="https://github.com/nachoaIvarez/flexbox-react">flexbox-react</a> Unopinionated, standard compliant flexbox components.</li> <li><a href="https://github.com/deepstreamIO/golden-layout">golden-layout</a> - A multi-screen JavaScript Layout manager.</li> <li><a href="https://github.com/JSBros/hedron">hedron</a> - A no-frills flexbox grid system, powered by styled-components.</li> <li><a href="https://github.com/martinnov92/React-Splitters">m-react-splitters</a> - Splitter component, written in TypeScript.</li> <li><a href="https://github.com/Paol-imi/muuri-react">muuri-react</a> - <a href="https://1czo5.csb.app/">demo</a> - <a href="https://paol-imi.github.io/muuri-react">docs</a> - Responsive, sortable, filterable and draggable grid layouts.</li> <li><a href="https://github.com/STRML/react-grid-layout">react-grid-layout</a> - A draggable and resizable grid layout with responsive breakpoints, for React.</li> <li><a href="https://github.com/eiriklv/react-masonry-component">react-masonry-component</a> - Wrapper for @desandro’s Masonry.</li> <li><a href="https://github.com/leefsmp/Re-Flex">react-reflex</a> - Flex layout container component for advanced React web applications.</li> <li><a href="https://github.com/aeagle/react-spaces">react-spaces</a> - <a href="https://www.allaneagle.com/react-spaces/demo/">demo/docs</a> - Nestable anchored, resizable, scrollable components.</li> <li><a href="https://github.com/dantrain/react-stonecutter">react-stonecutter</a> - Animated grid layout component.</li> <li><a href="https://github.com/phphe/react-colrow">react-colrow</a> - Responsive grid layout components. Based on css flexbox. Support fraction width, auto grow.</li> </ul> <h3>UI Animation</h3> <p><em>Animate transitions</em></p> <ul> <li><a href="https://github.com/teodosii/react-tweenful">react-tweenful</a> - <a href="https://teodosii.github.io/react-tweenful/">demo</a> - Animation engine that lets you animate DOM nodes, mounting, unmounting, child changes/transitions.</li> <li><a href="https://github.com/tkh44/data-driven-motion">data-driven-motion</a> - Easily animate your data.</li> <li><a href="https://github.com/stelatech/react-anime">react-anime</a> - A super easy animation library.</li> <li><a href="https://github.com/joshwcomeau/react-flip-move">react-flip-move</a> - Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.</li> <li><a href="https://github.com/azazdeaz/react-gsap-enhancer">react-gsap-enhancer</a> - Use the full power of React and GSAP together.</li> <li><a href="https://github.com/ryanflorence/react-magic-move">react-magic-move</a> - MagicMove wrapper.</li> <li><a href="https://github.com/matteobruni/tsparticles/blob/master/components/react/README.md">react-tsparticles</a> - A lightweight component to easily create interactive particles animations</li> <li><a href="https://github.com/chenglou/react-motion">react-motion</a> - A spring that solves your animation problems.</li> <li><a href="https://github.com/moarwick/react-mt-svg-lines">react-mt-svg-lines</a> - Wrapper to animate the line stroke in SVGs.</li> <li><a href="https://github.com/maisano/react-router-transition">react-router-transition</a> - Transitions built for react-router, powered by react-motion.</li> <li><a href="https://github.com/react-spring/react-spring">react-spring</a> - A spring physics based animation library.</li> <li><a href="https://github.com/framer/motion">framer-motion</a> - An animation and gesture library.</li> <li><a href="https://github.com/gilbox/react-spark-scroll">react-spark-scroll</a> - Scroll-based actions and animations for react.</li> <li><a href="https://github.com/gilbox/react-track">react-track</a> - Track the position of DOM elements. Create cool animations.</li> <li><a href="https://github.com/Lapple/react-transitive-number">react-transitive-number</a> - Apply transition effect to numeric strings, a la old Groupon timers.</li> <li><a href="https://github.com/bringking/react-web-animation">react-web-animation</a> - React components for the Web Animations API -.</li> <li><a href="https://github.com/twitter-fabric/velocity-react">velocity-react</a> - Velocity.js wrapper.</li> <li><a href="https://github.com/DualWield/auto-size-transition">auto-size-transition</a> - A component that scale dynamically according to the internal children size</li> <li><a href="https://github.com/lindelof/particles-bg">react-particles-bg</a> - Particles backgrounds.</li> <li><a href="https://github.com/luukdv/gooey-react">gooey-react</a> - <a href="https://gooey-react.netlify.app/">demo/docs</a> - The gooey effect for React, used for shape blobbing / metaballs.</li> </ul> <h4>Parallax</h4> <ul> <li><a href="https://github.com/keske/react-parallax-component">react-parallax-component</a> - Easiest way to add scroll parallax effect on the component.</li> <li><a href="https://github.com/mkosir/react-parallax-tilt">react-parallax-tilt</a> - <a href="https://mkosir.github.io/react-parallax-tilt">demo</a> - Easily apply parallax tilt hover effect on components.</li> </ul> <h3>UI Frameworks</h3> <h4>Responsive</h4> <p><em>Set of components + responsive layout system</em></p> <ul> <li><a href="https://github.com/zeit-ui/react">zeit-ui-react</a> - Modern and minimalist React UI library.</li> <li>🚀 <a href="https://github.com/ant-design/ant-design">ant-design</a> - <a href="https://ant.design/docs/react/introduce">demo/docs</a> - A UI Design Language from China. Individual <a href="http://react-component.github.io/">components</a> available.</li> <li><a href="https://atlaskit.atlassian.com/packages">atlaskit</a> - Atlassian’s official UI library, with components from <em>badge</em> to <em>tree table</em>.</li> <li><a href="https://baseweb.design">base web</a> - Base Web is a foundation for initiating, evolving, and unifying web products.</li> <li><a href="https://github.com/nikgraf/belle">belle</a> - Configurable React Components with great UX.</li> <li><a href="https://github.com/carbon-design-system/carbon">carbon</a> - <a href="https://www.carbondesignsystem.com/">demo/docs</a> - A design system built by IBM.</li> <li><a href="https://github.com/chakra-ui/chakra-ui">chakra-ui</a> - <a href="https://chakra-ui.com">demo/docs</a> - Simple, Modular & Accessible UI Components for your React Applications.</li> <li><a href="https://github.com/segmentio/evergreen">evergreen</a> - <a href="https://evergreen.segment.com">demo/docs</a> - Evergreen React UI Framework by Segment.</li> <li><a href="https://github.com/fluent-org/fluent-ui">fluent-ui</a> - <a href="https://fluent-ui.com/">demo/docs</a> - 🌈 React components that inspired by Microsoft’s Fluent Design System.</li> <li><a href="https://github.com/grommet/grommet">grommet</a> - The most advanced UX framework for enterprise applications.</li> <li><a href="https://github.com/pinterest/gestalt">gestalt</a> - <a href="https://pinterest.github.io/gestalt/#/">demo/docs</a> - A set of components that supports Pinterest’s design language.</li> <li><a href="https://github.com/insites-co/insites-ui">insites-ui</a> - Modern, opinionated, minimal, yet powerful React components library, powered by Styled Components.</li> <li><a href="https://github.com/OfficeDev/office-ui-fabric-react">office-ui-fabric-react</a> - React components for building Microsoft web experiences.</li> <li><a href="https://github.com/kiwicom/orbit-components/">orbit-components</a> - Components for building travel oriented projects.</li> <li><a href="https://github.com/pivotal-cf/pivotal-ui">pivotal-ui-react</a> - React components based on a custom version of the Bootstrap library.</li> <li><a href="https://github.com/primefaces/primereact">primereact</a> - A complete UI Framework with 50+ components featuring material, bootstrap and custom themes.</li> <li><a href="https://github.com/react-bootstrap/react-bootstrap">react-bootstrap</a> - Bootstrap components built with React.</li> <li><a href="https://github.com/nordsoftware/react-foundation">react-foundation</a> - Foundation as React components.</li> <li><a href="https://github.com/reakit/reakit">reakit</a> - <a href="https://reakit.io/docs/button/">demo/docs</a> Toolkit for building accessible rich web apps</li> <li><a href="https://github.com/jxnblk/rebass">rebass</a> - Configurable React Stateless Functional UI Components.</li> <li><a href="https://github.com/searchkit/searchkit">searchkit</a> - React UI components / widgets. The easiest way to build a great search experience with Elasticsearch.</li> <li><a href="https://github.com/Semantic-Org/Semantic-UI-React">semantic-ui-react</a> - The official Semantic-UI-React integration.</li> <li><a href="https://github.com/sheinsight/shineout">shineout</a> - <a href="https://shine.wiki/1.4.x/en/components/GetStart">demo</a> - Chinese-friendly set of components: form elements, navigation, table, tree, tree select drop-down etc.</li> <li><a href="https://github.com/alibaba/ChatUI">ChatUI</a> - <a href="https://chatui.io/">demo/docs</a> - The UI design language and React library for Conversational UI</li> </ul> <h5>Material Design</h5> <ul> <li>🚀 <a href="https://github.com/mui-org/material-ui">Material-UI</a> - Full suite of components. Build your own design system, or start with Material Design.<br> * <a href="https://material-ui.com/components/tree-view/">Autocomplete</a> - Accessible autocomplete, combobox, multiselect<br> * <a href="https://material-ui.com/components/material-icons/">Icons</a> - 1,000+ SVG material icons.<br> * <a href="https://material-ui.com/components/modal/">Modal</a> - Accessible modal dialog component.<br> * <a href="https://material-ui.com/components/slider/">Slider</a> - Accessible slider component.<br> * <a href="https://material-ui.com/components/tables/">Table</a> - table with sorting, selecting, pagination, virtualized.<br> * <a href="https://material-ui.com/components/tree-view/">Tree View</a> - Accessible tree view component for React.</li> <li><a href="https://github.com/Evo-Forge/Essence">react-essence</a> - Essence - The Essential Material Design Framework.</li> <li><a href="https://github.com/react-materialize/react-materialize">react-materialize</a> - Material design for react, powered by materializecss.</li> <li><a href="https://github.com/react-toolbox/react-toolbox">react-toolbox</a> - A set of React components implementing Google’s Material Design.</li> <li><a href="https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design">mdbootstrap</a> - React Bootstrap with Material Design</li> </ul> <h4>Mobile</h4> <ul> <li><a href="https://github.com/ant-design/ant-design-mobile">antd-mobile</a> - Configurable Mobile UI from China.</li> <li><a href="https://ionicframework.com/blog/announcing-ionic-react/">Ionic React</a> - Ionic Framework: easily build Android, Desktop and Progressive Web Apps with one code base.</li> <li><a href="https://github.com/OnsenUI/OnsenUI/">OnsenUI</a> - <a href="https://onsen.io/v2/guide/react/">demo/docs</a> - Mobile app framework with Material and flat (iOS) designs. Based on Web Components.</li> </ul> <h4>Component Collections</h4> <ul> <li><a href="https://github.com/palantir/blueprint">blueprint</a> - <a href="https://blueprintjs.com/">demo</a> - <a href="https://blueprintjs.com/docs/">docs</a> - UI toolkit for building complex, data-dense web interfaces for desktop (not mobile) applications.</li> <li><a href="https://github.com/dataminr/react-components">dataminr-react-components</a> - Collection of reusable React Components and utility functions.</li> <li><a href="https://github.com/DesignRevision/shards-react">shards-react</a> - <a href="https://designrevision.com/docs/shards-react/getting-started">docs/demo</a> - A beautiful and modern React design system. Freemium 💰</li> <li><a href="https://github.com/ngokevin/aframe-react">aframe-react</a> - Build virtual reality experiences with A-Frame and React.</li> <li><a href="https://github.com/marmelab/react-admin">react-admin</a> - Build admin user experiences on top of REST and GraphQL services.</li> <li><a href="https://github.com/gabrielbull/react-desktop">react-desktop</a> - React UI Components for macOS Sierra and Windows 10.</li> <li><a href="https://github.com/MehmetKaplan/matrix-card">matrix-card</a> - <a href="https://mehmetkaplan.github.io/matrix-card/">demo</a> - Simplest possible component to generate matrix rain style cards.</li> <li><a href="https://github.com/rsuite/rsuite">rsuite</a> - <a href="https://rsuitejs.com/">demo/docs</a> - Suite of components for “enterprise system products”.</li> </ul> <h3>UI Utilities</h3> <h4>Reporter</h4> <p><em>Report computed styles</em></p> <h5>Visibility Reporter</h5> <p><em>Report when a component becomes visible/hidden</em></p> <ul> <li><a href="https://github.com/joshwnj/react-visibility-sensor">react-visibility-sensor</a> - Sensor component.</li> <li><a href="https://github.com/brigade/react-waypoint">react-waypoint</a> - A React component to execute a function whenever you scroll to an element.</li> </ul> <h5>Measurement Reporter</h5> <p><em>Determine and report measurements of an element</em></p> <ul> <li><a href="https://github.com/ctrlplusb/react-component-queries">react-component-queries</a> - Provide props to your Components based on their Width and/or Height.</li> <li><a href="https://github.com/okonet/react-container-dimensions">react-container-dimensions</a> - Wrapper component that detects element resize.</li> <li><a href="https://github.com/digidem/react-dimensions">react-dimensions</a> - React higher-order component to get dimensions of container.</li> <li><a href="https://github.com/nkbt/react-height">react-height</a> - Component-wrapper to determine and report children elements height.</li> <li><a href="https://github.com/souporserious/react-measure">react-measure</a> - Compute measurements of a React component.</li> <li><a href="https://github.com/ctrlplusb/react-sizeme">react-sizeme</a> - Make your React Components aware of their width and height.</li> </ul> <h4>Device Input</h4> <p><em>Turn user input into actions</em></p> <h5>Keyboard Events</h5> <ul> <li><a href="https://github.com/chrisui/react-hotkeys">react-hotkeys</a> - Declarative hotkey and focus area management for React.</li> <li><a href="https://github.com/ayrton/react-key-handler">react-key-handler</a> - React component to handle keyboard events.</li> <li><a href="https://github.com/glortho/react-keydown">react-keydown</a> - Lightweight keydown wrapper for React components.</li> <li><a href="https://github.com/avocode/react-shortcuts">react-shortcuts</a> - Manage keyboard shortcuts from one place.</li> <li><a href="https://github.com/pranesh239/use-key-capture">useKeyCapture</a> - A custom hook to ease the key-press listeners of a target/global.</li> </ul> <h5>Scroll Events</h5> <ul> <li><a href="https://github.com/jeroencoumans/react-scroll-components">react-scroll-components</a> - A set of components that react to page scrolling.</li> </ul> <h5>Touch Swipe</h5> <ul> <li><a href="https://github.com/voronianski/react-swipe">react-swipe</a> - Swipe.js as a React component.</li> </ul> <h5>Mouse Events</h5> <ul> <li><a href="https://github.com/gabrielbull/react-aim">react-aim</a> - Determine the cursor aim for triggering mouse events.</li> <li><a href="https://github.com/mkosir/react-hook-mighty-mouse">react-hook-mighty-mouse</a> - <a href="https://mkosir.github.io/react-hook-mighty-mouse">demo</a> - Hook that tracks mouse events on selected element.</li> </ul> <h4>Meta Tags</h4> <p><em>Set meta tags, title, children of</em></p> <ul> <li><a href="https://github.com/kodyl/react-document-meta">react-document-meta</a> - HTML meta tags for React-based apps.</li> <li><a href="https://github.com/gaearon/react-document-title">react-document-title</a> - Declarative, nested, stateful, isomorphic document.title for React.</li> <li><a href="https://github.com/staylor/react-helmet-async#readme">react-helmet-async</a> - Thread-safe Helmet for React 16+ and friends</li> <li><a href="https://github.com/nfl/react-helmet">react-helmet</a> - A document head manager for React.</li> </ul> <h4>Portal</h4> <p><em>Render an element at an arbitrary DOM node</em></p> <ul> <li><a href="https://github.com/fckt/react-layer-stack">react-layer-stack</a> - Simple but ubiquitously powerful and agnostic layering system for React.</li> <li><a href="https://github.com/tajo/react-portal">react-portal</a> - React component for transportation of modals, lightboxes, loading bars… to document.body.</li> </ul> <h4>Test User Behavior</h4> <p><em>A/B tests, experiments, …</em></p> <ul> <li><a href="https://github.com/olahol/react-ab">react-ab</a> - Simple declarative and universal A/B testing component for React.</li> <li><a href="https://github.com/HubSpot/react-experiments">react-experiments</a> - React components for implementing UI experiments.</li> </ul> <h3>Code Design</h3> <p><em>Libraries that help with code design</em></p> <h4>Data Store</h4> <p><em>Data flow / data management / data stores / components state / data flow</em></p> <ul> <li><a href="https://github.com/goatslacker/alt">alt</a> - Isomorphic flux implementation.</li> <li><a href="https://github.com/Yomguithereal/baobab-react">baobab-react</a> - React integration for Baobab.</li> <li><a href="https://github.com/cerebral/cerebral">cerebral</a> - A state controller with its own debugger.</li> <li><a href="https://github.com/effector/effector">effector-react</a> - React bindings for effector, an effective multi-store state manager.</li> <li><a href="https://github.com/philpl/fluorine">fluorine-lib</a> - Reactive state and side effect management for React using a single stream of actions.</li> <li><a href="https://github.com/yahoo/fluxible">fluxible</a> - A pluggable container for universal flux applications.</li> <li><a href="https://github.com/BinaryMuse/fluxxor">fluxxor</a> - Flux architecture tools for React.</li> <li><a href="https://github.com/mariusandra/kea">kea</a> - High level architecture for React apps.</li> <li><a href="https://github.com/mobxjs/mobx-react">mobx-react</a> - React bindings for MobX. Create fully reactive components.</li> <li><a href="https://github.com/smakazmi/react-3ducks">react-3ducks</a> - <a href="https://stackblitz.com/github/smakazmi/react-3ducks/tree/master/examples/todos">demo</a> - Simple state management solution for React.</li> <li><a href="https://github.com/matthewwithanm/react-controllables">react-controllables</a> - Easily create controllable components.</li> <li><a href="https://github.com/yahoo/react-i13n">react-i13n</a> - A performant, scalable and pluggable approach to instrumenting your React application.</li> <li><a href="https://github.com/loggur/react-redux-provide">react-redux-provide</a> - Bridges the gap between Redux and the declarative nature of GraphQL/Relay.</li> <li><a href="https://github.com/reactjs/react-redux">react-redux</a> - Official React bindings for Redux.</li> <li><a href="https://github.com/tshelburne/redux-batched-actions">redux-batched-actions</a> - Reducer + action to reduce actions under a single subscriber notification.</li> <li><a href="https://github.com/tappleby/redux-batched-subscribe">redux-batched-subscribe</a> - Store enhancer for which allows batching subscribe notifications.</li> <li><a href="https://github.com/reactjs/redux">redux</a> - Predictable state container for JavaScript apps.</li> <li><a href="https://github.com/reflux/refluxjs">reflux</a> - A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux.</li> <li><a href="https://github.com/reactjs/reselect">reselect</a> - Selector library for Redux.</li> <li><a href="https://github.com/SiftScience/resourcerer">resourcerer</a> - Declarative data-fetching framework for REST APIs</li> <li><a href="https://github.com/shastajs/shasta">shasta</a> - Dead simple + opinionated toolkit for building redux/react applications.</li> </ul> <h4>Form Logic</h4> <ul> <li><a href="https://github.com/data-driven-forms/react-forms">data-driven-forms</a> - A declarative way for building forms with all the functionality.</li> <li><a href="https://github.com/guilouro/formcat">formcat</a> - A simple and easy way to control forms in React using the React Context API</li> <li><a href="https://github.com/jaredpalmer/formik">formik</a> - Build forms without tears and supports Validation in ease.</li> <li><a href="https://github.com/formsy/formsy-react/">formsy-react</a> - A form input builder and validator for React JS.</li> <li><a href="https://github.com/AppliedMathematicsANU/plexus-form">plexus-form</a> - A dynamic form component for react using JSON-Schema.</li> <li><a href="https://github.com/react-hook-form/react-hook-form">react-hook-form</a> - React hooks for form validation without the hassle.</li> <li><a href="https://github.com/mozilla-services/react-jsonschema-form">react-jsonschema-form</a> - A React component for building Web forms from JSONSchema.</li> <li><a href="https://github.com/jurassix/react-validation-mixin">react-validation-mixin</a> - Simple validation mixin (HoC) for React.</li> <li><a href="https://github.com/final-form/react-final-form">react-final-form</a> - Subscription-based form state management</li> <li><a href="https://github.com/MAKARD/react-formawesome">react-formawesome</a> - Complex library for creating awesome forms.</li> <li><a href="https://github.com/surveyjs/survey-library">surveyjs</a> - The advanced Survey and Form library</li> <li><a href="https://github.com/alibaba/formily">Formily</a> - High performance, extensible, and Typescript friendly</li> </ul> <h4>Router</h4> <ul> <li><a href="https://github.com/svenanders/react-breadcrumbs">react-breadcrumbs</a> - Automatic breadcrumbs for React-Router.</li> <li><a href="https://github.com/STRML/react-router-component">react-router-component</a> - Declarative router component for React.</li> <li><a href="https://github.com/taion/react-router-scroll">react-router-scroll</a> - React Router scroll management.</li> <li><a href="https://github.com/reactjs/react-router">react-router</a> - A complete routing library for React.</li> <li><a href="https://github.com/salvoravida/redux-first-history">redux-first-history</a> - Redux First History - Redux history binding support react-router - @reach/router - wouter</li> <li><a href="https://github.com/acdlite/redux-router">redux-router</a> - Redux bindings for React Router – keep your router state inside your Redux store.</li> <li><a href="https://github.com/kriasoft/universal-router">universal-router</a> - A simple middleware-style router for isomorphic JavaScript web apps.</li> <li><a href="https://github.com/molefrog/wouter">wouter</a> - A minimalist-friendly ~1.3KB routing library. Nothing else but hooks.</li> </ul> <h4>Props from server</h4> <p><em>Component properties asynchronously fetched over the network</em></p> <ul> <li><a href="https://github.com/andreypopp/react-async">react-async</a> - Asynchronously fetch data for React components.</li> <li><a href="https://github.com/heroku/react-refetch">react-refetch</a> - A simple, declarative, and composable way to fetch data for React components.</li> <li><a href="https://github.com/ericclemmons/react-resolver">react-resolver</a> - Async rendering & data-fetching for universal React applications.</li> <li><a href="https://github.com/relay-tools/react-router-relay">react-router-relay</a> - Relay integration for React Router.</li> <li><a href="https://github.com/markdalgleish/redial">redial</a> - Universal data fetching and route lifecycle management for React etc.</li> <li><a href="https://github.com/Rezonans/redux-async-connect">redux-async-connect</a> - Request async data, store in redux state, and connect to your component.</li> <li><a href="https://github.com/makeomatic/redux-connect">redux-connect</a> - Provides decorator for resolving async props in react-router.</li> <li><a href="https://github.com/soroushchehresa/axios-react">axios-react</a> - HTTP client component for React.</li> </ul> <h4>Communication with server</h4> <ul> <li><a href="https://github.com/gyzerok/adrenaline">adrenaline</a> - Simple Relay alternative.</li> <li><a href="https://github.com/apollostack/apollo-client">apollo-client</a> - A simple caching client for any GraphQL server and UI framework.</li> <li><a href="https://github.com/cerebral/cerebral-module-http">cerebral-module-http</a> - HTTP module for Cerebral.</li> <li><a href="https://github.com/apollostack/react-apollo">react-apollo</a> - React data container for the Apollo Client.</li> <li><a href="https://github.com/facebook/relay">react-relay</a> - Relay is a JavaScript framework for building data-driven React applications.</li> <li><a href="https://github.com/RickWong/react-transmit">react-transmit</a> - Relay-inspired library based on Promises instead of GraphQL.</li> </ul> <h4>CSS / Style</h4> <ul> <li><a href="https://github.com/milesj/aesthetic">aesthetic</a> - 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.</li> <li><a href="https://github.com/Khan/aphrodite">aphrodite</a> - It’s inline styles, but they work!.</li> <li><a href="https://github.com/JedWatson/classnames">classnames</a> - A simple javascript utility for conditionally joining classNames together.</li> <li><a href="https://github.com/rofrischmann/inline-style-prefixer">inline-style-prefixer</a> - Run-time Autoprefixer for Inline Style Objects.</li> <li><a href="https://paperclip.dev">paperclip</a> - <a href="https://paperclip.dev/docs/">docs</a> - Build UI primitivites with plain HTML & CSS.</li> <li><a href="https://github.com/FormidableLabs/radium">radium</a> - A set of tools to manage inline styles on React elements.</li> <li><a href="https://github.com/d6u/react-container-query">react-container-query</a> - Modular responsive component.</li> <li><a href="https://github.com/gajus/react-css-modules">react-css-modules</a> - Seamless mapping of class names to CSS modules inside of React components.</li> <li><a href="https://github.com/contra/react-responsive">react-responsive</a> - Media queries in react for responsive design.</li> <li><a href="https://github.com/jmlweb/reactponsive">reactponsive</a> - Responsive components and hooks.</li> <li><a href="https://github.com/styled-components/styled-components">styled-components</a> - Visual primitives for the component age.</li> </ul> <h4>HTML Template</h4> <ul> <li><a href="https://github.com/substack/hyperx">hyperx</a> - Tagged template string virtual dom builder.</li> <li><a href="https://github.com/AlexGilleran/jsx-control-statements">jsx-control-statements</a> - Neater If and For for React JSX.</li> </ul> <h4>Isomorphic Apps</h4> <ul> <li><a href="https://github.com/airbnb/hypernova">hypernova</a> - A service for server-side rendering your JavaScript views.</li> <li><a href="https://github.com/denvned/isomorphic-relay">isomorphic-relay</a> - Adds server side rendering support to React Relay.</li> <li><a href="https://github.com/kriasoft/isomorphic-style-loader">isomorphic-style-loader</a> - Isomorphic CSS style loader for Webpack.</li> <li><a href="https://github.com/redfin/react-server">react-server</a> - React framework with server render for blazing fast page load.</li> <li><a href="https://github.com/rill-js/rill">rill</a> - Universal web application framework.</li> <li><a href="https://github.com/halt-hammerzeit/webpack-isomorphic-tools">webpack-isomorphic-tools</a> - Server-side rendering for your Webpack-built applications (e.g. React).</li> </ul> <h4>Boilerplate</h4> <p><em>Scaffold / starter kit / Yeoman generator / stack ensemble / seed</em></p> <ul> <li><a href="https://github.com/facebookincubator/create-react-app">create-react-app</a> - Create React apps with no build configuration.</li> <li><a href="https://github.com/winwiz1/crisp-react">crisp-react</a> - Express integration in TypeScript with support for multiple SPAs and pitfall avoidance.</li> <li><a href="https://github.com/chentsulin/electron-react-boilerplate">electron-react-boilerplate</a> - Live editing development on desktop app.</li> <li><a href="https://github.com/pheuter/essential-react">essential-react</a> - A minimal skeleton for building testable React apps using Babel.</li> <li><a href="https://github.com/react-webpack-generators/generator-react-webpack">generator-react-webpack</a> - Yeoman generator for ReactJS and Webpack.</li> <li><a href="https://github.com/FredericHeem/starhackit">generator-starhackit</a> - Full-stack starter kit.</li> <li><a href="https://github.com/TrueCar/gluestick">gluestick</a> - GlueStick is a command line interface for quickly developing universal web apps.</li> <li><a href="https://github.com/insin/nwb">nwb</a> - CLI tool and devDependency for React apps & components and npm modules.</li> <li><a href="https://github.com/mxstbr/react-boilerplate">react-boilerplate</a> - Quick packager-agnostic boilerplate for React modules using JSX.</li> <li><a href="https://github.com/gaearon/react-hot-boilerplate">react-hot-boilerplate</a> - Minimal live-editing boilerplate for your next ReactJS project.</li> <li><a href="https://github.com/erikras/react-redux-universal-hot-example">react-redux-universal-hot-example</a> - A starter boilerplate for a universal webapp.</li> <li><a href="https://github.com/reactuate/reactuate">reactuate</a> - React/Redux stack (not a boilerplate kit).</li> <li><a href="https://github.com/SpencerCDixon/redux-cli">redux-cli</a> - An opinionated CLI for building redux/react apps quicker.</li> <li><a href="https://github.com/lvarayut/relay-fullstack">relay-fullstack</a> - Relay Starter Kit.</li> <li><a href="https://github.com/rocjs/roc">roc</a> - Modern Application Development Ecosystem.</li> <li><a href="https://github.com/AlexSergey/rockpack">rockpack</a> - Simple solution for creating React application with SSR, bundling, linting, testing within 5 minutes.</li> <li><a href="https://github.com/bdefore/universal-redux">universal-redux</a> - An npm package that lets you jump right into coding React and Redux.</li> <li><a href="https://github.com/andrelmlins/create-react-dependency">create-react-dependency</a> - Create react dependencies with no build configuration.</li> <li><a href="https://github.com/Sazito/phoenix">phoenix</a> - A simple boilerplate that helps you make your react application with Server Side Rendering & Localization support.</li> <li><a href="https://github.com/anandgupta193/react-enterprise-starter-kit">react-enterprise-starter-kit</a> - Highly Scalable and Performant Awesome React Starter Kit for an enterprise application with a very easy maintainable codebase.</li> <li><a href="https://github.com/htdangkhoa/erb">express-react-boilerplate</a> - A tool that helps programmers create Express & React projects easily base on react-cool-starter.</li> </ul> <h4>Miscellaneous</h4> <ul> <li><a href="https://github.com/matthewwithanm/react-inlinesvg">react-inlinesvg</a> - An SVG loader component for ReactJS.</li> <li><a href="https://github.com/kapolos/react-godfather">react-godfather</a> - A new way to write Functional Components, without Hooks.</li> <li><a href="https://github.com/lynndylanhurley/redux-auth">redux-auth-patch</a> - Complete token authentication system for react + redux that supports isomorphic rendering.</li> <li><a href="https://github.com/treasure-data/redux-search">redux-search</a> - Redux bindings for client-side search.</li> <li><a href="https://github.com/gcanti/tcomb-react">tcomb-react</a> - Alternative syntax for PropTypes.</li> <li><a href="https://github.com/geobde/react-find">react-find</a> - ⚛️ Elegant, accessible search component for React.</li> <li><a href="https://github.com/salvoravida/react-universal-hooks">react-universal-hooks</a> - 🎉 support react hooks everywhere (Functional or Class Component).</li> </ul> <h3>Utilities</h3> <ul> <li><a href="https://github.com/zpao/qrcode.react">qrcode.react</a> - A <QRCode/> component for use with React.</li> <li><a href="https://github.com/fernandopasik/react-children-utilities">react-children-utilities</a> - Extended utils for React.Children.</li> <li><a href="https://github.com/ReactTraining/react-media">react-media</a> - A CSS media query component for React.</li> <li><a href="https://github.com/bluepeter/react-middle-ellipsis">react-middle-ellipsis</a> - <a href="https://bluepeter.github.io/react-middle-ellipsis/">demo</a> - Truncate long strings in the middle instead of the end.</li> <li><a href="https://github.com/martinandert/react-translate-component">react-translate-component</a> - Multi-lingual/localized text content.</li> </ul> <h4>i18n</h4> <p><em>Internationalization / L10n / localization / translation</em></p> <ul> <li><a href="https://github.com/i18next/react-i18next">react-i18next</a> - Internationalization for react done right. Using the i18next i18n ecosystem.</li> <li><a href="https://github.com/yahoo/react-intl">react-intl</a> - Internationalize React apps.</li> <li><a href="https://github.com/CherryProjects/react-translate-maker">react-translate-maker</a> - Universal internationalization (i18n) open source library for React.</li> <li><a href="https://github.com/alibaba/react-intl-universal">react-intl-universal</a> - <a href="https://g.alicdn.com/alishu/common/0.0.95/intl-example/index.html">demo</a> Internationalize React apps. Not only for React.Component but also for Vanilla JS.</li> <li><a href="https://github.com/lingui/js-lingui">js-lingui</a> - <a href="https://lingui.js.org">docs</a> – A readable, automated, and optimized (5 kb) internationalization for JavaScript.</li> </ul> <h4>Framework bindings / integrations</h4> <ul> <li><a href="https://github.com/magalhas/backbone-react-component">backbone-react-component</a> - A bit of nifty glue that automatically plugs your Backbone models.</li> <li><a href="https://github.com/KtorZ/elm-react-component">elm-react-component</a> - A React component which wraps an Elm module to be used in a React application.</li> <li><a href="https://github.com/ProjectSeptemberInc/gl-react">gl-react</a> - OpenGL / WebGL bindings for React to implement complex effects over images and content.</li> <li><a href="https://github.com/jhudson8/react-backbone">react-backbone</a> - Backbone-aware mixins for react and a whole lot more.</li> <li><a href="https://github.com/react-d3-library/react-d3-library">react-d3-library</a> - Open source library for using D3 in React.</li> <li><a href="https://github.com/evancz/react-elm-components">react-elm-components</a> - Write React components in Elm.</li> <li><a href="https://github.com/pilwon/react-famous">react-famous</a> - React bridge to <a href="http://Famo.us">Famo.us</a>.</li> <li><a href="https://github.com/STRML/react-localstorage">react-localstorage</a> - Simple componentized localstorage implementation for Facebook’s React.</li> <li><a href="https://github.com/mifi/react-lottie-player">react-lottie-player</a> - <a href="https://mifi.github.io/react-lottie-player/">demo</a> - Declarative lottie animation player.</li> <li><a href="https://github.com/shakacode/react_on_rails">react-on-rails</a> - Integration of React + Webpack + Rails to build Universal (Isomorphic) Apps.</li> <li><a href="https://github.com/toxicFork/react-three-renderer">react-three-renderer</a> - Render into a three.js canvas using React.</li> <li><a href="https://github.com/fritx/react-threejs">react-threejs</a> - Simplest bindings between React & Three.js</li> <li><a href="https://github.com/firebase/reactfire">reactfire</a> - ReactJS mixin for easy Firebase integration.</li> <li><a href="https://github.com/PixelsCommander/ReactiveElements">reactive-elements</a> - Allows to use React.js component as HTML element (web component).</li> <li><a href="https://github.com/elraccoone/react-unity-webgl">react-unity-webgl</a> - Unity intergration with two-way communication using a built-in Event System.</li> </ul> <h4>Integrations with Third Party Services</h4> <ul> <li><a href="https://github.com/react-ga/react-ga">react-ga</a> - React Google Analytics Module.</li> <li><a href="https://github.com/hzdg/react-google-analytics">react-google-analytics</a> - Google analytics component.</li> <li><a href="https://github.com/ErrorPro/react-google-autocomplete">react-google-autocomplete</a> - Google Places API components and hooks.</li> <li><a href="https://github.com/appleboy/react-recaptcha">react-recaptcha</a> - A react.js reCAPTCHA for Google.</li> <li><a href="https://github.com/azmenak/react-stripe-checkout">react-stripe-checkout</a> - Load stripe’s checkout.js as a react component. Easiest way to use checkout with React.</li> <li><a href="https://github.com/rangle/redux-segment">redux-segment</a> - <a href="http://Segment.io">Segment.io</a> analytics integration for redux.</li> </ul> <h3>Performance</h3> <h4>UI</h4> <ul> <li><a href="https://github.com/trueadm/inferno">inferno</a> - An extremely fast, React-like JavaScript library for building modern user interfaces.</li> <li><a href="https://github.com/JakeSidSmith/react-fastclick">react-fastclick</a> - Fast Touch Events for React.</li> <li><a href="https://github.com/reactjs/react-static-container">react-static-container</a> - Renders static content efficiently.</li> </ul> <h5>Inspect</h5> <ul> <li><a href="https://github.com/RamonGebben/react-perf-tool">react-perf-tool</a> - Debug performance of your React application.</li> <li><a href="https://github.com/redsunsoft/react-render-visualizer">react-render-visualizer</a> - Render visualizer for ReactJS.</li> </ul> <h5>Lazy Load</h5> <ul> <li><a href="https://github.com/ggordan/react-infinite-grid">react-infinite-grid</a> - A React component which renders a grid of elements.</li> <li><a href="https://github.com/seatgeek/react-infinite">react-infinite</a> - A browser-ready efficient scrolling container based on UITableView.</li> <li><a href="https://github.com/loktar00/react-lazy-load">react-lazy-load</a> - React component that renders children elements when they enter the viewport.</li> <li><a href="https://github.com/jasonslyvia/react-lazyload">react-lazyload</a> - Lazyload your Component, Image or anything matters the performance.</li> <li><a href="https://github.com/bvaughn/react-virtualized">react-virtualized</a> - React components for efficiently rendering large lists and tabular data.</li> </ul> <h4>App Size</h4> <ul> <li><a href="https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types">babel-plugin-transform-react-remove-prop-types</a> - Remove unnecessary React propTypes.</li> <li><a href="https://github.com/Lucifier129/react-lite">react-lite</a> - An implementation of React that optimizes for small script size.</li> </ul> <h4>Server-Side Rendering</h4> <ul> <li><a href="https://github.com/AlexSergey/issr">iSSR</a> - The easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State.</li> <li><a href="https://github.com/dunglas/react-esi">react-esi</a> - A library to boost SSR performance by exposing React components as Edge Side Includes (ESI) fragments</li> </ul> <h3>Dev Tools</h3> <h4>Test</h4> <ul> <li><a href="https://github.com/carteb/carte-blanche">carte-blanche</a> - An isolated development space with integrated fuzz testing for your components.</li> <li><a href="https://github.com/producthunt/chai-enzyme">chai-enzyme</a> - Chai.js assertions and convenience functions for testing React Components with enzyme.</li> <li><a href="https://github.com/airbnb/enzyme">enzyme</a> - JavaScript Testing utilities for React.</li> <li><a href="https://github.com/facebook/jest">jest-cli</a> - Painless JavaScript Testing.</li> <li><a href="https://github.com/pzavolinsky/react-unit">react-unit</a> - Lightweight unit test library for ReactJS.</li> <li><a href="https://github.com/conorhastings/redux-test-recorder">redux-test-recorder</a> - A redux middleware to automatically generate tests for reducers through ui interaction.</li> <li><a href="https://github.com/milesj/rut">rut</a> - React testing made easy with <code>react-test-renderer</code>. Supports DOM and custom renderers.</li> <li><a href="https://github.com/philcockfield/ui-harness">ui-harness</a> - Create, isolate and test modular UI components in React.</li> <li><a href="https://github.com/bruderstein/unexpected-react">unexpected-react</a> - Plugin for unexpected to enable testing the full React virtual DOM, and also the shallow renderer.</li> </ul> <h4>Redux</h4> <ul> <li><a href="https://github.com/romseguy/redux-devtools-chart-monitor">redux-devtools-chart-monitor</a> - A chart monitor for Redux DevTools.</li> <li><a href="https://github.com/gaearon/redux-devtools-dock-monitor">redux-devtools-dock-monitor</a> - A resizable and movable dock for Redux DevTools monitors.</li> <li><a href="https://github.com/bvaughn/redux-devtools-filterable-log-monitor">redux-devtools-filterable-log-monitor</a> - Filterable tree view monitor for Redux DevTools.</li> <li><a href="https://github.com/alexkuz/redux-devtools-inspector">redux-devtools-inspector</a> - Another Redux DevTools Monitor.</li> <li><a href="https://github.com/gaearon/redux-devtools-log-monitor">redux-devtools-log-monitor</a> - The default monitor for Redux DevTools with a tree view.</li> <li><a href="https://github.com/gaearon/redux-devtools">redux-devtools</a> - DevTools for Redux with hot reloading, action replay, and customizable UI.</li> <li><a href="https://github.com/zalmoxisus/remote-redux-devtools">remote-redux-devtools</a> - Redux DevTools remotely.</li> </ul> <h4>Inspect</h4> <ul> <li><a href="https://fluxguard.com">fluxguard</a> - PROD change monitoring that highlights all DOM + design changes.</li> <li><a href="https://github.com/xyc/react-inspector">react-inspector</a> - Power of Browser DevTools inspectors right inside your React app.</li> <li><a href="https://github.com/Lapple/react-json-inspector">react-json-inspector</a> - React JSON inspector component.</li> <li><a href="https://github.com/reactotron/reactotron">reactotron</a> - A CLI and OS X app for inspecting your React JS and React Native apps.</li> </ul> <h4>Miscellaneous</h4> <ul> <li><a href="https://github.com/ccontrols/component-controls">component-controls</a> - <a href="https://component-controls.com">demo</a> - <a href="https://component-controls.com/tutorial">docs</a> - A next-generation tool to create blazing-fast documentation sites.</li> <li><a href="https://github.com/skidding/cosmos">cosmos-js</a> - DX tool for designing truly encapsulated React components.</li> <li><a href="https://github.com/mkosir/react-demo-tab-cli">react-demo-tab-cli</a> - CLI tool for creating demos of react components.</li> <li><a href="https://github.com/insin/react-heatpack">react-heatpack</a> - A ‘heatpack’ command for quick React development with webpack hot reloading.</li> <li><a href="https://github.com/sapegin/react-styleguidist">react-styleguidist</a> - React style guide generator.</li> <li><a href="https://github.com/feross/standard">standard-react</a> - JavaScript Standard Style Guide.</li> <li><a href="https://www.plasmic.app/">Plasmic</a> - Powerful design tool for building your React components visually.</li> <li><a href="https://github.com/simplelocalize/simplelocalize-cli">SimpleLocalize</a> - Open source CLI tool for finding i18n keys in React projects.</li> </ul> <h3>Miscellaneous</h3> <ul> <li><a href="https://github.com/dataformsjs/dataformsjs/blob/master/docs/jsx-loader.md">DataFormsJS JSX Loader</a> - Small JavaScript Compiler for quickly converting JSX to JS directly on a web page.</li> <li><a href="https://github.com/roman01la/html-to-react-components">html-to-react-components</a> - Extract annotated portions of HTML into React components as separate modules.</li> <li><a href="https://github.com/reactjs/react-magic">htmltojsx</a> - Automatically AJAXify plain HTML with the power of React. It’s magic!.</li> <li><a href="https://github.com/repetere/jsonx">jsonx</a> - React JSON Syntax.</li> <li><a href="https://github.com/plouc/mozaik">mozaik</a> - Mozaïk is a tool based on nodejs / react / d3 / stylus to easily craft beautiful dashboards.</li> <li><a href="https://github.com/Yomguithereal/react-blessed">react-blessed</a> - A react renderer for blessed.</li> </ul> <h4>Static Website Generator</h4> <ul> <li><a href="https://github.com/gatsbyjs/gatsby">gatsby</a> - Transform plain text into dynamic blogs and websites using React.js.</li> </ul> <h3>Cloud Solutions</h3> <h4>Databases</h4> <ul> <li><a href="https://github.com/winwiz1/crisp-bigquery">crisp-bigquery</a> - Full stack Google BigQuery with Express in TypeScript.</li> <li><a href="https://github.com/mhart/react-server-routing-example">react-server-routing-example</a> - Universal client/server routing and data with AWS DynamoDB.</li> </ul> <h3>Download Details:</h3> <p><strong>Author:</strong> brillout<br> <strong>Download Link:</strong> <a href="https://github.com/brillout/awesome-react-components/archive/refs/heads/master.zip" title="Download The Source Code">Download The Source Code</a><br> <strong>Official Website:</strong> <a href="https://github.com/brillout/awesome-react-components">https://github.com/brillout/awesome-react-components</a><br> <strong>License:</strong> CC0-1.0</p>

#react #javascript #web-development #developer #programming

Absolutely Awesome React Components & Libraries