# Awesome React Components

Just react

This are just react libraries.
Also search for javascript libraries on npmjs.com (opens new window).

# Awesome Components (from awesome-react)

react-cookie (opens new window) - Universal cookies for React.
react-resizable (opens new window) - A simple React component that is resizable with a handle
Optional
- react-joyride (opens new window) - Create guided tours for your apps
- react-loading-skeleton (opens new window) - Create skeleton screens that automatically adapt to your app
- react-archer (opens new window) - Draw arrows between React elements
Avoid ❌
- react-truncate-markup (opens new window) - React component for truncating JSX markup.
- rheostat (opens new window) - Accessible slider component built with React
- react-pdf-viewer (opens new window) - A PDF viewer made for React

# UI Components

# Editable data grid / spreadsheet

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

# Table

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

# Infinite Scroll

react-virtualized ⭐ (opens new window) - React components for efficiently rendering large lists and tabular data.
react-window ⭐ (opens new window) - demo (opens new window) - React components for efficiently rendering large lists and tabular data
react-lazyload (opens new window) - Lazyload your Component, Image or anything matters the performance.
Optional
- react-list (opens new window) - A versatile infinite scroll React component.
Avoid ❌
- af-virtual-scroll (opens new window) - demo (opens new window) - docs (opens new window) - Render large scrollable lists and tables.
- @egjs/react-infinitegrid (opens new window) - npm (opens new window) - demo (opens new window) - A module used to arrange card elements including content infinitely according to various layout types.
- react-recycled-scrolling (opens new window) - npm (opens new window) - demo (opens new window) - Simulate scrolling using fixed number of DOM elements for large lists with React Hooks

# Overlay

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

react-modal ⭐ (opens new window) - Accessible modal dialog component for React.
sweetalert2 ⭐ (opens new window) - demo/docs (opens new window) - A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.
Optional
- react-aria-modal (opens new window) - A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.
- sweetalert2-react-content (opens new window) - Official SweetAlert2 enhancer adding support for React elements as content
Avoid ❌
- react-skylight (opens new window) - A react component for modals and dialogs.
- reoverlay (opens new window) - demo (opens new window) - The missing solution for managing modals.
- reboron (opens new window) - A collection of dialog animations with React.js
- boron (opens new window) - A collection of dialog animations with React.js.

# Notification

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

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

react-popper ⭐ (opens new window) - Position tooltips and popovers in an elegant, performant manner
react-tooltip (opens new window) - React tooltip component.

Menus / sidebars

react-burger-menu (opens new window) - An off-canvas sidebar with effects and styles.
Avoid ❌
- hamburger-react (opens new window) - demo/docs (opens new window) - Animated hamburger menu icons for React.
- react-offcanvas (opens new window) - Off-canvas menus for React.
- react-planet (opens new window) - demo (opens new window) - Create circular menus which looks like planets.

# Sticky (Avoid)

Fixed headers / scroll-up headers / sticky elements

react-sticky (opens new window) - <Sticky /> component for awesome React apps.
react-stickynode (opens new window) - A performant and comprehensive React sticky.
Avoid ❌
- react-headroom (opens new window) - Hide your header until you need it.

# Tabs

react-tabs ⭐ (opens new window) - React tabs component.
Avoid ❌
- react-tabtab (opens new window) - React, tabs.

# Loader

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

react-content-loader ⭐ (opens new window) - SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).
react-spinners ⭐ (opens new window) - A collection of loading spinner components for react.
Optional
- react-redux-loading-bar (opens new window) - Simple Loading Bar for Redux and React.
- react-spinkit (opens new window) - (Very old yet popular) - A collection of loading indicators animated with CSS for React.
- react-loader (opens new window) - React component that displays a spinner via spin.js until your component is loaded.
- react-block-ui (opens new window) - Easy way to block the user from interacting with your UI.
- react-md-spinner (opens new window) - Material Design spinner components for React.js.
Avoid ❌
- react-progress-button (opens new window) - Simple react.js component for an inline progress indicator.
- react-progress-label (opens new window) - Progress label component.
- react-spinners-css (opens new window) - Amazing collection of react spinners components.
Deprecated/old

# Carousel

react-slick ⭐ (opens new window) - React carousel component.
Optional
- react-id-swiper (opens new window) - A library to use idangerous Swiper as a ReactJs component
- pure-react-carousel (opens new window) - Built from scratch and not highly opinionated.
- react-responsive-carousel (opens new window) - React.js Responsive Carousel (with Swipe).
- react-image-magnify (opens new window) - demo (opens new window) - Responsive React image carousel zoom component for touch and mouse. Designed for shopping site product detail
Avoid ❌
- @egjs/react-flicking (opens new window) - npm (opens new window) - demo (opens new window) - It's reliable, flexible and extendable carousel.
- flat-carousel (opens new window) - demo (opens new window) Light weight carousel component for general purpose.
- react-awesome-slider (opens new window) - demo (opens new window) - 3D animated 60fps media and content slider/carousel.
- react-instagram-zoom-slider (opens new window) - demo (opens new window) - A slider component with pinch to zoom capabilities inspired by Instagram.
- keen-slider (opens new window) - demo (opens new window) - Performant carousel/slider with native touch/swipe behavior.

# Buttons (Avoid)

Avoid ❌
- react-awesome-button (opens new window) - demo (opens new window) - 3D animated 60fps buttons with load progress and social share actions.
- reactive-button (opens new window) - demo (opens new window) - docs (opens new window) - A beautiful animated button component with progress indicator.

# Collapse

rc-collapse ⭐ (opens new window)(From antdesign)
Optional
- react-accessible-accordion (opens new window) - Accessible Accordion component for React.
- react-collapse (opens new window) - Component-wrapper for collapse animation with react-motion.
Avoid ❌
- react-tabbordion (opens new window) - demo (opens new window) - Universal, semantic and CSS-only components for creating Accordions and Tabs.

# Chart

Display data in charts / graphs / diagrams

recharts ⭐ (opens new window) - Redefined chart library built with React and D3.
react-chartjs-2 ⭐ (opens new window) - Common react charting components using Chart.js 2.0.
victory (opens new window) - Data viz for React.
Optional
- react-vis (opens new window) - Data visualization library based on React and d3.
- react-apexcharts (opens new window) - React component for ApexCharts (An Interactive SVG Chart Library)
- react-google-charts (opens new window) - React-google-charts React component.
- echarts-for-react (opens new window) - A very simple ECharts wrapper for React.
- react-highcharts (opens new window) - React-highcharts.
- react-chartist (opens new window) - React component for Chartist.js.
Deprecated / old
- react-sparklines (opens new window) - Beautiful and expressive Sparklines React component.
- react-d3-components (opens new window) - D3 Components for React.
- react-dazzle (opens new window) - Dashboards made easy in React JS.
- react-chartjs (opens new window) - Common react charting components using chart.js
- react-stockcharts (opens new window) - Highly customizable stock charts with ReactJS and d3
Avoid ❌
- semiotic (opens new window) - Semiotic is a data visualization framework for React.
- react-sigmajs (opens new window) - Lightweight but powerful library for drawing network graphs built on top of SigmaJS.
- react-timeseries-charts (opens new window) - Declarative timeseries charts.
- rumble-charts (opens new window) - React components for building composable and flexible charts.
- essential js 2 charts (opens new window) - Beautiful and interactive charts & graphs for react.
- chartify (opens new window) - React.js plugin for building animated draggable and customizable charts.
- jscharting-react (opens new window) – React chart component offering a complete set of chart types and engaging data visualizations with JSCharting (opens new window).
- react-charty (opens new window) - demo (opens new window) - Small but powerful interactive data viz with multiple chart types, animations, zooming, theming.
- react-muze (opens new window) - React wrapper for muze (opens new window)(free data visualization library for creating exploratory data visualizations in browser, using WebAssembly)
- DevExtreme React Chart (opens new window) - (Paid) High-performance plugin-based chart for Bootstrap and Material Design.
- Smart React Chart (opens new window) - (Paid) Feature complete Charting library.
- reaviz (opens new window) - React Data Visualization Library based on D3.js
- nivo (opens new window) - It provides a rich set of data visualization components, built on top of the D3 and React libraries.
- vx (opens new window) - A collection of reusable low-level visualization components. It combines the power of D3 to generate your visualization with the benefits of React for updating the DOM.
- Chartify (opens new window) - React plugin for building charts using CSS.
- reaflow (opens new window) - Diagram editor for React

