项目作者: brillout

项目描述 :
React组件和库目录
高级语言:
项目地址: git://github.com/brillout/awesome-react-components.git
创建时间: 2016-06-24T15:19:33Z
项目社区:https://github.com/brillout/awesome-react-components

开源协议:Creative Commons Zero v1.0 Universal

下载


🚀 Absolutely Awesome React Components & Libraries

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

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

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

See also: Awesome React Frameworks.

Maintainers:

  • @petebray, author of Fluxguard — monitor PROD website changes.
  • @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.

Table of Contents

UI Components

Back to top ⬆️

Editable data grid / spreadsheet

  • fortune-sheet - An online spreedsheet component that provides out-of-the-box features just like Excel.
  • AG Grid - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components.
  • gigatables-react - Sorting, pagination/infinite scroll, global/column search, AJAX CRUD, and more.
  • MUI X Data grid - demo/docs - Fast and customizable data grid with advanced features for power users and complex use cases.
  • react-data-grid - Excel-like grid.
  • revo-grid - demo/docs - Powerfull Data Grid for React / AngularJS / Vue / Web Components with advanced customization.
  • ReactGrid - demo/docs - Add spreadsheet-like behavior to your app
  • jqwidgets-react-grid - Filtering, Pagination, Grouping, Export to Excel, PDF, CRUD and more.

Table

  • 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.
  • sematable - Client side sorting, pagination, and text filter for redux/react based apps.
  • DevExtreme React Grid - High-performance plugin-based data grid for Bootstrap and Material Design.
  • Smart React Grid - Fast and feature-complete data grid with Material Design.
  • KendoReact Grid - Powerful data grid component with 100+ ready-to-use features like paging, sorting, export to Excel, and more.

  • Material-React-Table - A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript

  • AG Grid - The Best JavaScript Grid in the World

Infinite Scroll

  • @egjs/react-infinitegrid - @egjs/react-infinitegrid">npm - demo - A module used to arrange card elements including content infinitely according to various layout types.
  • react-lazyload - Lazyload your Component, Image or anything else where the performance matters.
  • react-list - A versatile infinite scroll React component.
  • @af-utils/virtual - demo/docs - Render large scrollable lists and grids.
  • react-window - demo - React components for efficiently rendering large lists and tabular data
  • virtua - demo - A zero-config, fast and small (~3kB) virtual list component for React, Vue and Solid.

Overlay

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

  • react-aria-modal - A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.
  • react-modal - Accessible modal dialog component for React.
  • 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

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

Buttons

Collapse

Chart

Display data in charts / graphs / diagrams

Command palette

  • cmdk - Fast, composable, unstyled command menu for React.
  • kbar - demo - Fast, portable, and extensible cmd+k interface.

Tree

Display a tree data structure

  • react-arborist - demo - A Full-Featured Tree View: headless, virtualized, multi-selectable, drag-n-drop, keyboard navigation, search
  • react-complex-tree - demo - docs - Unopinionated Accessible Tree Component with Multi-Select, Drag-And-Drop and Search
  • react-treeview - Easy, light, flexible tree view made with React.
  • he-tree-react - demo - docs - Tree, customizable UI, flat data, tree data, drag-n-drop, placeholder for drop, foldable, checkbox, virtualized.

UI Navigation

Ways to navigate views

Custom Scrollbar

Audio / Video

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

Time / Date / Age

Display time / date / age

Photo / Image

Display images / photos

Icons

Display icons / icon set / emojis

  • iconify-react - Over 40k icons from 50+ icon sets, including all popular icon and emoji sets.
  • react-icons - Svg react icons of popular icon packs using ES6 imports.
  • react-open-doodles - Awesome free illustrations as react components.
  • react-icomoon - With react-icomoon you can easily use the icons you have selected or created in icomoon.
  • tabler-icons-react - A set of over 450 free MIT-licensed high-quality SVG icons.
  • Lucide - Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.

Paginator

Display a control element to paginate

Markdown Viewer

Display parsed markdow source

Canvas

Sketch input using Canvas or SVG

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

Screenshot

  • html2canvas - Take screenshots of any part of your web page using Javascript.

Miscellaneous

Form Components

Let the user enter data

Date / Time picker

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

Emoji picker

Input Types

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

Autocomplete

Autosuggest / autocomplete / typeahead

Select

Color Picker

  • coloreact - A tiny Color Picker for React.
  • react-color - Is a tiny color picker widget component for React apps.
  • react-colorful - A tiny (2,5 KB), dependency-free, fast and accessible color picker component.
  • react-input-color - React input color component with hsv color picker.

