@brillout, author of Vike — a fast Vite-based React framework that is flexible, lean, community-driven and dependable.
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.
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
🚀 react-toastify - demo - best bet out there at the moment. Hooks support. No refs.
react-confirm-lite - demo - is a lightweight, promise-based confirmation dialog for React with built-in Tailwind CSS support. It’s designed to be as simple to use as react-toastify, while remaining fully customizable.
react-vision-camera - Camera component for React using getUserMedia. We can use this component for computer vision tasks like barcode scanning, text recognition, etc.
react-barcode-qrcode-scanner - Barcode and QR code scanner component for React. It uses react-vision-camera to access the camera and Dynamsoft Barcode Reader to read barcodes.
Map
google-map-react - Universal google map react component, allows render react components on the google map.
mapkit - A library for integrating Apple Maps using MapKit JS, with annotations, overlays, and search.
pigeon-maps - demo - ReactJS Maps without external dependencies.
react-geosuggest - A React autosuggest for the Google Maps Places API.
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-mouse-select - Demo A component that allows selecting DOM elements by moving the mouse
Set meta tags, , children of <head></em></p>
<ul>
<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>
<h3 id="portal" class="markdown_anchors"><a name="#portal" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Portal</h3><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>
<h3 id="test user behavior" class="markdown_anchors"><a name="#test user behavior" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Test User Behavior</h3><p><em>A/B tests, experiments, …</em></p>
<ul>
<li><a href="https://github.com/HubSpot/react-experiments">react-experiments</a> - React components for implementing UI experiments.</li>
</ul>
<h2 id="code design" class="markdown_anchors"><a name="#code design" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Code Design</h2><p><strong><a href="#table-of-contents"><code>Back to top ⬆️</code></a></strong></p>
<p><em>Libraries that help with code design</em></p>
<h3 id="data store" class="markdown_anchors"><a name="#data store" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Data Store</h3><p><em>Data flow / data management / data stores / components state / data flow</em></p>
<ul>
<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/fireproof-storage/fireproof">fireproof</a> - <a href="https://fireproof.storage/try-free/">demo</a> - <a href="https://use-fireproof.com/docs/welcome">docs</a> Pure JS, zero dependency, CRDT database - runs in the browser and connects to any cloud or backend</li>
<li><a href="https://rxdb.info/">RxDB</a> - <a href="https://github.com/pubkey/rxdb/tree/master/examples/react">demo</a> - <a href="https://rxdb.info/quickstart.html">docs</a> A fast, local first, reactive Database for JavaScript Applications</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/mariusandra/kea">kea</a> - High level architecture for React apps.</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/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/reactjs/redux">redux</a> - Predictable state container for JavaScript apps.</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/lukasbach/synergies">synergies</a> - <a href="https://synergies.js.org">docs</a> A performant and distributed context-state library for creating reusable React state logic by synergyzing atomar context pieces.</li>
<li><a href="https://zustand.surge.sh/">zustand</a> - <a href="https://github.com/pmndrs/zustand">docs</a> - A fast bearbones state-management solution using simplified flux principles and boilerplate-free hook api.</li>
<li><a href="https://github.com/teafuljs/teaful">teaful</a> - Tiny, easy and powerful React state management</li>
</ul>
<h3 id="form logic" class="markdown_anchors"><a name="#form logic" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Form Logic</h3><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/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/phormal/phormal">Phormal</a> - <a href="https://phormal.dev/getting-started/react">Docs & Demos</a> - Responsive, multilingual forms with built-in validation, support for dark mode and right-to-left languages.</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/0529bill/react-client-validation">react-client-validation</a> - Simple and super lightweight validation 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>
<li><a href="https://github.com/luoanb/hook-form-react">hook-form-react</a> - <a href="https://luoanb.github.io/hook-form-react">docs</a> - A lightweight, dependency-free solution React hooks for form validation.</li>
</ul>
<h3 id="router" class="markdown_anchors"><a name="#router" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Router</h3><ul>
<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/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>
<li><a href="https://github.com/TanStack/router">tanstack-router</a> - Type-safe router with built-in caching & URL state management</li>
</ul>
<h3 id="props from server" class="markdown_anchors"><a name="#props from server" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Props from server</h3><p><em>Component properties asynchronously fetched over the network</em></p>
<ul>
<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/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>
<h3 id="communication with server" class="markdown_anchors"><a name="#communication with server" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Communication with server</h3><ul>
<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/facebook/relay">react-relay</a> - Relay is a JavaScript framework for building data-driven React applications.</li>
<li><a href="https://github.com/TanStack/query">query</a> - <a href="https://tanstack.com/query/v4">docs</a> Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue.</li>
</ul>
<h3 id="css style" class="markdown_anchors"><a name="#css style" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>CSS / Style</h3><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/rofrischmann/inline-style-prefixer">inline-style-prefixer</a> - Run-time Autoprefixer for Inline Style Objects.</li>
<li><a href="https://github.com/richard-unterberg/classmatejs/tree/master/packages/react">@classmatejs/react</a> - A class name focused component builder with a syntax like styled components and the sugar of cva’s variants.</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/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>
<li><a href="https://github.com/stitchesjs/stitches">stitches</a> - CSS-in-JS with near-zero runtime, SSR, multi-variant support.</li>
</ul>
<h3 id="html template" class="markdown_anchors"><a name="#html template" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>HTML Template</h3><ul>
<li><a href="https://github.com/AlexGilleran/jsx-control-statements">jsx-control-statements</a> - Neater If and For for React JSX.</li>
</ul>
<h3 id="isomorphic apps" class="markdown_anchors"><a name="#isomorphic apps" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Isomorphic Apps</h3><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/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>
<h3 id="boilerplate" class="markdown_anchors"><a name="#boilerplate" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Boilerplate</h3><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/Nilanth/cra-template-redux-auth-starter">cra-template-redux-auth-starter</a> - A Redux auth starter boilerplate for CRA.</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/elegantframework/elegant-cli">elegant</a> - <a href="https://www.elegantframework.com/docs/installation">docs</a> - <a href="https://www.elegantframework.com/">demo</a> - A simple React framework for rapidly building beautiful and expressive web applications with Next.js, Tailwind CSS, and Markdown loading.</li>
<li><a href="https://github.com/brocoders/extensive-react-boilerplate">extensive-react-boilerplate</a> - Boilerplate with Next.js, Auth (Sign in, Sign up, Reset password, Confirm email, Refresh Token), Material UI, React Hook Form, I18N, File uploads (support local and Amazon S3 drivers), Tests, CI.</li>
<li><a href="https://github.com/FredericHeem/starhackit">generator-starhackit</a> - Full-stack starter kit.</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://nx.dev">nx</a> - Next generation build system with first class monorepo support and powerful integrations.</li>
<li><a href="https://github.com/moishinetzer/pbandj">PBandJ</a> - Zero-Config Reusable Component Framework.</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/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/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://tailwind-admin.com/">Tailwindadmin</a> - Free Shadcn Dashboard Template Built On React and Tailwind CSS comes with Multiple-framework support</li>
</ul>
<h3 id="miscellaneous" class="markdown_anchors"><a name="#miscellaneous" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Miscellaneous</h3><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/behnamrhp/React-VVM">react-vvm</a> - A new approach to MVVM in React, to enforce clean separation of concerns, reduce boilerplate, and automatic re-render optimization for scalable UI logic.</li>
<li><a href="https://github.com/desko27/react-call">react-call</a> - Call your React components.</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/salvoravida/react-universal-hooks">react-universal-hooks</a> - 🎉 support react hooks everywhere (Functional or Class Component).</li>
</ul>
<h2 id="utilities" class="markdown_anchors"><a name="#utilities" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Utilities</h2><p><strong><a href="#table-of-contents"><code>Back to top ⬆️</code></a></strong></p>
<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/bitjson/qr-code"><code><qr-code></code></a> – A no-dependencies, customizable, animate-able, SVG-based <code><qr-code></code> element.</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>
<h3 id="i18n" class="markdown_anchors"><a name="#i18n" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>i18n</h3><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/fakundo/react-localized">react-localized</a> - Internationalization for React components based on <code>gettext</code> format.</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/tolgee/tolgee-js/tree/main/packages/react">@tolgee/react</a> - <a href="https://tolgee.io/docs/web/using_with_react/installation">docs</a> – Web-based localization tool enabling users to translate directly in the React app they develop</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>
<h3 id="framework bindings integrations" class="markdown_anchors"><a name="#framework bindings integrations" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Framework bindings / integrations</h3><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 Famo.us.</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>
<h3 id="integrations with third party services" class="markdown_anchors"><a name="#integrations with third party services" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Integrations with Third Party Services</h3><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> - Segment.io analytics integration for redux.</li>
<li><a href="https://github.com/Nilanth/react-slack-notification">react-slack-notification</a> - Send messages and error logs to a Slack channel directly.</li>
<li><a href="https://github.com/csfrequency/react-firebase-hooks">react-firebase-hooks</a> - Hooks to integrate firebase in your application.</li>
</ul>
<h2 id="performance" class="markdown_anchors"><a name="#performance" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Performance</h2><p><strong><a href="#table-of-contents"><code>Back to top ⬆️</code></a></strong></p>
<h3 id="ui" class="markdown_anchors"><a name="#ui" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>UI</h3><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>
<h4 id="inspect" class="markdown_anchors"><a name="#inspect" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Inspect</h4><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>
<h4 id="lazy load" class="markdown_anchors"><a name="#lazy load" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Lazy Load</h4><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>
<h3 id="app size" class="markdown_anchors"><a name="#app size" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>App Size</h3><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>
<h3 id="serverside rendering" class="markdown_anchors"><a name="#serverside rendering" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Server-Side Rendering</h3><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>
<h2 id="dev tools" class="markdown_anchors"><a name="#dev tools" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Dev Tools</h2><p><strong><a href="#table-of-contents"><code>Back to top ⬆️</code></a></strong></p>
<h3 id="test" class="markdown_anchors"><a name="#test" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Test</h3><ul>
<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/bruderstein/unexpected-react">unexpected-react</a> - Plugin for unexpected to enable testing the full React virtual DOM, and also the shallow renderer.</li>
<li><a href="https://github.com/microsoft/playwright">playwright</a> enables reliable end-to-end testing for modern web apps.</li>
</ul>
<h3 id="redux" class="markdown_anchors"><a name="#redux" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Redux</h3><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>
<h3 id="inspect" class="markdown_anchors"><a name="#inspect" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Inspect</h3><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/reactotron/reactotron">reactotron</a> - A CLI and OS X app for inspecting your React JS and React Native apps.</li>
<li><a href="https://taillens.io">Tail Lens</a> - Tailwind editor in browser : Inspect, edit, preview, copy.</li>
</ul>
<h3 id="miscellaneous" class="markdown_anchors"><a name="#miscellaneous" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Miscellaneous</h3><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/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>
<li><a href="https://github.com/zheeeng/react-device-frameset">react-device-frameset</a> - React device frameset component.</li>
</ul>
<h2 id="miscellaneous" class="markdown_anchors"><a name="#miscellaneous" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Miscellaneous</h2><p><strong><a href="#table-of-contents"><code>Back to top ⬆️</code></a></strong></p>
<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>
<li><a href="https://github.com/bluepeter/jsondiffpatch-react">jsondiffpatch-react</a> - JSON diffing.</li>
<li><a href="https://github.com/vvo/iron-session">iron-session</a> - Secure, stateless, and cookie-based session library.</li>
</ul>
<h3 id="static website generator" class="markdown_anchors"><a name="#static website generator" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Static Website Generator</h3><ul>
<li><a href="https://github.com/gatsbyjs/gatsby">gatsby</a> - Transform plain text into dynamic blogs and websites using React.js.</li>
</ul>
<h2 id="cloud solutions" class="markdown_anchors"><a name="#cloud solutions" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Cloud Solutions</h2><p><strong><a href="#table-of-contents"><code>Back to top ⬆️</code></a></strong></p>
<h3 id="databases" class="markdown_anchors"><a name="#databases" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Databases</h3><ul>
<li><a href="https://github.com/bcms/cms">BCMS</a> - API-based, open-source, self-hostable content management system for Gatsby, Nuxt and Next.</li>
<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>
🚀 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:
Look for a 🚀 for truly amazing projects. And look for quickie maintainer commentary and reviews in (italic parens) after some listings of note.
See also: Awesome React Frameworks.
Maintainers:
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.
Table of Contents
UI Components
Back to top ⬆️Editable data grid / spreadsheet
Table
ka-table - demo - Customizable table component with sorting, filtering, grouping, virtualization, editing etc.
mantine-datatable - demo/docs - Lightweight table component for Mantine UI applications, with lots of features
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
TanStack Table - demo - Headless UI for building powerful tables & datagrids
react-table-library - demo - React Table Library – an almost headless table library – for building better tables.
rsuite-table - demo/docs - A table component that supports virtualized.
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.
simple-table - demo - docs - Lightweight, fast and feature rich. Sorting/filtering, virtualization, tree data, nested headers, pinned columns, customized styling etc.
KendoReact Grid - Powerful data grid component with 100+ ready-to-use features like paging, sorting, export to Excel, and more.
Material-React-Table - A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript
Infinite Scroll
Overlay
Display overlay / modal / alert / dialog / lightbox / popup
Notification
Toaster / snackbar — Notify the user with a modeless temporary little popup
Tooltip
Menu
Menus / sidebars
Sticky
Fixed headers / scroll-up headers / sticky elements
Tabs
Loader
Loaders / spinners / progress bars — Let the user know that something is loading
Captcha
Carousel
Buttons
Collapse
Chart
Display data in charts / graphs / diagrams
Command palette
Tree
Display a tree data structure
UI Navigation
Ways to navigate views
Custom Scrollbar
Audio / Video
Map
Time / Date / Age
Display time / date / age
*** time agostatement. eg: ‘3 hours ago’.Photo / Image
Display images / photos
Icons
Display icons / icon set / emojis
Paginator
Display a control element to paginate
Markdown Viewer
Display parsed markdow source
Canvas
Sketch input using Canvas or SVG
Screenshot
Miscellaneous
Form Components
Let the user enter data
Date / Time picker
Date picker / time picker / datetime picker / date range picker
react-select.Emoji picker
Input Types
Masked inputs, specialized inputs; email / telephone number / credit card / etc.
Autocomplete
Autosuggest / autocomplete / typeahead
Select
Color Picker
Toggle
Slider
Radio Button
Type Select
Let the user select something (e.g. a tag) while typing
Tag Input
Let the user add multiple tags in a single input
Autosize Input / Textarea
Star Rating
Drag and Drop
Sortable List
Let the user define an order on a list
Rich Text Editor
Markdown Editor
Image Editing
Image manipulation
react-advanced-cropper.Form Component Collections
Miscellaneous
Syntax Highlight
UI Layout
Back to top ⬆️Components to layout the app’s UI
UI Animation
Back to top ⬆️Animate transitions
Parallax
UI Frameworks
Back to top ⬆️Responsive
Set of components + responsive layout system
Material Design
Mobile
Component Collections
UI Utilities
Back to top ⬆️Reporter
Report computed styles
Visibility Reporter
Report when a component becomes visible/hidden
Measurement Reporter
Determine and report measurements of an element
Device Input
Turn user input into actions
Keyboard Events
Scroll Events
Touch Swipe
Mouse Events
Meta Tags
Set meta tags,, children of <head></em></p>
<ul>
<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>
<h3 id="portal" class="markdown_anchors"><a name="#portal" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Portal</h3><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>
<h3 id="test user behavior" class="markdown_anchors"><a name="#test user behavior" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Test User Behavior</h3><p><em>A/B tests, experiments, …</em></p>
<ul>
<li><a href="https://github.com/HubSpot/react-experiments">react-experiments</a> - React components for implementing UI experiments.</li>
</ul>
<h2 id="code design" class="markdown_anchors"><a name="#code design" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Code Design</h2><p><strong><a href="#table-of-contents"><code>Back to top ⬆️</code></a></strong></p>
<p><em>Libraries that help with code design</em></p>
<h3 id="data store" class="markdown_anchors"><a name="#data store" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Data Store</h3><p><em>Data flow / data management / data stores / components state / data flow</em></p>
<ul>
<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/fireproof-storage/fireproof">fireproof</a> - <a href="https://fireproof.storage/try-free/">demo</a> - <a href="https://use-fireproof.com/docs/welcome">docs</a> Pure JS, zero dependency, CRDT database - runs in the browser and connects to any cloud or backend</li>
<li><a href="https://rxdb.info/">RxDB</a> - <a href="https://github.com/pubkey/rxdb/tree/master/examples/react">demo</a> - <a href="https://rxdb.info/quickstart.html">docs</a> A fast, local first, reactive Database for JavaScript Applications</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/mariusandra/kea">kea</a> - High level architecture for React apps.</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/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/reactjs/redux">redux</a> - Predictable state container for JavaScript apps.</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/lukasbach/synergies">synergies</a> - <a href="https://synergies.js.org">docs</a> A performant and distributed context-state library for creating reusable React state logic by synergyzing atomar context pieces.</li>
<li><a href="https://zustand.surge.sh/">zustand</a> - <a href="https://github.com/pmndrs/zustand">docs</a> - A fast bearbones state-management solution using simplified flux principles and boilerplate-free hook api.</li>
<li><a href="https://github.com/teafuljs/teaful">teaful</a> - Tiny, easy and powerful React state management</li>
</ul>
<h3 id="form logic" class="markdown_anchors"><a name="#form logic" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Form Logic</h3><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/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/phormal/phormal">Phormal</a> - <a href="https://phormal.dev/getting-started/react">Docs & Demos</a> - Responsive, multilingual forms with built-in validation, support for dark mode and right-to-left languages.</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/0529bill/react-client-validation">react-client-validation</a> - Simple and super lightweight validation 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>
<li><a href="https://github.com/luoanb/hook-form-react">hook-form-react</a> - <a href="https://luoanb.github.io/hook-form-react">docs</a> - A lightweight, dependency-free solution React hooks for form validation.</li>
</ul>
<h3 id="router" class="markdown_anchors"><a name="#router" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Router</h3><ul>
<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/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>
<li><a href="https://github.com/TanStack/router">tanstack-router</a> - Type-safe router with built-in caching & URL state management</li>
</ul>
<h3 id="props from server" class="markdown_anchors"><a name="#props from server" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Props from server</h3><p><em>Component properties asynchronously fetched over the network</em></p>
<ul>
<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/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>
<h3 id="communication with server" class="markdown_anchors"><a name="#communication with server" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Communication with server</h3><ul>
<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/facebook/relay">react-relay</a> - Relay is a JavaScript framework for building data-driven React applications.</li>
<li><a href="https://github.com/TanStack/query">query</a> - <a href="https://tanstack.com/query/v4">docs</a> Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue.</li>
</ul>
<h3 id="css style" class="markdown_anchors"><a name="#css style" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>CSS / Style</h3><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/rofrischmann/inline-style-prefixer">inline-style-prefixer</a> - Run-time Autoprefixer for Inline Style Objects.</li>
<li><a href="https://github.com/richard-unterberg/classmatejs/tree/master/packages/react">@classmatejs/react</a> - A class name focused component builder with a syntax like styled components and the sugar of cva’s variants.</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/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>
<li><a href="https://github.com/stitchesjs/stitches">stitches</a> - CSS-in-JS with near-zero runtime, SSR, multi-variant support.</li>
</ul>
<h3 id="html template" class="markdown_anchors"><a name="#html template" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>HTML Template</h3><ul>
<li><a href="https://github.com/AlexGilleran/jsx-control-statements">jsx-control-statements</a> - Neater If and For for React JSX.</li>
</ul>
<h3 id="isomorphic apps" class="markdown_anchors"><a name="#isomorphic apps" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Isomorphic Apps</h3><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/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>
<h3 id="boilerplate" class="markdown_anchors"><a name="#boilerplate" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Boilerplate</h3><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/Nilanth/cra-template-redux-auth-starter">cra-template-redux-auth-starter</a> - A Redux auth starter boilerplate for CRA.</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/elegantframework/elegant-cli">elegant</a> - <a href="https://www.elegantframework.com/docs/installation">docs</a> - <a href="https://www.elegantframework.com/">demo</a> - A simple React framework for rapidly building beautiful and expressive web applications with Next.js, Tailwind CSS, and Markdown loading.</li>
<li><a href="https://github.com/brocoders/extensive-react-boilerplate">extensive-react-boilerplate</a> - Boilerplate with Next.js, Auth (Sign in, Sign up, Reset password, Confirm email, Refresh Token), Material UI, React Hook Form, I18N, File uploads (support local and Amazon S3 drivers), Tests, CI.</li>
<li><a href="https://github.com/FredericHeem/starhackit">generator-starhackit</a> - Full-stack starter kit.</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://nx.dev">nx</a> - Next generation build system with first class monorepo support and powerful integrations.</li>
<li><a href="https://github.com/moishinetzer/pbandj">PBandJ</a> - Zero-Config Reusable Component Framework.</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/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/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://tailwind-admin.com/">Tailwindadmin</a> - Free Shadcn Dashboard Template Built On React and Tailwind CSS comes with Multiple-framework support</li>
</ul>
<h3 id="miscellaneous" class="markdown_anchors"><a name="#miscellaneous" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Miscellaneous</h3><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/behnamrhp/React-VVM">react-vvm</a> - A new approach to MVVM in React, to enforce clean separation of concerns, reduce boilerplate, and automatic re-render optimization for scalable UI logic.</li>
<li><a href="https://github.com/desko27/react-call">react-call</a> - Call your React components.</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/salvoravida/react-universal-hooks">react-universal-hooks</a> - 🎉 support react hooks everywhere (Functional or Class Component).</li>
</ul>
<h2 id="utilities" class="markdown_anchors"><a name="#utilities" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Utilities</h2><p><strong><a href="#table-of-contents"><code>Back to top ⬆️</code></a></strong></p>
<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/bitjson/qr-code"><code><qr-code></code></a> – A no-dependencies, customizable, animate-able, SVG-based <code><qr-code></code> element.</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>
<h3 id="i18n" class="markdown_anchors"><a name="#i18n" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>i18n</h3><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/fakundo/react-localized">react-localized</a> - Internationalization for React components based on <code>gettext</code> format.</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/tolgee/tolgee-js/tree/main/packages/react">@tolgee/react</a> - <a href="https://tolgee.io/docs/web/using_with_react/installation">docs</a> – Web-based localization tool enabling users to translate directly in the React app they develop</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>
<h3 id="framework bindings integrations" class="markdown_anchors"><a name="#framework bindings integrations" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Framework bindings / integrations</h3><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 Famo.us.</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>
<h3 id="integrations with third party services" class="markdown_anchors"><a name="#integrations with third party services" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Integrations with Third Party Services</h3><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> - Segment.io analytics integration for redux.</li>
<li><a href="https://github.com/Nilanth/react-slack-notification">react-slack-notification</a> - Send messages and error logs to a Slack channel directly.</li>
<li><a href="https://github.com/csfrequency/react-firebase-hooks">react-firebase-hooks</a> - Hooks to integrate firebase in your application.</li>
</ul>
<h2 id="performance" class="markdown_anchors"><a name="#performance" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Performance</h2><p><strong><a href="#table-of-contents"><code>Back to top ⬆️</code></a></strong></p>
<h3 id="ui" class="markdown_anchors"><a name="#ui" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>UI</h3><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>
<h4 id="inspect" class="markdown_anchors"><a name="#inspect" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Inspect</h4><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>
<h4 id="lazy load" class="markdown_anchors"><a name="#lazy load" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Lazy Load</h4><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>
<h3 id="app size" class="markdown_anchors"><a name="#app size" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>App Size</h3><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>
<h3 id="serverside rendering" class="markdown_anchors"><a name="#serverside rendering" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Server-Side Rendering</h3><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>
<h2 id="dev tools" class="markdown_anchors"><a name="#dev tools" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Dev Tools</h2><p><strong><a href="#table-of-contents"><code>Back to top ⬆️</code></a></strong></p>
<h3 id="test" class="markdown_anchors"><a name="#test" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Test</h3><ul>
<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/bruderstein/unexpected-react">unexpected-react</a> - Plugin for unexpected to enable testing the full React virtual DOM, and also the shallow renderer.</li>
<li><a href="https://github.com/microsoft/playwright">playwright</a> enables reliable end-to-end testing for modern web apps.</li>
</ul>
<h3 id="redux" class="markdown_anchors"><a name="#redux" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Redux</h3><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>
<h3 id="inspect" class="markdown_anchors"><a name="#inspect" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Inspect</h3><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/reactotron/reactotron">reactotron</a> - A CLI and OS X app for inspecting your React JS and React Native apps.</li>
<li><a href="https://taillens.io">Tail Lens</a> - Tailwind editor in browser : Inspect, edit, preview, copy.</li>
</ul>
<h3 id="miscellaneous" class="markdown_anchors"><a name="#miscellaneous" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Miscellaneous</h3><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/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>
<li><a href="https://github.com/zheeeng/react-device-frameset">react-device-frameset</a> - React device frameset component.</li>
</ul>
<h2 id="miscellaneous" class="markdown_anchors"><a name="#miscellaneous" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Miscellaneous</h2><p><strong><a href="#table-of-contents"><code>Back to top ⬆️</code></a></strong></p>
<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>
<li><a href="https://github.com/bluepeter/jsondiffpatch-react">jsondiffpatch-react</a> - JSON diffing.</li>
<li><a href="https://github.com/vvo/iron-session">iron-session</a> - Secure, stateless, and cookie-based session library.</li>
</ul>
<h3 id="static website generator" class="markdown_anchors"><a name="#static website generator" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Static Website Generator</h3><ul>
<li><a href="https://github.com/gatsbyjs/gatsby">gatsby</a> - Transform plain text into dynamic blogs and websites using React.js.</li>
</ul>
<h2 id="cloud solutions" class="markdown_anchors"><a name="#cloud solutions" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Cloud Solutions</h2><p><strong><a href="#table-of-contents"><code>Back to top ⬆️</code></a></strong></p>
<h3 id="databases" class="markdown_anchors"><a name="#databases" class="anchors"><i class="iconfont icon-lianjieicon font-14"></i></a>Databases</h3><ul>
<li><a href="https://github.com/bcms/cms">BCMS</a> - API-based, open-source, self-hostable content management system for Gatsby, Nuxt and Next.</li>
<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>