# Tree (Avoid)

Display a tree data structure

Deprecated / old
- react-complex-tree (opens new window) - demo (opens new window) - docs (opens new window) - Unopinionated Accessible Tree Component with Multi-Select, Drag-And-Drop and Search
- react-treebeard (opens new window) - React Tree View Component. Data-Driven, Fast, Efficient and Customisable.
- react-treeview (opens new window) - Easy, light, flexible tree view made with React.

Ways to navigate views

react-scroll (opens new window) - React scroll component.
react-swipeable-views (opens new window) - A React Component for binded Tabs and Swipeable Views.

# Custom Scrollbar

rc-scrollbars (opens new window) - demo (opens new window) - Customizable scrollbars with flex options and 60FPS
Deprecated / old
- react-scrollbar (opens new window) - Scrollbar component for React.
Avoid ❌
- react-custom-scroll (opens new window) - demo (opens new window) - Easily customize the browser scroll bar with native OS scroll behavior.
- react-shadow-scroll (opens new window) - Component that customizes the image and inserts shadow when scrolling exists.

# Audio / Video

react-player ⭐ (opens new window) - A react component for playing a variety of URLs, including YouTube.
video-react (opens new window) - A web video player built for the HTML5 world using React library.
react-youtube (opens new window) - React.js powered YouTube player component.
Avoid ❌
- react-dailymotion (opens new window) - Dailymotion player component for React.
- react-soundplayer (opens new window) - Create custom SoundCloud players with React.
- material-ui-audio-player (opens new window) - Audio player for material ui design.

# Map

google-map-react (opens new window) - Universal google map react component, allows render react components on the google map.
google-maps-react (opens new window) - A declarative Google Map React component using React, lazy-loading dependencies, current-location finder and a test-driven approach by the Fullstack React team.google-maps-react)
Deprecated / old
- react-google-maps (opens new window) - React.js Google Maps integration component
- react-googlemaps (opens new window) - React interface to Google maps
- react-maps (opens new window) - A map component for React
- react-gmaps (opens new window) - A Google Maps component for React.js
Optional
- react-leaflet (opens new window) - React components for Leaflet maps.
- react-map-gl (opens new window) - A React wrapper for MapboxGL-js and overlay API.
- react-geosuggest (opens new window) - A React autosuggest for the Google Maps Places API.
- react-mapbox-gl (opens new window) - A React binding of mapbox-gl-js.
- react-svg-map (opens new window) - demo (opens new window) - A set of components to display an interactive SVG map.
- pigeon-maps (opens new window) - ReactJS maps without external dependencies
- react-geo (opens new window) - A set of geo-related components using react, antd, and ol

# Time / Date / Age

Display time / date / age

airbnb/react-dates ⭐ (opens new window) - An easily internationalizable, mobile-friendly datepicker library for the web
Avoid ❌
- react-timeago (opens new window) - A simple time-ago component for ReactJs.
- timeago-react (opens new window) - Format date with *** time ago statement. eg: '3 hours ago'.
- react-google-flight-datepicker (opens new window) - Google flight date picker implemented in ReactJS.

# Photo / Image

Display images / photos

react-image-lightbox (opens new window) - React lightbox component.
react-images (opens new window) - A simple lightbox component for displaying an array of images.
react-image-gallery (opens new window) - Responsive image gallery, carousel, image slider react component.
lightGallery (opens new window) - demo (opens new window) - docs (opens new window) - Full-featured lightbox gallery component.
Optional
- react-imgix (opens new window) - Add fast, responsive images as an image, picture, or background!
- react-photo-gallery (opens new window) - Responsive React Photo Gallery.
Avoid ❌
- react-compare-image (opens new window) - demo (opens new window) - React component to compare two images using a slider.
- react-svg-pan-zoom (opens new window) - A React component that adds pan and zoom features to SVG.
- react-intense (opens new window) - A React component for viewing large images up close.
- react-particle-image (opens new window) - demo (opens new window) - Render images as interactive particles.

# Icons

Display icons / icon set / emojis

react-icons ⭐ (opens new window) - Svg react icons of popular icon packs using ES6 imports.
Avoid ❌
- iconify-react (opens new window) - Over 40k icons from 50+ icon sets, including all popular icon and emoji sets.
- react-open-doodles (opens new window) - Awesome free illustrations as react components.

# Paginator

Display a control element to paginate

react-paginate (opens new window) - A ReactJS component that creates a pagination.
Avoid ❌
- react-laravel-paginex (opens new window) - Laravel Pagination with ReactJS (customizable).
- paginated (opens new window) - React render props & custom hook to build pagination.

# Markdown Viewer

Display parsed markdow source

react-markdown (opens new window) - Render Markdown as React components.

# Canvas

Sketch input using Canvas or SVG

react-konva (opens new window) - React Konva is a JavaScript library for drawing complex canvas graphics with bindings to the Konva Framework.
Avoid ❌
- react-heat-map (opens new window) - A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph.
- react-sketch (opens new window) - A Sketch tool for React based applications, backed-up by FabricJS
- react-sketch-canvas (opens new window) - Demo (opens new window) Freehand vector drawing tool for React using SVG as canvas. Accepts input from Mouse, touch, and graphic tablets

# Miscellaneous