Toggle

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

  • react-beautiful-dnd - Beautiful and accessible drag and drop for lists with React
  • react-dnd - Drag and Drop for React.
  • react-drag-sizing - “Drag to resize” (sizing) as React Component.
  • react-draggable - React draggable component.
  • react-dragula - Drag and drop so simple it hurts.
  • react-dropzone - Simple HTML5 drag-drop zone with React.js.
  • react-movable - Accessible and minimalistic (<4kB gzipped) library for vertical drag and drop in lists and tables.
  • react-sortable-pane - Sortable and resizable pane component for React.
  • neodrag - Multi-framework libraries for dragging. Choose your framework, the dragging API behavior will stay the same.

Sortable List

Let the user define an order on a list

Rich Text Editor

Markdown Editor

Image Editing

Image manipulation

Form Component Collections

Miscellaneous

  • @anatoliygatt/numeric-stepper - demo - A fully themeable and accessible numeric stepper component.
  • interweave - React library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more.
  • react-designer - Easy to configure, lightweight, editable vector graphics in your react components.
  • react-upload-gallery - React for Upload Image Gallery. Drag & Drop, Sortable, Customize.

Syntax Highlight

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

  • AgnosticUI - Accessible React component primitives that also work with Vue 3, Svelte, and Angular!
  • ant-design - demo/docs - A UI Design Language from China. Individual components available.
  • atlaskit - Atlassian’s official UI library, with components from badge to tree table.
  • base web - Base Web is a foundation for initiating, evolving, and unifying web products.
  • carbon - demo/docs - A design system built by IBM.
  • cdbreact - demo - docs - Elegant UI Kit library and reusable components for building mobile-first, responsive websites and web apps.
  • chakra-ui - demo/docs - Simple, Modular & Accessible UI Components for your React Applications.
  • ChatUI - demo/docs - The UI design language and React library for Conversational UI
  • CoreUI for React - demo/docs - Open Source UI components library.
  • evergreen - demo/docs - Evergreen React UI Framework by Segment.
  • fluentui - UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior.
  • geist-ui - Modern and minimalist React UI library.
  • gestalt - demo/docs - A set of components that supports Pinterest’s design language.
  • grommet - The most advanced UX framework for enterprise applications.
  • Mantine - demo/docs - A fully featured library with 100+ hooks and components with native dark theme support
  • orbit - Components for building travel oriented projects.
  • flowbite-react - Open-source UI component library based on React, Tailwind CSS, and Flowbite.
  • primereact - A complete UI Framework with 50+ components featuring material, bootstrap and custom themes.
  • radix-ui - Unstyled, accessible components for building high‑quality design systems and web apps.
  • react-bootstrap - Bootstrap components built with React.
  • react-foundation - Foundation as React components.
  • reakit - demo/docs Toolkit for building accessible rich web apps
  • searchkit - React UI components / widgets. The easiest way to build a great search experience with Elasticsearch.
  • semantic-ui-react - The official Semantic-UI-React integration.
  • semi-design - demo/docs - A modern, comprehensive, flexible design system.
  • shadcn/ui - demo - docs - Beautifully designed components that you can copy and paste into your apps.
  • shineout - demo - Chinese-friendly set of components: form elements, navigation, table, tree, tree select drop-down etc.

Material Design

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

Mobile

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