react-device-detect ⭐ (opens new window) - Detect device for React
react-pdf ⭐ (opens new window) - Display PDFs in your React app as easily as if they were images.
react-resizable-box / re-resizable (opens new window) - Resizable component for React. #reactjs.
react-gtm-module (opens new window) - Google Tag Manager Module for React
react-split-pane (opens new window) - React split-pane component.
cleave.js (opens new window) - Format input text content when you are typing
Optional
- typography (opens new window) - A powerful toolkit for building websites with beautiful typography.
- react-awesome-query-builder (opens new window) - demo (opens new window) - Visual query builder from form fields, with SQL, MongoDB and JSON export
- react-joyride (opens new window) - Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!.
- react-json-tree (opens new window) - React JSON Viewer Component, Extracted from redux-devtools.
- react-swipeable-list (opens new window) - demo (opens new window) - Configurable component to render list with swipeable items.
Avoid ❌
- react-resizable-and-movable (opens new window) - Resizable and movable component for React.
- captcha-image (opens new window) - Allows you to generate a random captcha image with options.
- react-darkreader (opens new window) - 🌓 A React Hook for adding a dark / night mode to your site inspired by darkreader.
- react-apple-signin-auth (opens new window) -  Apple signin for React using the official Apple JS SDK.
- react-filter-control (opens new window) - The React filterbuilder component for building the filter criteria in the UI.
- react-headings (opens new window) - 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-advanced-news-ticker (opens new window) - demo (opens new window) - A flexible and animated vertical news ticker component
- react-pdf-viewer (opens new window) - docs (opens new window) - A React component to view a PDF document.
- react-simple-chatbot (opens new window) - demo (opens new window) - A simple chatbot component to create conversation chats.
- react-file-reader-input (opens new window) - File input component for control for file reading styling and abstraction.
- react-blur (opens new window) - React component for blurred backgrounds.
- react-facebook (opens new window) - Facebook components like a Login button, Like, Share, Comments, Page or Embedded Post.
- captcha-image (opens new window) - Allows you to generate a random captcha image with options.
- fastcomments-react (opens new window) - [demo](<https://blog.fastcomments.com/(12-30-2019)-fast
- react-searchbox-awesome (opens new window) - demo (opens new window) - Minimalistic searchbox.
- react-swipe-to-delete-ios (opens new window) - demo (opens new window) - To delete an item in a list the same way iOS does.
- react-pulse-text (opens new window) - demo/docs (opens new window) - Allows you to animate the text of any property of another component.
- react-advanced-news-ticker (opens new window) - demo (opens new window) - A flexible and animated vertical news ticker component
- react-avatar-generator (opens new window) - Allows users to create random kaleidoscopes to be used as avatars.
- react-demo-tab (opens new window) - demo (opens new window) - A React component to easily create demos of other components.
- react-customizable-chat-bot (opens new window) - Demo (opens new window) - Build your own chatbot matching your brand needs in minutes.
- @restpace/schema-form (opens new window) - Demo (opens new window) - 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

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

# Emoji picker

Avoid ❌
- interweave-emoji-picker (opens new window) - A React based emoji picker powered by Interweave and Emojibase.

# Input Types

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

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

# Autocomplete

Autosuggest / autocomplete / typeahead

downshift ⭐⭐ (opens new window) - 🏎 Primitives to build simple, flexible, WAI-ARIA compliant enhanced input React components
react-autosuggest (opens new window) - WAI-ARIA compliant React autosuggest component
react-bootstrap-typeahead (opens new window) - A React-based typeahead that relies on Bootstrap for styling and was originally inspired by Twitter's typeahead.js.
Avoid ❌
- react-typeahead (opens new window) - Pure react-based typeahead and typeahead-tokenizer.
Deprecated / old
- react-autocomplete by @prometheusresearch (opens new window) - Autocomplete widget based on React
- instatype by @gragland (opens new window) - Simple react autocomplete component
- react-autocomplete by @eliseumds (opens new window) - Just tasting some ReactJS + RxJS
- react-autocomplete by @rackt (opens new window) - WAI-ARIA compliant React autocomplete

# Select

react-select ⭐⭐ (opens new window) - A Select control built with and for React JS.
Avoid ❌
- react-aria-menubutton (opens new window) - A fully accessible, easily themeable, React-powered menu button.
- react-functional-select (opens new window) - demo (opens new window) - Micro-sized & micro-optimized select component for React.js.
- react-column-select (opens new window) - A column select component built for react.
Deprecated / old
- react-select-box (opens new window) - An accessible select box component for React.

# Color Picker

react-colorful ⭐ (opens new window) - A tiny (2,5 KB), dependency-free, fast and accessible color picker component.
react-color (opens new window) - Color Pickers from Sketch, Photoshop, Chrome & more.
Avoid ❌
- coloreact (opens new window) - A tiny Color Picker for React.
- react-input-color (opens new window) - React input color component with hsv color picker.

# Toggle

Avoid ❌
- react-toggle (opens new window) - An elegant, accessible toggle component for React. Also a glorified checkbox.
- react-ios-switch (opens new window) - React switch component.
- react-triple-toggle (opens new window) - ⚛️ React multi toggle component.

# Slider

react-slider (opens new window) - Slider component for React.

# Radio Button

Deprecated / old
- react-radio-group (opens new window) - Better radio buttons.

# Type Select

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

react-mentions (opens new window) - Mention people in a textarea.
Avoid ❌
- react-autocomplete-input (opens new window) - Autocomplete input field for React.

# Tag Input

Let the user add multiple tags in a single input

Avoid ❌
- react-tagsinput (opens new window) - A simple react component for inputing tags.
- react-tokeninput (opens new window) - Tokeninput component for React.
- @pathofdev/react-tag-input (opens new window) - demo & docs (opens new window) - Minimal tagging component with editable tags
- react-tag-input (opens new window) - A fantastically simple tagging component for your React projects.

# Autosize Input / Textarea

react-textarea-autosize ⭐ (opens new window) - <textarea /> component for React which grows with content.
react-input-autosize ⭐ (opens new window) - Auto-resizing input field for React.
Avoid ❌
- react-autowidth-input (opens new window) - Highly configurable & extensible automatically sized input field built with hooks.

# Star Rating

Avoid ❌
- react-awesome-stars-rating (opens new window) - demo (opens new window) - The star rating component with accessibility.
- react-star-rating-input (opens new window) - React.js component for entering 0-5 (or more) stars.
- react-star-rating (opens new window) - A simple star rating component built with React.

# Drag and Drop

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

# Sortable List

Let the user define an order on a list

sortablejs ⭐ (opens new window) - Lists reorderable by drag-and-drop, within and among lists.
Deprecated / old
- react-anything-sortable (opens new window) - Sort any children with touch support and IE8 compatibility.
- react-sortable (opens new window) - A sortable list component built with React.

# Rich Text Editor

draft-js ⭐ (opens new window) - A React framework for building text editors.
Optional
- react-ace (opens new window) - Ace (Advanced Code Editor) wraper.
- react-codemirror2 (opens new window)
- react-quill (opens new window) - Quill wrapper.
- slate (opens new window) - demo (opens new window) - docs (opens new window) - A completely customizable framework for building rich text editors.
- react-draft-wysiwyg (opens new window) - WYSIWYG editor build on top of DraftJS (opens new window).
- react-contenteditable (opens new window) - React component for a div with editable contents.
- edtr-io (opens new window) - demo (opens new window) - docs (opens new window) - WYSIWYG in-line web editor with plugins.
- ckeditor5-react (opens new window) - An official CKEditor 5 rich text editor wrapper.
Avoid ❌ 📈 NpmTrends (opens new window)
- react-medium-editor (opens new window) - medium-editor wrapper.
- react-codemirror (opens new window) - CodeMirror wrapper.
- react-monacoeditor (opens new window) - Monaco Editor component for React.
- remirror (opens new window) - demo (opens new window) - docs (opens new window) - ProseMirror toolkit for React.
- smartblock (opens new window) - demo (opens new window) - docs (opens new window) - Block based WYSIWYG editor based on ProseMirror.
- ckeditor4-react (opens new window) - An official CKEditor 4 rich text editor wrapper.
- react-trumbowyg (opens new window) - Trumbowyg (opens new window) wrapper.
- react-editor (opens new window) - Simple richtext editor that can insert images and HTML.
- alloyeditor (opens new window) - WYSIWYG editor based on CKEditor with completely rewritten UI.
- megadraft (opens new window) - Rich Text editor built on top of draft.js.

# Markdown Editor

react-simplemde-editor (opens new window) - React component wrapper for EasyMDE (the most fresh SimpleMDE fork) (opens new window).
react-markdown-editor (opens new window) - A markdown editor using React/Reflux.
react-md-editor (opens new window) - A simple markdown editor with preview, implemented with React.js and TypeScript.
Avoid ❌
- react-md-editor (opens new window) - Markdown editor.

# Image Editing

Image manipulation

react-image-crop ⭐ (opens new window) - A responsive image cropping tool for React.
react-avatar-editor (opens new window) - Facebook-like, avatar / profile picture component.
react-easy-crop (opens new window) - Component to crop/rotate images/videos with easy interactions. Touch friendly.
Avoid
- react-avatar-generator (opens new window) - Generate fun kaleidoscope for user avatars.
- react-avatar-cropper (opens new window) - Aiming to be a complete solution for avatar cropping in react.
- react-image-cropper (opens new window) - Image cropper.

# Form Component Collections

react-widgets (opens new window) - An à la carte set of polished, extensible, and accessible inputs.
Avoid ❌
- formsy-material-ui (opens new window) - A Formsy compatibility wrapper for Material-UI form components.
- formsy-react-components (opens new window) - A set of React JS components for use in a formsy-react form.
Deprecated / old
- react-input-enhancements (opens new window) - Set of enhancements for input control.

# Miscellaneous

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

# Syntax Highlight

Avoid ❌
- react-syntax-highlighter (opens new window) - Syntax highlighting component with Prismjs or Highlightjs AST using inline styles.

# UI Layout

Components to layout the app's UI

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

# UI Animation

Animate transitions

reactjs/react-transition-group ⭐⭐ (opens new window)
framer-motion ⭐ (opens new window) - An animation and gesture library.
react-motion ⭐ (opens new window) - A spring that solves your animation problems.
react-spring ⭐ (opens new window) - A spring physics based animation library.
Deprecated / old ❌
- velocity-react (opens new window) - Velocity.js wrapper.
- react-spark-scroll (opens new window) - Scroll-based actions and animations for react.
- react-track (opens new window) - Track the position of DOM elements. Create cool animations.
- react-transitive-number (opens new window) - Apply transition effect to numeric strings, a la old Groupon timers.
- react-web-animation (opens new window) - React components for the Web Animations API -.
- data-driven-motion (opens new window) - Easily animate your data.
- react-gsap-enhancer (opens new window) - Use the full power of React and GSAP together.
- react-magic-move (opens new window) - MagicMove wrapper.
- react-mt-svg-lines (opens new window) - Wrapper to animate the line stroke in SVGs.
Avoid ❌
- react-router-transition (opens new window) - Transitions built for react-router, powered by react-motion.
- react-tweenful (opens new window) - demo (opens new window) - Animation engine that lets you animate DOM nodes, mounting, unmounting, child changes/transitions.
- react-anime (opens new window) - A super easy animation library.
- react-flip-move (opens new window) - Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
- react-tsparticles (opens new window) - A lightweight component to easily create interactive particles animations
- auto-size-transition (opens new window) - A component that scale dynamically according to the internal children size
- react-particles-bg (opens new window) - Particles backgrounds.
- gooey-react (opens new window) - demo/docs (opens new window) - The gooey effect for React, used for shape blobbing / metaballs.

# Parallax

react-parallax-tilt (opens new window) - demo (opens new window) - Easily apply parallax tilt hover effect on components.
Avoid ❌
- react-parallax-component (opens new window) - Easiest way to add scroll parallax effect on the component.

# UI Frameworks - Component Libraries

@material-ui/core ⭐⭐ (opens new window)
react-bootstrap (opens new window) - Bootstrap components built with React
🚀 ant-design (opens new window) - A design system with values of Nature and Determinacy
reactstrap (opens new window) - Simple React Bootstrap 4 components
semantic-ui-react (opens new window) - The official Semantic-UI-React integration
@blueprintjs/core (opens new window) - A React-based UI toolkit for the webs
material-ui (opens new window) - React components for faster and easier web development
office-ui-fabric-react (opens new window) - React components for building Microsoft web experiences.

Optional-1
- reakit (opens new window) - Accessible, Composable and Customizable components for React
- rebass (opens new window) - React primitive UI components built with styled-system
- react-fontawesome (opens new window) - Font Awesome 5 component library for React
- carbon (opens new window) - demo/docs (opens new window) - A design system built by IBM.
Optional-2
- base web (opens new window) - Base Web is a foundation for initiating, evolving, and unifying web products.
- @fluentui/react (opens new window) - A set of React components for building Microsoft web experiences
- grommet (opens new window) - The most advanced UX framework for enterprise applications.
- primereact (opens new window) - A complete UI Framework for React with 50+ components featuring material, bootstrap and custom themes.
- @elastic/eui (opens new window) - The Elastic UI Framework is a collection of React UI components for quickly building user interfaces at Elastic.
- rsuite (opens new window) - A suite of React components
- evergreen (opens new window) - Evergreen React UI Framework by Segment
- @kiwicom/orbit-components (opens new window) - Components for building travel oriented projects.
- gestalt (opens new window) - demo/docs (opens new window) - A set of components that supports Pinterest’s design language.
Aviod ❌ - 📈 NpmTrends (opens new window)
- react-spectrum (opens new window) - Adobe's collection of libraries and tools that help you build adaptive, accessible, and robust user experiences
- ring-ui (opens new window) - JetBrains Web UI components
- cdbreact (opens new window) - demo (opens new window) - docs (opens new window) - Elegant UI Kit library and reusable components for building mobile-first, responsive websites and web apps.
- ChatUI (opens new window) - demo/docs (opens new window) - The UI design language and React library for Conversational UI
- Mantine (opens new window) - demo/docs (opens new window) - A fully featured library with 100+ hooks and components with native dark theme support
Deprecated / old ❌
- react-bulma (opens new window) - React.js components for Modern CSS framework based on Flexbox
- rbx (opens new window) - The Comprehensive Bulma UI Framework for React
- tailwind-react-ui (opens new window) - React utility component primitives & UI framework for use with Tailwind CSS
- tails-ui (opens new window) - Clean UI based on tailwindcss
- belle (opens new window) - Configurable React Components with great UX.
- insites-ui (opens new window) - Modern, opinionated, minimal, yet powerful React components library, powered by Styled Components.
- pivotal-ui-react (opens new window) - React components based on a custom version of the Bootstrap library.
- react-essence (opens new window) - Essence - The Essential Material Design Framework.
Avoid ❌
- @geist-ui/react (opens new window) - Modern and minimalist React UI library, originating from Vercel's design
- react-bulma-components (opens new window) - React components for Bulma framework
- chakra-ui (opens new window) - Simple, Modular & Accessible UI Components for your React Applications
- trunx (opens new window) - Super Saiyan React components, son of awesome Bulma, implemented in TypeScript
- bugbag react ui kit (opens new window) - Bumbag is a friendly React UI Kit suitable for MVPs or large-scale applications.
- atlaskit (opens new window) - Atlassian's official UI library, built according to the Atlassian Design Guidelines.
- zeit-ui-react (opens new window) - Modern and minimalist React UI library.
- fluent-ui (opens new window) - demo/docs (opens new window) - 🌈 React components that inspired by Microsoft's Fluent Design System.
- react-foundation (opens new window) - Foundation as React components.
- searchkit (opens new window) - React UI components / widgets. The easiest way to build a great search experience with Elasticsearch.
- shineout (opens new window) - demo (opens new window) - Chinese-friendly set of components: form elements, navigation, table, tree, tree select drop-down etc.
- react-materialize (opens new window) - Material design for react, powered by materializecss.
- mdbootstrap (opens new window) - React Bootstrap with Material Design

# Material Design

Avoid ❌ - NpmTrends (opens new window)
- mdbootstrap (opens new window) - React Bootstrap with Material Design
- react-materialize (opens new window) - Material design for react, powered by materializecss.
Deprecated / old ❌
- react-essence (opens new window) - Essence - The Essential Material Design Framework.
- react-toolbox (opens new window) - A set of React components implementing Google's Material Design.

# Mobile

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

# Component Collections

react-admin (opens new window) - Build admin user experiences on top of REST and GraphQL services.
rsuite (opens new window) - demo/docs (opens new window) - Suite of components for "enterprise system products".
Deprecated / old
- dataminr-react-components (opens new window) - Collection of reusable React Components and utility functions.
- shards-react (opens new window) - docs/demo (opens new window) - A beautiful and modern React design system. Freemium 💰
- aframe-react (opens new window) - Build virtual reality experiences with A-Frame and React.
Avoid ❌
- react-desktop (opens new window) - React UI Components for macOS Sierra and Windows 10.
- matrix-card (opens new window) - demo (opens new window) - Simplest possible component to generate matrix rain style cards.
- refine (opens new window) - demo (opens new window) - docs (opens new window) - Build data-intensive applications in no time. It ships with Ant Design System, an enterprise-level UI toolkit.

# UI Utilities

# Reporter

Report computed styles

# Visibility Reporter

Report when a component becomes visible/hidden

react-intersection-observer ⭐ (opens new window) - React implementation of the Intersection Observer API.
Avoid ❌
- react-waypoint (opens new window) - A React component to execute a function whenever you scroll to an element.
- react-visibility-sensor (opens new window) - Sensor component.

# Measurement Reporter

Determine and report measurements of an element

react-sizeme ⭐⭐ (opens new window) - Make your React Components aware of their width and height.
react-measure (opens new window) - Compute measurements of a React component.
react-height (opens new window) - Component-wrapper to determine and report children elements height.
Deprecated / old ❌
- react-component-queries (opens new window) - Provide props to your Components based on their Width and/or Height.
- react-container-dimensions (opens new window) - Wrapper component that detects element resize.
- react-dimensions (opens new window) - React higher-order component to get dimensions of container.

# Device Input

Turn user input into actions

# Keyboard Events

react-hotkeys ⭐ (opens new window) - Declarative hotkey and focus area management for React.
Avoid ❌
- react-keydown (opens new window) - Lightweight keydown wrapper for React components.
- useKeyCapture (opens new window) - A custom hook to ease the key-press listeners of a target/global.
Deprecated / old ❌
- react-key-handler (opens new window) - React component to handle keyboard events.
- react-shortcuts (opens new window) - Manage keyboard shortcuts from one place.

# Scroll Events

Deprecated / old ❌
- react-scroll-components (opens new window) - A set of components that react to page scrolling.

# Touch Swipe

Deprecated / old ❌
- react-swipe (opens new window) - Swipe.js as a React component.

# Mouse Events

Deprecated / old ❌
- react-aim (opens new window) - Determine the cursor aim for triggering mouse events.
- react-hook-mighty-mouse (opens new window) - demo (opens new window) - Hook that tracks mouse events on selected element.

# Meta Tags

Set meta tags, <title>, children of <head>

react-helmet-async ⭐⭐ (opens new window) - Thread-safe Helmet for React 16+ and friends
react-helmet (opens new window) - A document head manager for React.
Deprecated / old ❌
- react-document-meta (opens new window) - HTML meta tags for React-based apps.
- react-document-title (opens new window) - Declarative, nested, stateful, isomorphic document.title for React.

# Portal

Render an element at an arbitrary DOM node

react-portal ⭐ (opens new window) - React component for transportation of modals, lightboxes, loading bars... to document.body.
Deprecated / old ❌
- react-gateway (opens new window) - Render React DOM into a new context (aka "Portal").
Avoid ❌
- react-layer-stack (opens new window) - Simple but ubiquitously powerful and agnostic layering system for React.

# Test User Behavior

A/B tests, experiments, ...

Deprecated / old ❌
- react-ab (opens new window) - Simple declarative and universal A/B testing component for React.
- react-experiments (opens new window) - 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

redux ⭐ (opens new window) - Predictable state container for JavaScript apps.
react-redux (opens new window) - Official React bindings for Redux.
reselect (opens new window) - Selector library for Redux.

Optional
Avoid ❌
- recoil (opens new window)
- effector-react (opens new window) - React bindings for effector, an effective multi-store state manager.
- cerebral (opens new window) - A state controller with its own debugger.
- fluxible (opens new window) - A pluggable container for universal flux applications.
- kea (opens new window) - High level architecture for React apps.
- react-i13n (opens new window) - A performant, scalable and pluggable approach to instrumenting your React application.
- resourcerer (opens new window) - Declarative data-fetching framework for REST APIs
Deprecated / old ❌
- flux (opens new window)
- reflux (opens new window) - A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux.
- redux-batched-actions (opens new window) - Reducer + action to reduce actions under a single subscriber notification.
- alt (opens new window) - Isomorphic flux implementation.
- redux-batched-subscribe (opens new window) - Store enhancer for which allows batching subscribe notifications.
- baobab-react (opens new window) - React integration for Baobab.
- fluorine-lib (opens new window) - Reactive state and side effect management for React using a single stream of actions.
- fluxxor (opens new window) - Flux architecture tools for React.
- react-3ducks (opens new window) - demo (opens new window) - Simple state management solution for React.
- react-controllables (opens new window) - Easily create controllable components.
- react-redux-provide (opens new window) - Bridges the gap between Redux and the declarative nature of GraphQL/Relay.
- shasta (opens new window) - Dead simple + opinionated toolkit for building redux/react applications.
- react-storage-hoc (opens new window) - demo (opens new window) - Higher-order components for working with localStorage and sessionStorage.

# Data Managing

immer ⭐ (opens new window) - Create the next immutable state by mutating the current one
Immutable.js (opens new window) - Immutable Data Collections for Javascript
Avoid ❌
- avers (opens new window) - A modern client-side model abstraction library
- baobab (opens new window) - JavaScript persistent and optionally immutable data tree with cursors
- baobab-react (opens new window) - React integration for Baobab
- immstruct (opens new window) - Immutable data structures with history for top-to-bottom properties in component based libraries like React
- extendable-immutable (opens new window) - Extend any Immutable.js data structure
- ReSub (opens new window) - A library for writing better React components and data stores
- WatermelonDB (opens new window) - 🍉 Next-gen database for powerful React and React Native apps that scales to 10,000s of records and remains fast
- RxDB (opens new window) - A realtime Database for JavaScript Applications
- Effector (opens new window) - Fast and powerful reactive state manager. Lets you write simple, fast and type safe code and manage reactive state with ease.
- reactn (opens new window) - React, but with built-in global state management
- ProppyJS (opens new window) - A tiny library for functional props composition
- tydel (opens new window) - Typed Models and Collections, with React bindings
- statty (opens new window) - A tiny and unobtrusive state management library for React and Preact apps
- Hydux (opens new window) - An Elm-Like state manager for React with "batteries included"
Deprecated / old ❌
- seamless-immutable (opens new window) - Immutable data structures for JavaScript which are backwards-compatible with normal JS Arrays and Objects
- cortex (opens new window) - A javascript library for centrally managing data with React
- imvvm (opens new window) - Immutable Model-View-ViewModel for React
- morearty.js (opens new window) - Better state management for React in pure JavaScript
- valuable (opens new window) - An immutable data store for React
- react-resolver (opens new window) - Isomorphic library to recursively lazy-load data for React components
- freezer-js (opens new window) - Lightweight and reactive immutable data structure for React

# Form Logic

react-hook-form ⭐ (opens new window) - React hooks for form validation without the hassle.
formik ⭐ (opens new window) - Build forms without tears and supports Validation in ease.
react-final-form (opens new window) - Subscription-based form state management
Optional
- formsy-react (opens new window) - A form input builder and validator for React JS.
- react-jsonschema-form (opens new window) - A React component for building Web forms from JSONSchema.
- uniforms (opens new window) - Bunch of React components and helpers to easily generate and validate forms
Deprecated / old ❌
- plexus-form (opens new window) - A dynamic form component for react using JSON-Schema.
- react-validation-mixin (opens new window) - Simple validation mixin (HoC) for React.
- formland (opens new window) - A simple, super-flexible, extensible config based form generator
- Winterfell (opens new window) - Generate complex, validated and extendable JSON-based forms in React
- Redux-Autoform (opens new window) - Create Redux-Forms dynamically out of metadata
- NeoForm (opens new window) - Modular HOCs for form state management and validation
- react-forms (opens new window) - Forms library for React
- valuelink (opens new window) - Full-featured two-way data binding with extended React links
- wingspan-forms (opens new window) - A dynamic form library for Facebook React
- newforms (opens new window) - Isomorphic form-handling for React
- formjs (opens new window) - A form generator for Reactjs
- react-form-builder (opens new window) - A Form Builder for React.js
- tcomb-form (opens new window) - UI library for developing forms writing less code
Avoid ❌
- Formily (opens new window) - Alibaba - High performance, extensible, and Typescript friendly
- data-driven-forms (opens new window) - A declarative way for building forms with all the functionality.
- formcat (opens new window) - A simple and easy way to control forms in React using the React Context API
- react-formawesome (opens new window) - Complex library for creating awesome forms.
- surveyjs (opens new window) - The advanced Survey and Form library
- react-reactive-form (opens new window) - Angular like reactive forms in React
- unform (opens new window) - ReactJS form library to create uncontrolled form structures with nested fields, validations and much more!
- react-formal (opens new window) - Better form validation and value management for React, Provides minimal wiring

# Router

react-router ⭐⭐ (opens new window) - Declarative routing for React
reach (opens new window) - Next Generation Routing for React
wouter (opens new window) - A minimalist-friendly ~1.3KB routing library. Nothing else but hooks.
Optional
- curi (opens new window) - JavaScript router for single-page applications
- universal-router (opens new window) - A simple middleware-style router for isomorphic JavaScript web apps
- redux-first-history (opens new window) - Redux First History - Redux history binding support react-router - @reach/router - wouter
Deprecated / old ❌
- react-breadcrumbs (opens new window) - Automatic breadcrumbs for React-Router.
- react-router-scroll (opens new window) - React Router scroll management.
- navi (opens new window) - Declarative, asynchronous routing for React
- cerebral-module-router (opens new window) - An opinionated URL change handler for Cerebral.
- monorouter (opens new window) - An isomorphic JS router.
- react-router-component (opens new window) - Declarative router component for React.
- redux-router (opens new window) - Redux bindings for React Router – keep your router state inside your Redux store.

# Props from server

Component properties asynchronously fetched over the network

Avoid ❌
- react-refetch (opens new window) - A simple, declarative, and composable way to fetch data for React components.
- axios-react (opens new window) - HTTP client component for React.
Deprecated / old ❌
- react-async (opens new window) - Asynchronously fetch data for React components.
- react-resolver (opens new window) - Async rendering & data-fetching for universal React applications.
- react-router-relay (opens new window) - Relay integration for React Router.
- redial (opens new window) - Universal data fetching and route lifecycle management for React etc.
- redux-async-connect (opens new window) - Request async data, store in redux state, and connect to your component.
- redux-connect (opens new window) - Provides decorator for resolving async props in react-router.

# Communication with server

apollo-client ⭐ (opens new window) - A simple caching client for any GraphQL server and UI framework.
react-relay (opens new window) - Relay is a JavaScript framework for building data-driven React applications.
Deprecated / old ❌
- react-apollo (opens new window) - React data container for the Apollo Client.
- adrenaline (opens new window) - Simple Relay alternative.
- cerebral-module-http (opens new window) - HTTP module for Cerebral.
- react-transmit (opens new window) - Relay-inspired library based on Promises instead of GraphQL.

# CSS / Style

classnames ⭐⭐ (opens new window) - A simple javascript utility for conditionally joining classNames together.
styled-components ⭐ (opens new window) - Visual primitives for the component age.
jss ⭐ (opens new window) - Authoring tool for CSS
inline-style-prefixer (opens new window) - Run-time Autoprefixer for Inline Style Objects.
emotion (opens new window) - Library designed for writing CSS styles with JavaScript
Optional
- react-responsive (opens new window) - Media queries in react for responsive design.
- radium (opens new window) - A set of tools to manage inline styles on React elements.
- linaria (opens new window) - Zero-Runtime CSS in JS
- stitches (opens new window) - CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience
Avoid ❌
- aesthetic (opens new window) - 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.
- react-container-query (opens new window) - Modular responsive component.
- paperclip (opens new window) - docs (opens new window) - Build UI primitivites with plain HTML & CSS.
Deprecated / old ❌
- aphrodite (opens new window) - It's inline styles, but they work!.
- react-css-modules (opens new window) - Seamless mapping of class names to CSS modules inside of React components.
- reactponsive (opens new window) - Responsive components and hooks.

# HTML Template

Deprecated / old ❌
- hyperx (opens new window) - Tagged template string virtual dom builder.
- jsx-control-statements (opens new window) - Neater If and For for React JSX.

# Isomorphic Apps

isomorphic-style-loader (opens new window) - Isomorphic CSS style loader for Webpack.
Avoid ❌
- webpack-isomorphic-tools (opens new window) - Server-side rendering for your Webpack-built applications (e.g. React).
Deprecated / old ❌
- hypernova (opens new window) - A service for server-side rendering your JavaScript views.
- isomorphic-relay (opens new window) - Adds server side rendering support to React Relay.
- react-server (opens new window) - React framework with server render for blazing fast page load.
- rill (opens new window) - Universal web application framework.

# Boilerplate

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

vite ⭐ (opens new window)
create-react-app ⭐ (opens new window) - Create React apps with no build configuration.
phoenix (opens new window) - A simple boilerplate that helps you make your react application with Server Side Rendering & Localization support.
Avoid ❌
- rockpack (opens new window) - Simple solution for creating React application with SSR, bundling, linting, testing within 5 minutes.
- crisp-react (opens new window) - Express integration in TypeScript with support for multiple SPAs and pitfall avoid ❌ance.
- create-react-dependency (opens new window) - Create react dependencies with no build configuration.
- react-enterprise-starter-kit (opens new window) - Highly Scalable and Performant Awesome React Starter Kit for an enterprise application with a very easy maintainable codebase.
- electron-react-boilerplate (opens new window) - Live editing development on desktop app.
- generator-starhackit (opens new window) - Full-stack starter kit.
- nwb (opens new window) - CLI tool and devDependency for React apps & components and npm modules.
Deprecated / old ❌
- essential-react (opens new window) - A minimal skeleton for building testable React apps using Babel.
- generator-react-webpack (opens new window) - Yeoman generator for ReactJS and Webpack.
- gluestick (opens new window) - GlueStick is a command line interface for quickly developing universal web apps.
- react-boilerplate (opens new window) - Quick packager-agnostic boilerplate for React modules using JSX.
- react-hot-boilerplate (opens new window) - Minimal live-editing boilerplate for your next ReactJS project.
- react-redux-universal-hot-example (opens new window) - A starter boilerplate for a universal webapp.
- reactuate (opens new window) - React/Redux stack (not a boilerplate kit).
- redux-cli (opens new window) - An opinionated CLI for building redux/react apps quicker.
- relay-fullstack (opens new window) - Relay Starter Kit.
- roc (opens new window) - Modern Application Development Ecosystem.
- universal-redux (opens new window) - An npm package that lets you jump right into coding React and Redux.
- express-react-boilerplate (opens new window) - A tool that helps programmers create Express & React projects easily base on react-cool-starter.

# Miscellaneous

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

# Utilities

qrcode.react (opens new window) - A <QRCode/> component for use with React.
Avoid ❌
- react-children-utilities (opens new window) - Extended utils for React.Children.
- react-middle-ellipsis (opens new window) - demo (opens new window) - Truncate long strings in the middle instead of the end.
Deprecated / old ❌
- react-media (opens new window) - A CSS media query component for React.
- react-translate-component (opens new window) - Multi-lingual/localized text content.

# i18n

Internationalization / L10n / localization / translation

react-i18next ⭐ (opens new window) - Internationalization for react done right. Using the i18next i18n ecosystem.
react-intl ⭐ (opens new window) - Internationalize React apps.
Avoid ❌
- react-localized (opens new window) - Internationalization for React components based on gettext format.
- react-intl-universal (opens new window) - demo (opens new window) Internationalize React apps. Not only for React.Component but also for Vanilla JS.
- js-lingui (opens new window) - docs (opens new window) – A readable, automated, and optimized (5 kb) internationalization for JavaScript.
Deprecated / old ❌
- react-translate-maker (opens new window) - Universal internationalization (i18n) open source library for React.

# Framework bindings / integrations

reCAPTCHA
- reaptcha (opens new window) - Clean, modern and simple React wrapper for Google reCAPTCHA
- react-captcha (opens new window) - A react.js reCAPTCHA for Google
- react-recaptcha-that-works (opens new window) - A reCAPTCHA bridge for React that works
Firebase
- reactfire (opens new window) - ReactJS mixin for easy Firebase integration
- firedux (opens new window) - Firebase + Redux for ReactJS
Backbone
- React.withBackbone (opens new window) - React 16 ready backbone binding
- Backbone React Component (opens new window)
- react-backbone (opens new window) - Backbone-aware mixins for react
- NestedReact (opens new window) - transparent integration with Backbone Views and NestedTypes models
- backbone-reaction (opens new window) - React, Backbone and then some
- react.backbone (opens new window) - Plugin for React to make Backbone migration easier
- reactbone (opens new window) - React extensions for Backbone
- backbone-react-ui (opens new window) - React components for use with backbone and backbone paginator
Threejs
- react-three-fiber (opens new window) - A react reconciler for threejs (web and react-native)
Others
- react-unity-webgl (opens new window) - Unity intergration with two-way communication using a built-in Event System.
- react-masonry-css (opens new window) - Fast Masonry layout powered by CSS, dependency free
- ReasonReact (opens new window)
- React Rails (opens new window)
- react-on-rails (opens new window) - Integration of React + Webpack + Rails to build Universal (Isomorphic) Apps.
- ReactJS.NET (opens new window)
- Reagent (opens new window) - A minimalistic ClojureScript interface to React.js
- scalajs-react (opens new window) - A guilty affair between Scala.js and Facebook's React
Avoid ❌
- react-lottie-player (opens new window) - demo (opens new window) - Declarative lottie animation player.
Deprecated / very old ❌
- react-three (opens new window) - React bindings to create and control a 3D scene using three.js
- react-three-renderer (opens new window) - Render into a three.js canvas using React
- react-threejs (opens new window) - Simplest bindings between React & Three.js
- coffee-react-transform (opens new window) - Provides React JSX support for Coffeescript
- sprockets-coffee-react (opens new window) - Sprockets preprocessor for CJSX
- ngReact (opens new window) - React Components in Angular
- react-kup (opens new window) - A simple, non-intrusive alternative to jsx for coffeescript
- react-bacon (opens new window) - A little module for using React with Bacon.js
- react-jade (opens new window) - Compile Jade to React JavaScript
- jade-react (opens new window) - Compile Jade templates to React.DOM expressions
- gulp-jade-react (opens new window) - Compile Jade templates into React de-sugared JSX with Gulp
- om (opens new window) - ClojureScript interface
- msx (opens new window) - React's JSX Transformer, tweaked to output calls to Mithril
- rx-react (opens new window) - Utilities to works with React in a RxJS
- react-masonry-mixin (opens new window) - Standalone mixin for Masonry (@desandro)
- react-packery-mixin (opens new window) - Standalone mixin for Packery (Metafizzy)
- Express React views (opens new window)
- React Page Middleware (opens new window)
- turbo-react (opens new window) - Combine Turbolinks and React to apply DOM diffs
- react-events (opens new window) - Declarative managed event bindings for react components
- react-mixin-manager (opens new window) - React mixin registration manager
- gsap-react-plugin (opens new window) - A GSAP plugin for tweening React.js component state
- react-topcoat by @plaxdan (opens new window) - Topcoat CSS components built with the React library
- react-topcoat by @arnemart (opens new window) - A collection of React components for Topcoat
- reactdown (opens new window) - Write React components using markdown syntax
- sbt-reactjs (opens new window) - React SBT Plugin using npm
- react-xtags (opens new window) - Using React to implement xtags
- React.hiccup (opens new window) - A complete replacement for JSX written in sweet.js
- react-with-di (opens new window) - A hacked prototype of React.js with DI
- jreact (opens new window) - React on server-side Java (with Rhino or Nashorn)
- react-play (opens new window) - Rendering React components in the Play Framework with JDK8's Nashorn
- react-clickdrag-mixin (opens new window) - ClickDrag mixin for React component
- Rewrite the Admin UI of KeystoneJS in React (opens new window)
- aframe-react (opens new window) - A-Frame VR + React
- react-d3-library (opens new window) - Open source library for using D3 in React.
- elm-react-component (opens new window) - A React component which wraps an Elm module to be used in a React application.
- react-elm-components (opens new window) - Write React components in Elm.
- gl-react (opens new window) - OpenGL / WebGL bindings for React to implement complex effects over images and content.
- react-famous (opens new window) - React bridge to Famo.us.
- react-localstorage (opens new window) - Simple componentized localstorage implementation for Facebook's React.
- reactive-elements (opens new window) - Allows to use React.js component as HTML element (web component).

# Integrations with Third Party Services

react-ga (opens new window) - React Google Analytics Module.
Avoid ❌
- react-google-autocomplete (opens new window) - Google Places API components and hooks.
- react-recaptcha (opens new window) - A react.js reCAPTCHA for Google.
Deprecated / old ❌
- react-google-analytics (opens new window) - Google analytics component.
- react-stripe-checkout (opens new window) - Load stripe's checkout.js as a react component. Easiest way to use checkout with React.
- redux-segment (opens new window) - Segment.io analytics integration for redux.

# Performance

# UI

Avoid ❌
- inferno (opens new window) - An extremely fast, React-like JavaScript library for building modern user interfaces.
Deprecated / old ❌
- react-fastclick (opens new window) - Fast Touch Events for React.
- react-static-container (opens new window) - Renders static content efficiently.

# Inspect

Deprecated / old ❌
- react-perf-tool (opens new window) - Debug performance of your React application.
- react-render-visualizer (opens new window) - Render visualizer for ReactJS.

# Lazy Load

Avoid ❌
- react-lazyload (opens new window) - Lazyload your Component, Image or anything matters the performance.
Deprecated / old ❌
- react-lazy-load (opens new window) - React component that renders children elements when they enter the viewport.
- react-infinite-grid (opens new window) - A React component which renders a grid of elements.
- react-infinite (opens new window) - A browser-ready efficient scrolling container based on UITableView.

# App Size

babel-plugin-transform-react-remove-prop-types (opens new window) - Remove unnecessary React propTypes.
Deprecated / old ❌
- react-lite (opens new window) - An implementation of React that optimizes for small script size.

# Server-Side Rendering

Avoid ❌
- iSSR (opens new window) - The easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State.
- react-esi (opens new window) - A library to boost SSR performance by exposing React components as Edge Side Includes (ESI) fragments

# Dev Tools

# Test

jest ⭐⭐ (opens new window) - Delightful JavaScript Testing Framework
@testing-library/react ⭐ (opens new window) - Simple and complete React DOM testing utilities
enzyme ⭐ (opens new window) - JavaScript Testing utilities for React
react-hooks-testing-library (opens new window) - React hooks testing utilities that encourage good testing practices
majestic (opens new window) - Zero config GUI for Jest
unexpected-react (opens new window) - Plugin for unexpected to enable testing the full React virtual DOM, and also the shallow renderer.
Deprecated / old ❌
- chai-enzyme (opens new window) - Chai.js assertions and convenience functions for testing React Components with enzyme.
- carte-blanche (opens new window) - An isolated development space with integrated fuzz testing for your components.
- react-unit (opens new window) - Lightweight unit test library for ReactJS.
- redux-ava (opens new window) - Write AVA tests for redux pretty quickly.
- redux-test-recorder (opens new window) - A redux middleware to automatically generate tests for reducers through ui interaction.
- rut (opens new window) - React testing made easy with react-test-renderer. Supports DOM and custom renderers.
- ui-harness (opens new window) - Create, isolate and test modular UI components in React.

# Redux

# Inspect

react-inspector ⭐ (opens new window) - Power of Browser DevTools inspectors right inside your React app.
Avoid ❌
- fluxguard (opens new window) - PROD change monitoring that highlights all DOM + design changes.
- reactotron (opens new window) - A CLI and OS X app for inspecting your React JS and React Native apps.
Deprecated / old ❌
- react-json-inspector (opens new window) - React JSON inspector component.

# Miscellaneous

Avoid ❌
- SimpleLocalize (opens new window) - Open source CLI tool for finding i18n keys in React projects.
- component-controls (opens new window) - demo (opens new window) - docs (opens new window) - A next-generation tool to create blazing-fast documentation sites.
- react-demo-tab-cli (opens new window) - CLI tool for creating demos of react components.
- standard-react (opens new window) - JavaScript Standard Style Guide.
Deprecated / old ❌
- react-heatpack (opens new window) - A 'heatpack' command for quick React development with webpack hot reloading.

# Miscellaneous

Avoid ❌
- DataFormsJS JSX Loader (opens new window) - Small JavaScript Compiler for quickly converting JSX to JS directly on a web page.
- jsonx (opens new window) - React JSON Syntax.
- react-blessed (opens new window) - A react renderer for blessed.
- jsondiffpatch-react (opens new window) - JSON diffing.
Deprecated / old ❌
- html-to-react-components (opens new window) - Extract annotated portions of HTML into React components as separate modules.
- htmltojsx (opens new window) - Automatically AJAXify plain HTML with the power of React. It's magic!.
- mozaik (opens new window) - Mozaïk is a tool based on nodejs / react / d3 / stylus to easily craft beautiful dashboards.

# Cloud Solutions

# Databases

Deprecated / old ❌
- crisp-bigquery (opens new window) - Full stack Google BigQuery with Express in TypeScript.
- react-server-routing-example (opens new window) - Universal client/server routing and data with AWS DynamoDB.

← Redux Awesome React →

# Awesome React Components

# Awesome Components (from awesome-react)

# UI Components

# Editable data grid / spreadsheet

# Table

# Infinite Scroll

# Overlay

# Notification

# Tooltip

# Menu (Avoid)

# Sticky (Avoid)

# Tabs

# Loader

# Carousel

# Buttons (Avoid)

# Collapse

# Chart

# Tree (Avoid)

# UI Navigation

# Custom Scrollbar

# Audio / Video

# Map

# Time / Date / Age

# Photo / Image

# Icons

# Paginator

# Markdown Viewer

# Canvas

# Miscellaneous

# Form Components

# Date / Time picker

# Emoji picker

# Input Types

# Autocomplete

# Select

# Color Picker

# Toggle

# Slider

# Radio Button

# Type Select

# Tag Input

# Autosize Input / Textarea

# Star Rating

# Drag and Drop

# Sortable List

# Rich Text Editor

# Markdown Editor

# Image Editing

# Form Component Collections

# Miscellaneous

# Syntax Highlight

# UI Layout

# UI Animation

# Parallax

# UI Frameworks - Component Libraries

# Material Design

# Mobile

# Component Collections

# UI Utilities

# Reporter

# Visibility Reporter

# Measurement Reporter

# Device Input

# Keyboard Events

# Scroll Events

# Touch Swipe

# Mouse Events

# Meta Tags

# Portal

# Test User Behavior

# Code Design

# Data Store

# Data Managing

# Form Logic

# Router

# Props from server

# Communication with server

# CSS / Style

# HTML Template

# Isomorphic Apps