Component Collections

  • blueprint - demo - docs - UI toolkit for building complex, data-dense web interfaces for desktop (not mobile) applications.
  • dataminr-react-components - Collection of reusable React Components and utility functions.
  • shards-react - docs/demo - A beautiful and modern React design system. Freemium.
  • aframe-react - Build virtual reality experiences with A-Frame and React.
  • react-admin - Build admin user experiences on top of REST and GraphQL services.
  • refine - demo - docs - Build data-intensive applications in no time. It ships with Ant Design System, an enterprise-level UI toolkit.
  • matrix-card - demo - Simplest possible component to generate matrix rain style cards.
  • rsuite - demo/docs - Suite of components for “enterprise system products”.
  • lens-ui - docs - A Suit of components focused on simplicity.

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="h3-portal"><a name="Portal" class="reference-link"></a><span class="header-link octicon octicon-link"></span>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="h3-test-user-behavior"><a name="Test User Behavior" class="reference-link"></a><span class="header-link octicon octicon-link"></span>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="h2-code-design"><a name="Code Design" class="reference-link"></a><span class="header-link octicon octicon-link"></span>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="h3-data-store"><a name="Data Store" class="reference-link"></a><span class="header-link octicon octicon-link"></span>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="h3-form-logic"><a name="Form Logic" class="reference-link"></a><span class="header-link octicon octicon-link"></span>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="h3-router"><a name="Router" class="reference-link"></a><span class="header-link octicon octicon-link"></span>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 - <a href="https://github.com/reach" title="@reach" class="at-link">@reach</a>/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="h3-props-from-server"><a name="Props from server" class="reference-link"></a><span class="header-link octicon octicon-link"></span>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="h3-communication-with-server"><a name="Communication with server" class="reference-link"></a><span class="header-link octicon octicon-link"></span>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="h3-css-style"><a name="CSS / Style" class="reference-link"></a><span class="header-link octicon octicon-link"></span>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/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="h3-html-template"><a name="HTML Template" class="reference-link"></a><span class="header-link octicon octicon-link"></span>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="h3-isomorphic-apps"><a name="Isomorphic Apps" class="reference-link"></a><span class="header-link octicon octicon-link"></span>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="h3-boilerplate"><a name="Boilerplate" class="reference-link"></a><span class="header-link octicon octicon-link"></span>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></ul> <h3 id="h3-miscellaneous"><a name="Miscellaneous" class="reference-link"></a><span class="header-link octicon octicon-link"></span>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/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> - <img src="http://www.emoji-cheat-sheet.com/graphics/emojis/tada.png" class="emoji" title=":tada:" alt=":tada:" /> support react hooks everywhere (Functional or Class Component).</li></ul> <h2 id="h2-utilities"><a name="Utilities" class="reference-link"></a><span class="header-link octicon octicon-link"></span>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></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="h3-i18n"><a name="i18n" class="reference-link"></a><span class="header-link octicon octicon-link"></span>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="h3-framework-bindings-integrations"><a name="Framework bindings / integrations" class="reference-link"></a><span class="header-link octicon octicon-link"></span>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="h3-integrations-with-third-party-services"><a name="Integrations with Third Party Services" class="reference-link"></a><span class="header-link octicon octicon-link"></span>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="h2-performance"><a name="Performance" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Performance</h2><p><strong><a href="#table-of-contents"><code>Back to top ⬆️</code></a></strong></p> <h3 id="h3-ui"><a name="UI" class="reference-link"></a><span class="header-link octicon octicon-link"></span>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="h4-inspect"><a name="Inspect" class="reference-link"></a><span class="header-link octicon octicon-link"></span>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="h4-lazy-load"><a name="Lazy Load" class="reference-link"></a><span class="header-link octicon octicon-link"></span>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="h3-app-size"><a name="App Size" class="reference-link"></a><span class="header-link octicon octicon-link"></span>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="h3-server-side-rendering"><a name="Server-Side Rendering" class="reference-link"></a><span class="header-link octicon octicon-link"></span>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="h2-dev-tools"><a name="Dev Tools" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Dev Tools</h2><p><strong><a href="#table-of-contents"><code>Back to top ⬆️</code></a></strong></p> <h3 id="h3-test"><a name="Test" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Test</h3><ul> <li><a href="https://github.com/producthunt/chai-enzyme">chai-enzyme</a> - Chai.js assertions and convenience functions for testing React Components with enzyme.</li><li><a href="https://github.com/airbnb/enzyme">enzyme</a> - JavaScript Testing utilities for React.</li><li><a href="https://github.com/facebook/jest">jest-cli</a> - Painless JavaScript Testing.</li><li><a href="https://github.com/pzavolinsky/react-unit">react-unit</a> - Lightweight unit test library for ReactJS.</li><li><a href="https://github.com/conorhastings/redux-test-recorder">redux-test-recorder</a> - A redux middleware to automatically generate tests for reducers through ui interaction.</li><li><a href="https://github.com/milesj/rut">rut</a> - React testing made easy with <code>react-test-renderer</code>. Supports DOM and custom renderers.</li><li><a href="https://github.com/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="h3-redux"><a name="Redux" class="reference-link"></a><span class="header-link octicon octicon-link"></span>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="h3-inspect"><a name="Inspect" class="reference-link"></a><span class="header-link octicon octicon-link"></span>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/Lapple/react-json-inspector">react-json-inspector</a> - React JSON inspector component.</li><li><a href="https://github.com/reactotron/reactotron">reactotron</a> - A CLI and OS X app for inspecting your React JS and React Native apps.</li></ul> <h3 id="h3-miscellaneous"><a name="Miscellaneous" class="reference-link"></a><span class="header-link octicon octicon-link"></span>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="h2-miscellaneous"><a name="Miscellaneous" class="reference-link"></a><span class="header-link octicon octicon-link"></span>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="h3-static-website-generator"><a name="Static Website Generator" class="reference-link"></a><span class="header-link octicon octicon-link"></span>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="h2-cloud-solutions"><a name="Cloud Solutions" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Cloud Solutions</h2><p><strong><a href="#table-of-contents"><code>Back to top ⬆️</code></a></strong></p> <h3 id="h3-databases"><a name="Databases" class="reference-link"></a><span class="header-link octicon octicon-link"></span>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>