{"id":13409121,"url":"https://github.com/huaize2020/awesome-react","last_synced_at":"2025-03-14T14:30:58.553Z","repository":{"id":41362345,"uuid":"378918538","full_name":"huaize2020/awesome-react","owner":"huaize2020","description":"React 资源大全中文版。An awesome React packages and resources","archived":false,"fork":false,"pushed_at":"2023-12-26T07:56:23.000Z","size":118,"stargazers_count":108,"open_issues_count":1,"forks_count":21,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-05-22T06:01:12.136Z","etag":null,"topics":["awesome-npm","awesome-react","awesome-react-cn","awesome-reactjs","npm-packages","react","react-components"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/huaize2020.png","metadata":{"files":{"readme":"README-en.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-06-21T12:11:52.000Z","updated_at":"2024-04-23T02:31:49.000Z","dependencies_parsed_at":"2024-01-16T10:37:56.335Z","dependency_job_id":null,"html_url":"https://github.com/huaize2020/awesome-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huaize2020%2Fawesome-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huaize2020%2Fawesome-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huaize2020%2Fawesome-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huaize2020%2Fawesome-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/huaize2020","download_url":"https://codeload.github.com/huaize2020/awesome-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243593284,"owners_count":20316160,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["awesome-npm","awesome-react","awesome-react-cn","awesome-reactjs","npm-packages","react","react-components"],"created_at":"2024-07-30T20:00:58.130Z","updated_at":"2025-03-14T14:30:58.269Z","avatar_url":"https://github.com/huaize2020.png","language":null,"readme":"English | [简体中文](./README.md)\n\n\u003e Under continuous construction...\n\n## Table of contents\n\n- [Table of contents](#table-of-contents)\n- [Official](#official)\n- [Utilities](#utilities)\n  - [Router](#router)\n  - [Hooks Collection](#hooks-collection)\n  - [State Management](#state-management)\n  - [i18n](#i18n)\n  - [style](#style)\n- [UI Frameworks](#ui-frameworks)\n  - [Mobile](#mobile)\n  - [Solution](#solution)\n- [Boilerplate](#boilerplate)\n- [UI Components](#ui-components)\n  - [Buttons](#buttons)\n  - [Icons](#icons)\n  - [Layout](#layout)\n    - [flexbox implementation](#flexbox-implementation)\n  - [Tooltip](#tooltip)\n  - [Notification](#notification)\n  - [Dialog/Modal/Alert](#dialogmodalalert)\n  - [Menu](#menu)\n  - [Sticky](#sticky)\n  - [Tabs](#tabs)\n  - [Device Input/User Action](#device-inputuser-action)\n    - [Keyboard Events](#keyboard-events)\n    - [Scroll Events](#scroll-events)\n    - [Touch Swipe](#touch-swipe)\n    - [Mouse Events](#mouse-events)\n    - [Drag and Drop](#drag-and-drop)\n    - [Resizable](#resizable)\n  - [Editable data grid / spreadsheet](#editable-data-grid--spreadsheet)\n  - [Table](#table)\n  - [Viewer](#viewer)\n  - [Carousel](#carousel)\n  - [Lazy Load](#lazy-load)\n  - [Infinite Scroll / Virtualized List / Virtualized Tree](#infinite-scroll--virtualized-list--virtualized-tree)\n  - [Loader](#loader)\n  - [Collapse](#collapse)\n  - [Tree](#tree)\n  - [Navigation](#navigation)\n  - [Custom Scrollbar](#custom-scrollbar)\n  - [Audio / Video](#audio--video)\n  - [Time / Date / Age](#time--date--age)\n  - [Photo / Image](#photo--image)\n    - [QrCode](#qrcode)\n  - [Paginator](#paginator)\n  - [Canvas](#canvas)\n    - [Whiteboard/Sketch/Draw Editor](#whiteboardsketchdraw-editor)\n  - [Guided Tours](#guided-tours)\n  - [Data Visualization](#data-visualization)\n    - [Charts](#charts)\n    - [Graphs](#graphs)\n    - [Map](#map)\n    - [Gantt](#gantt)\n    - [Common](#common)\n  - [Form Components](#form-components)\n    - [Form Logic](#form-logic)\n    - [Input Types](#input-types)\n    - [Autocomplete](#autocomplete)\n    - [Autosize Input / Textarea](#autosize-input--textarea)\n    - [Tag Input](#tag-input)\n    - [Select](#select)\n    - [Radio Button](#radio-button)\n    - [Star Rating](#star-rating)\n    - [Toggle](#toggle)\n    - [Date / Time picker](#date--time-picker)\n    - [Emoji picker](#emoji-picker)\n    - [Color Picker](#color-picker)\n    - [Slider](#slider)\n    - [Sortable List](#sortable-list)\n    - [Rich Text Editor](#rich-text-editor)\n    - [Code Editor](#code-editor)\n    - [Markdown Editor](#markdown-editor)\n    - [Image Editing](#image-editing)\n  - [GraphQL](#graphql)\n- [UI Animation](#ui-animation)\n  - [Parallax](#parallax)\n- [Static Site Generator \\\u0026 Documentation Generator \\\u0026 Blogging](#static-site-generator--documentation-generator--blogging)\n- [Dev Tools](#dev-tools)\n  - [Debug](#debug)\n  - [Performance](#performance)\n  - [Test](#test)\n\n## Official\n\n- [Website](https://reactjs.org/)\n- [Documentation](https://reactjs.org/docs/getting-started.html)\n- [Repository](https://github.com/facebook/react) ![](https://img.shields.io/github/stars/facebook/react.svg?style=social\u0026label=Star)\n\n## Utilities\n\n### Router\n\n- [react-router](https://github.com/ReactTraining/react-router) - Declarative routing for React. ![](https://img.shields.io/github/stars/ReactTraining/react-router.svg?style=social\u0026label=Star)\n- [reach](https://github.com/reach/router) - Next Generation Routing for React. ![](https://img.shields.io/github/stars/reach/router.svg?style=social\u0026label=Star)\n- [wouter](https://github.com/molefrog/wouter) - A minimalist-friendly ~1.3KB routing library. ![](https://img.shields.io/github/stars/molefrog/wouter.svg?style=social\u0026label=Star)\n- [navi](https://github.com/frontarm/navi) - Declarative, asynchronous routing for React. ![](https://img.shields.io/github/stars/frontarm/navi.svg?style=social\u0026label=Star)\n- [universal-router](https://github.com/kriasoft/universal-router) - A simple middleware-style router for isomorphic JavaScript web apps. ![](https://img.shields.io/github/stars/kriasoft/universal-router.svg?style=social\u0026label=Star)\n- [react-keepalive-router](https://github.com/GoodLuckAlien/react-keepalive-router) - The react cache component developed based on react 16.8 +, react router 4 + can be used to cache page components, similar to Vue keepalive package Vue router effect function. ![](https://img.shields.io/github/stars/GoodLuckAlien/react-keepalive-router.svg?style=social\u0026label=Star)\n- [curi](https://github.com/pshrmn/curi) - JavaScript router for single-page applications. ![](https://img.shields.io/github/stars/pshrmn/curi.svg?style=social\u0026label=Star)\n\n### Hooks Collection\n\n- [react-use](https://github.com/streamich/react-use) - React Hooks.  ![](https://img.shields.io/github/stars/streamich/react-use.svg?style=social\u0026label=Star)\n- [react-query](https://github.com/TanStack/query/tree/main/packages/react-query) - Hooks for fetching, caching and updating asynchronous data in React. ![](https://img.shields.io/github/stars/TanStack/query.svg?style=social\u0026label=Star)\n- [ahooks](https://github.com/alibaba/hooks) - A collection of React Hooks specifically aiming at enterprise applications. ![](https://img.shields.io/github/stars/alibaba/hooks.svg?style=social\u0026label=Star)\n- [beautiful-react-hooks](https://github.com/antonioru/beautiful-react-hooks) - A collection of hooks to speed-up your components and custom hooks development. ![](https://img.shields.io/github/stars/antonioru/beautiful-react-hooks.svg?style=social\u0026label=Star)\n\n### State Management\n\n- [redux](https://github.com/reduxjs/redux) - Predictable State Container for JavaScript Apps. ![](https://img.shields.io/github/stars/reduxjs/redux.svg?style=social\u0026label=Star)\n- [mobx](https://github.com/mobxjs/mobx) - Simple, scalable state management. ![](https://img.shields.io/github/stars/mobxjs/mobx.svg?style=social\u0026label=Star)\n- [xstate-react](https://github.com/statelyai/xstate/tree/main/packages/xstate-reactt) - State machines and statecharts for the modern web. ![](https://img.shields.io/github/stars/statelyai/xstate.svg?style=social\u0026label=Star)\n- [flux](https://github.com/facebook/flux) - Application architecture for building user interfaces. ![](https://img.shields.io/github/stars/facebook/flux.svg?style=social\u0026label=Star)\n- [dva](https://github.com/dvajs/dva) - 🌱 React and redux based, lightweight and elm-style framework. (Inspired by elm and choo). ![](https://img.shields.io/github/stars/facebook/flux.svg?style=social\u0026label=Star)\n- [recoil](https://github.com/facebookexperimental/Recoil) - Experimental state management library for React apps. ![](https://img.shields.io/github/stars/facebookexperimental/Recoil.svg?style=social\u0026label=Star)\n- [zustand](https://github.com/pmndrs/zustand) - Bear necessities for state management in React. ![](https://img.shields.io/github/stars/pmndrs/zustand.svg?style=social\u0026label=Star)\n- [jotai](https://github.com/pmndrs/jotai) - Primitive and flexible state management for React. ![](https://img.shields.io/github/stars/pmndrs/jotai.svg?style=social\u0026label=Star)\n- [easy-peasy](https://github.com/ctrlplusb/easy-peasy) - An abstraction of Redux, providing a reimagined API that focuses on developer experience. ![](https://img.shields.io/github/stars/antonioru/beautiful-react-hooks.svg?style=social\u0026label=Star)\n- [effector](https://github.com/zerobias/effector) - Fast and powerful reactive state manager. ![](https://img.shields.io/github/stars/zerobias/effector.svg?style=social\u0026label=Star)\n- [reactn](https://github.com/CharlesStover/reactn) - React, but with built-in global state management. ![](https://img.shields.io/github/stars/CharlesStover/reactn.svg?style=social\u0026label=Star)\n- [hookstate](https://github.com/avkonst/hookstate) - The simple but very powerful and incredibly fast state management for React that is based on hooks. ![](https://img.shields.io/github/stars/avkonst/hookstate.svg?style=social\u0026label=Star)\n\n### i18n\n\n- [react-intl](https://github.com/yahoo/react-intl) - Internationalize React apps. ![](https://img.shields.io/github/stars/yahoo/react-intl.svg?style=social\u0026label=Star)\n- [react-i18next](https://github.com/i18next/react-i18next) - Internationalization for react done right. Using the i18next i18n ecosystem. ![](https://img.shields.io/github/stars/i18next/react-i18next.svg?style=social\u0026label=Star)\n- [js-lingui](https://github.com/lingui/js-lingui) – A readable, automated, and optimized (5 kb) internationalization for JavaScript. ![](https://img.shields.io/github/stars/lingui/js-lingui.svg?style=social\u0026label=Star)\n- [react-intl-universal](https://github.com/alibaba/react-intl-universal) - Internationalize React apps. Not only for React.Component but also for Vanilla JS. ![](https://img.shields.io/github/stars/alibaba/react-intl-universal.svg?style=social\u0026label=Star)\n- [react-translate-maker](https://github.com/cherry-projects/react-translate-maker) - Universal internationalization (i18n) open source library for React. ![](https://img.shields.io/github/stars/cherry-projects/react-translate-maker.svg?style=social\u0026label=Star)\n- [react-localized](https://github.com/fakundo/react-localized) - Internationalization for React components based on `gettext` format. ![](https://img.shields.io/github/stars/fakundo/react-localized.svg?style=social\u0026label=Star)\n\n### style\n\n- [@emotion/react](https://github.com/emotion-js/emotion/) - 👩‍🎤 CSS-in-JS library designed for high performance style composition. ![](https://img.shields.io/github/stars/emotion-js/emotion.svg?style=social\u0026label=Star)\n- [classnames](https://github.com/JedWatson/classnames) - A simple javascript utility for conditionally joining classNames together. ![](https://img.shields.io/github/stars/JedWatson/classnames.svg?style=social\u0026label=Star)\n\n## UI Frameworks\n\n- [ant-design](https://github.com/ant-design/ant-design) - An enterprise-class UI design language and React UI library. ![](https://img.shields.io/github/stars/ant-design/ant-design.svg?style=social\u0026label=Star)\n- [material-ui](https://github.com/mui-org/material-ui) - React components for faster and easier web development. ![](https://img.shields.io/github/stars/mui-org/material-ui.svg?style=social\u0026label=Star)\n- [chakra-ui](https://github.com/chakra-ui/chakra-ui) - Simple, Modular \u0026 Accessible UI Components for your React Applications. ![](https://img.shields.io/github/stars/chakra-ui/chakra-ui.svg?style=social\u0026label=Star)\n- [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap) - Bootstrap components built with React. ![](https://img.shields.io/github/stars/react-bootstrap/react-bootstrap.svg?style=social\u0026label=Star)\n- [blueprint](https://github.com/palantir/blueprint) - A React-based UI toolkit for the webs. ![](https://img.shields.io/github/stars/palantir/blueprint.svg?style=social\u0026label=Star)\n- [semantic-ui-react](https://github.com/Semantic-Org/Semantic-UI-React) - The official Semantic-UI-React integration. ![](https://img.shields.io/github/stars/Semantic-Org/Semantic-UI-React.svg?style=social\u0026label=Star)\n- [office-ui-fabric-react](https://github.com/OfficeDev/office-ui-fabric-react) - React components for building Microsoft web experiences. ![](https://img.shields.io/github/stars/OfficeDev/office-ui-fabric-react.svg?style=social\u0026label=Star)\n- [Fluent UI](https://github.com/microsoft/fluentui) - A set of React components for building Microsoft web experiences. ![](https://img.shields.io/github/stars/microsoft/fluentui.svg?style=social\u0026label=Star)\n- [evergreen](https://github.com/segmentio/evergreen) - Evergreen React UI Framework by Segment. ![](https://img.shields.io/github/stars/segmentio/evergreen.svg?style=social\u0026label=Star)\n- [reactstrap](https://github.com/reactstrap/reactstrap) - Simple React Bootstrap 4 components. ![](https://img.shields.io/github/stars/reactstrap/reactstrap.svg?style=social\u0026label=Star)\n- [rebass](https://github.com/rebassjs/rebass) - React primitive UI components built with styled-system. ![](https://img.shields.io/github/stars/rebassjs/rebass.svg?style=social\u0026label=Star)\n- [grommet](https://github.com/grommet/grommet) - A react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package. ![](https://img.shields.io/github/stars/grommet/grommet.svg?style=social\u0026label=Star)\n- [baseweb](https://github.com/uber/baseweb) - Base is a design system comprised of modern, responsive, living components. Base Web is the React implementation of Base. ![](https://img.shields.io/github/stars/uber/baseweb.svg?style=social\u0026label=Star)\n- [rsuite](https://github.com/rsuite/rsuite) - A suite of React components. ![](https://img.shields.io/github/stars/rsuite/rsuite.svg?style=social\u0026label=Star)\n- [react-spectrum](https://github.com/adobe/react-spectrum) - Adobe's collection of libraries and tools that help you build adaptive, accessible, and robust user experiences. ![](https://img.shields.io/github/stars/adobe/react-spectrum.svg?style=social\u0026label=Star)\n- [reakit](https://github.com/reakit/reakit) - Accessible, Composable and Customizable components for React. ![](https://img.shields.io/github/stars/reakit/reakit.svg?style=social\u0026label=Star)\n- [carbon](https://github.com/carbon-design-system/carbon) - A design system built by IBM. ![](https://img.shields.io/github/stars/carbon-design-system/carbon.svg?style=social\u0026label=Star)\n- [semi-design](https://github.com/DouyinFE/semi-design) - A modern, comprehensive, flexible design system and UI library. Quickly build beautiful React apps by douyin FE. ![](https://img.shields.io/github/stars/DouyinFE/semi-design.svg?style=social\u0026label=Star)\n- [searchkit](https://github.com/searchkit/searchkit) - React UI components / widgets. The easiest way to build a great search experience with Elasticsearch. ![](https://img.shields.io/github/stars/searchkit/searchkit.svg?style=social\u0026label=Star)\n- [gestalt](https://github.com/pinterest/gestalt) - A set of components that supports Pinterest’s design language. ![](https://img.shields.io/github/stars/pinterest/gestalt.svg?style=social\u0026label=Star)\n- [eui](https://github.com/elastic/eui) - Elastic UI Framework. ![](https://img.shields.io/github/stars/elastic/eui.svg?style=social\u0026label=Star)\n- [ring-ui](https://github.com/JetBrains/ring-ui) - JetBrains Web UI components. ![](https://img.shields.io/github/stars/JetBrains/ring-ui.svg?style=social\u0026label=Star)\n- [zeit-ui-react](https://github.com/zeit-ui/react) - Modern and minimalist React UI library. ![](https://img.shields.io/github/stars/zeit-ui/react.svg?style=social\u0026label=Star)\n- [primereact](https://github.com/primefaces/primereact) - A complete UI Framework for React with 50+ components featuring material, bootstrap and custom themes. ![](https://img.shields.io/github/stars/primefaces/primereact.svg?style=social\u0026label=Star)\n- [mantine](https://github.com/mantinedev/mantine) - React components and hooks library with native dark theme support focused on usability, accessibility and developer experience. ![](https://img.shields.io/github/stars/mantinedev/mantine.svg?style=social\u0026label=Star)\n- [arco-design](https://github.com/arco-design/arco-design) - A comprehensive React UI components library. ![](https://img.shields.io/github/stars/arco-design/arco-design.svg?style=social\u0026label=Star)\n- [ChatUI](https://github.com/alibaba/ChatUI) - The UI design language and React library for Conversational UI. ![](https://img.shields.io/github/stars/alibaba/ChatUI.svg?style=social\u0026label=Star)\n- [orbit-components](https://github.com/kiwicom/orbit-components) - Components for building travel oriented projects. ![](https://img.shields.io/github/stars/kiwicom/orbit-components.svg?style=social\u0026label=Star)\n- [react-bulma-components](https://github.com/couds/react-bulma-components) - React components for Bulma framework. ![](https://img.shields.io/github/stars/couds/react-bulma-components.svg?style=social\u0026label=Star)\n- [bumbag-ui](https://github.com/bumbag/bumbag-ui) - Build accessible \u0026 themeable React applications with your Bumbag. ![](https://img.shields.io/github/stars/bumbag/bumbag-ui.svg?style=social\u0026label=Star)\n- [shineout](https://github.com/sheinsight/shineout)  - Chinese-friendly set of components: form elements, navigation, table, tree, tree select drop-down etc. ![](https://img.shields.io/github/stars/sheinsight/shineout.svg?style=social\u0026label=Star)\n- [pivotal-ui-react](https://github.com/pivotal-cf/pivotal-ui) - React components based on a custom version of the Bootstrap library. ![](https://img.shields.io/github/stars/pivotal-cf/pivotal-ui.svg?style=social\u0026label=Star)\n- [react-foundation](https://github.com/nordsoftware/react-foundation) - Foundation as React components. ![](https://img.shields.io/github/stars/nordsoftware/react-foundation.svg?style=social\u0026label=Star)\n- [react-bulma](https://github.com/kulakowka/react-bulma) - React.js components for Modern CSS framework based on Flexbox. ![](https://img.shields.io/github/stars/kulakowka/react-bulma.svg?style=social\u0026label=Star)\n- [trunx](https://github.com/fibo/trunx) - Super Saiyan React components, son of awesome Bulma, implemented in TypeScript. ![](https://img.shields.io/github/stars/fibo/trunx.svg?style=social\u0026label=Star)\n- [cdbreact](https://github.com/Devwares-Team/cdbreact) - Elegant UI Kit library and reusable components for building mobile-first, responsive websites and web apps. ![](https://img.shields.io/github/stars/Devwares-Team/cdbreact.svg?style=social\u0026label=Star)\n\n### Mobile\n\n- [antd-mobile](https://github.com/ant-design/ant-design-mobile) - Configurable Mobile UI from China. ![](https://img.shields.io/github/stars/ant-design/ant-design-mobile.svg?style=social\u0026label=Star)\n- [OnsenUI](https://github.com/OnsenUI/OnsenUI) - Mobile app framework with Material and flat (iOS) designs. Based on Web Components. ![](https://img.shields.io/github/stars/OnsenUI/OnsenUI.svg?style=social\u0026label=Star)\n\n### Solution\n\n- [ant-design-pro](https://github.com/ant-design/ant-design-pro) - An out-of-box UI solution for enterprise applications as a React boilerplate. ![](https://img.shields.io/github/stars/ant-design/ant-design-pro.svg?style=social\u0026label=Star)\n- [react-admin](https://github.com/marmelab/react-admin) - A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design. ![](https://img.shields.io/github/stars/marmelab/react-admin.svg?style=social\u0026label=Star)\n\n## Boilerplate\n\n- [create-react-app](https://github.com/facebook/create-react-app) - Create React apps with no build configuration. ![](https://img.shields.io/github/stars/facebookincubator/create-react-app.svg?style=social\u0026label=Star)\n- [react-boilerplate](https://github.com/mxstbr/react-boilerplate) - A highly scalable, offline-first foundation with the best DX and a focus on performance and best practices. ![](https://img.shields.io/github/stars/mxstbr/react-boilerplate.svg?style=social\u0026label=Star)\n- [electron-react-boilerplate](https://github.com/chentsulin/electron-react-boilerplate) - Electron React Boilerplate uses Electron, React, React Router, Webpack and React Fast Refresh.\n ![](https://img.shields.io/github/stars/chentsulin/electron-react-boilerplate.svg?style=social\u0026label=Star)\n- [generator-starhackit](https://github.com/FredericHeem/starhackit) - Full-stack starter kit. ![](https://img.shields.io/github/stars/FredericHeem/starhackit.svg?style=social\u0026label=Star)\n\n## UI Components\n\n### Buttons\n\n- [react-awesome-button](https://github.com/rcaferati/react-awesome-button) - 3D animated 60fps buttons with load progress and social share actions. ![](https://img.shields.io/github/stars/rcaferati/react-awesome-button.svg?style=social\u0026label=Star)\n- [reactive-button](https://github.com/arifszn/reactive-button) - A beautiful animated button component with progress indicator. ![](https://img.shields.io/github/stars/arifszn/reactive-button.svg?style=social\u0026label=Star)\n\n### Icons\n\n- [react-icons](https://github.com/gorangajic/react-icons) - Svg react icons of popular icon packs using ES6 imports. ![](https://img.shields.io/github/stars/gorangajic/react-icons.svg?style=social\u0026label=Star)\n- [react-fontawesome](https://github.com/danawoodman/react-fontawesome) - A React Font Awesome component. ![](https://img.shields.io/github/stars/danawoodman/react-fontawesome.svg?style=social\u0026label=Star)\n- [iconify-react](https://github.com/iconify/iconify-react) - Over 40k icons from 50+ icon sets, including all popular icon and emoji sets. ![](https://img.shields.io/github/stars/iconify/iconify-react.svg?style=social\u0026label=Star)\n- [react-open-doodles](https://github.com/lunahq/react-open-doodles) - A Free Set of Sketchy Illustrations provided by opendoodles. ![](https://img.shields.io/github/stars/lunahq/react-open-doodles.svg?style=social\u0026label=Star)\n\n### Layout\n\n- [react-grid-layout](https://github.com/STRML/react-grid-layout) - A draggable and resizable grid layout with responsive breakpoints, for React. ![](https://img.shields.io/github/stars/STRML/react-grid-layout.svg?style=social\u0026label=Star)\n- [golden-layout](https://github.com/deepstreamIO/golden-layout) - A multi-screen JavaScript Layout manager. ![](https://img.shields.io/github/stars/deepstreamIO/golden-layout.svg?style=social\u0026label=Star)\n- [autoresponsive-react](https://github.com/xudafeng/autoresponsive-react) - Auto responsive grid layout library. ![](https://img.shields.io/github/stars/xudafeng/autoresponsive-react.svg?style=social\u0026label=Star)\n- [react-masonry-component](https://github.com/eiriklv/react-masonry-component) - Wrapper for @desandro's Masonry. ![](https://img.shields.io/github/stars/eiriklv/react-masonry-component.svg?style=social\u0026label=Star)\n- [react-stonecutter](https://github.com/dantrain/react-stonecutter) - Animated grid layout component. ![](https://img.shields.io/github/stars/dantrain/react-stonecutter.svg?style=social\u0026label=Star)\n- [react-spaces](https://github.com/aeagle/react-spaces) - [demo/docs](https://www.allaneagle.com/react-spaces/demo/) - Nestable anchored, resizable, scrollable components. ![](https://img.shields.io/github/stars/aeagle/react-spaces.svg?style=social\u0026label=Star)\n- [muuri-react](https://github.com/Paol-imi/muuri-react) - [demo](https://1czo5.csb.app/) - [docs](https://paol-imi.github.io/muuri-react) - Responsive, sortable, filterable and draggable grid layouts. ![](https://img.shields.io/github/stars/Paol-imi/muuri-react.svg?style=social\u0026label=Star)\n- [m-react-splitters](https://github.com/martinnov92/React-Splitters) - Splitter component, written in TypeScript. ![](https://img.shields.io/github/stars/martinnov92/React-Splitters.svg?style=social\u0026label=Star)\n\n#### flexbox implementation\n  - [hedron](https://github.com/JSBros/hedron) - A no-frills flexbox grid system, powered by styled-components. ![](https://img.shields.io/github/stars/JSBros/hedron.svg?style=social\u0026label=Star)\n  - [react-reflex](https://github.com/leefsmp/Re-Flex) - Flex layout container component for advanced React web applications. ![](https://img.shields.io/github/stars/leefsmp/Re-Flex.svg?style=social\u0026label=Star)\n  - [flexbox-react](https://github.com/nachoaIvarez/flexbox-react) - Unopinionated, standard compliant flexbox components. ![](https://img.shields.io/github/stars/nachoaIvarez/flexbox-react.svg?style=social\u0026label=Star)\n  - [react-flexbox](https://github.com/tcoopman/react-flexbox) - React flexbox implementation. ![](https://img.shields.io/github/stars/tcoopman/react-flexbox.svg?style=social\u0026label=Star)\n\n### Tooltip\n\n- [react-tooltip](https://github.com/wwayne/react-tooltip) - React tooltip component. ![](https://img.shields.io/github/stars/wwayne/react-tooltip.svg?style=social\u0026label=Star)\n- [react-popper](https://github.com/popperjs/react-popper) - 🍿⚛Official React library to use Popper, the positioning library. ![](https://img.shields.io/github/stars/popperjs/react-popper.svg?style=social\u0026label=Star)\n\n### Notification\n\n- [react-toastify](https://github.com/fkhadra/react-toastify) - 🎉 React-Toastify allows you to add notifications to your app with ease. No more nonsense. ![](https://img.shields.io/github/stars/fkhadra/react-toastify.svg?style=social\u0026label=Star)\n- [react-hot-toast](https://github.com/timolins/react-hot-toast) - Smoking 🔥hot🔥 Notifications for React. Lightweight, customizable and beautiful by default. ![](https://img.shields.io/github/stars/timolins/react-hot-toast.svg?style=social\u0026label=Star)\n- [notistack](https://github.com/iamhosseindhv/notistack) - Highly customizable notification snackbars (toasts) that can be stacked on top of each other. ![](https://img.shields.io/github/stars/iamhosseindhv/notistack.svg?style=social\u0026label=Star)\n- [react-toast-notifications](https://github.com/jossmac/react-toast-notifications) - A React \u0026 Redux notifications system. ![](https://img.shields.io/github/stars/jossmac/react-toast-notifications.svg?style=social\u0026label=Star)\n- [react-notifications-component](https://github.com/teodosii/react-notifications-component) - Highly customizable and easy-to-use component for notifications. ![](https://img.shields.io/github/stars/teodosii/react-notifications-component.svg?style=social\u0026label=Star)\n- [cogo-toast](https://github.com/Cogoport/cogo-toast) - Beautiful, Zero Configuration, Toast Messages for React ~4kb gzip (with styles and icons) ![](https://img.shields.io/github/stars/Cogoport/cogo-toast.svg?style=social\u0026label=Star)\n- [simple-react-notifications](https://github.com/alexpermyakov/simple-react-notifications) - Tiny notification library (1kb gzip). ![](https://img.shields.io/github/stars/alexpermyakov/simple-react-notifications.svg?style=social\u0026label=Star)\n- [react-toast](https://github.com/moharnadreza/react-toast) - Minimal toast notifications. ![](https://img.shields.io/github/stars/moharnadreza/react-toast.svg?style=social\u0026label=Star)\n\n### Dialog/Modal/Alert\n\n- [react-modal](https://github.com/reactjs/react-modal) - Accessible modal dialog component for React. ![](https://img.shields.io/github/stars/reactjs/react-modal.svg?style=social\u0026label=Star)\n- [react-aria-modal](https://github.com/davidtheclark/react-aria-modal) - A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices. ![](https://img.shields.io/github/stars/davidtheclark/react-aria-modal.svg?style=social\u0026label=Star)\n- [react-skylight](https://github.com/marcio/react-skylight) - A react component for modals and dialogs. ![](https://img.shields.io/github/stars/marcio/react-skylight.svg?style=social\u0026label=Star)\n- [nice-modal-react](https://github.com/eBay/nice-modal-react) - A nice modal manager for React. ![](https://img.shields.io/github/stars/eBay/nice-modal-react.svg?style=social\u0026label=Star)\n- [sweetalert2-react-content](https://github.com/sweetalert2/sweetalert2-react-content) - Official SweetAlert2 enhancer adding support for React elements as content.  ![](https://img.shields.io/github/stars/sweetalert2/sweetalert2-react-content.svg?style=social\u0026label=Star)\n- [reoverlay](https://github.com/hiradary/reoverlay) - The missing solution for managing modals. ![](https://img.shields.io/github/stars/hiradary/reoverlay.svg?style=social\u0026label=Star)\n- [reboron](https://github.com/bold-commerce/reboron) - A collection of dialog animations with React.js. ![](https://img.shields.io/github/stars/bold-commerce/reboron.svg?style=social\u0026label=Star)\n\n### Menu\n\n- [react-burger-menu](https://github.com/negomi/react-burger-menu) - An off-canvas sidebar with effects and styles. ![](https://img.shields.io/github/stars/negomi/react-burger-menu.svg?style=social\u0026label=Star)\n- [hamburger-react](https://github.com/luukdv/hamburger-react) - Animated hamburger menu icons for React. ![](https://img.shields.io/github/stars/luukdv/hamburger-react.svg?style=social\u0026label=Star)\n- [react-planet](https://github.com/innFactory/react-planet) - Create circular menus which looks like planets. ![](https://img.shields.io/github/stars/innFactory/react-planet.svg?style=social\u0026label=Star)\n- [react-offcanvas](https://github.com/vutran/react-offcanvas) - Off-canvas menus for React. ![](https://img.shields.io/github/stars/vutran/react-offcanvas.svg?style=social\u0026label=Star)\n\n### Sticky\n\n- [react-sticky](https://github.com/captivationsoftware/react-sticky) - \u0026lt;Sticky /\u0026gt; component for awesome React apps. ![](https://img.shields.io/github/stars/captivationsoftware/react-sticky.svg?style=social\u0026label=Star)\n- [react-headroom](https://github.com/KyleAMathews/react-headroom) - Hide your header until you need it. ![](https://img.shields.io/github/stars/KyleAMathews/react-headroom.svg?style=social\u0026label=Star)\n- [react-stickynode](https://github.com/yahoo/react-stickynode) - A performant and comprehensive React sticky. ![](https://img.shields.io/github/stars/yahoo/react-stickynode.svg?style=social\u0026label=Star)\n\n### Tabs\n\n- [react-tabs](https://github.com/reactjs/react-tabs) - React tabs component. ![](https://img.shields.io/github/stars/reactjs/react-tabs.svg?style=social\u0026label=Star)\n- [react-tabtab](https://github.com/ctxhou/react-tabtab) - React, tabs. ![](https://img.shields.io/github/stars/ctxhou/react-tabtab.svg?style=social\u0026label=Star)\n\n\n### Device Input/User Action\n\n####  Keyboard Events\n\n- [react-hotkeys](https://github.com/chrisui/react-hotkeys) - Declarative hotkey and focus area management for React. ![](https://img.shields.io/github/stars/chrisui/react-hotkeys.svg?style=social\u0026label=Star)\n- [react-keydown](https://github.com/glortho/react-keydown) - Lightweight keydown wrapper for React components. ![](https://img.shields.io/github/stars/glortho/react-keydown.svg?style=social\u0026label=Star)\n- [react-key-handler](https://github.com/ayrton/react-key-handler) - React component to handle keyboard events. ![](https://img.shields.io/github/stars/ayrton/react-key-handler.svg?style=social\u0026label=Star)\n- [react-shortcuts](https://github.com/avocode/react-shortcuts) - Manage keyboard shortcuts from one place. ![](https://img.shields.io/github/stars/avocode/react-shortcuts.svg?style=social\u0026label=Star)\n- [useKeyCapture](https://github.com/pranesh239/use-key-capture) - A custom hook to ease the key-press listeners of a target/global. ![](https://img.shields.io/github/stars/pranesh239/use-key-capture.svg?style=social\u0026label=Star)\n\n#### Scroll Events\n\n- [react-scroll-components](https://github.com/jeroencoumans/react-scroll-components) - A set of components that react to page scrolling. ![](https://img.shields.io/github/stars/jeroencoumans/react-scroll-components.svg?style=social\u0026label=Star)\n\n#### Touch Swipe\n\n- [react-swipe](https://github.com/voronianski/react-swipe) - Swipe.js as a React component. ![](https://img.shields.io/github/stars/voronianski/react-swipe.svg?style=social\u0026label=Star)\n\n#### Mouse Events\n\n- [react-fastclick](https://github.com/JakeSidSmith/react-fastclick) - Fast Touch Events for React. ![](https://img.shields.io/github/stars/JakeSidSmith/react-fastclick.svg?style=social\u0026label=Star)\n- [react-aim](https://github.com/gabrielbull/react-aim) - Determine the cursor aim for triggering mouse events. ![](https://img.shields.io/github/stars/gabrielbull/react-aim.svg?style=social\u0026label=Star)\n- [react-hook-mighty-mouse](https://github.com/mkosir/react-hook-mighty-mouse) - Hook that tracks mouse events on selected element. ![](https://img.shields.io/github/stars/mkosir/react-hook-mighty-mouse.svg?style=social\u0026label=Star)\n\n#### Drag and Drop\n\n- [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd) - Beautiful and accessible drag and drop for lists with React. ![](https://img.shields.io/github/stars/atlassian/react-beautiful-dnd.svg?style=social\u0026label=Star)\n- [react-dnd](https://github.com/gaearon/react-dnd) - Drag and Drop for React. ![](https://img.shields.io/github/stars/gaearon/react-dnd.svg?style=social\u0026label=Star)\n- [react-dropzone](https://github.com/okonet/react-dropzone) - Simple HTML5 drag-drop zone with React.js. ![](https://img.shields.io/github/stars/okonet/react-dropzone.svg?style=social\u0026label=Star)\n- [react-draggable](https://github.com/mzabriskie/react-draggable) - React draggable component. ![](https://img.shields.io/github/stars/mzabriskie/react-draggable.svg?style=social\u0026label=Star)\n- [react-movable](https://github.com/tajo/react-movable) - Accessible and minimalistic (\u003c4kB gzipped) library for vertical drag and drop in lists and tables. ![](https://img.shields.io/github/stars/tajo/react-movable.svg?style=social\u0026label=Star)\n- [react-dragula](https://github.com/bevacqua/react-dragula) - Drag and drop so simple it hurts. ![](https://img.shields.io/github/stars/bevacqua/react-dragula.svg?style=social\u0026label=Star)\n- [react-sortable-pane](https://github.com/bokuweb/react-sortable-pane) - Sortable and resizable pane component for React. ![](https://img.shields.io/github/stars/bokuweb/react-sortable-pane.svg?style=social\u0026label=Star)\n\n#### Resizable\n\n- [react-resizable-and-movable](https://github.com/bokuweb/react-resizable-and-movable) - A resizable and draggable component for React. ![](https://img.shields.io/github/stars/bokuweb/react-resizable-and-movable.svg?style=social\u0026label=Star)\n- [react-resizable](https://github.com/strml/react-resizable) - A simple React component that is resizable with a handle. ![](https://img.shields.io/github/stars/strml/react-resizable.svg?style=social\u0026label=Star)\n- [re-resizable](https://github.com/bokuweb/re-resizable) - A resizable component for React. ![](https://img.shields.io/github/stars/bokuweb/re-resizable.svg?style=social\u0026label=Star)\n- [react-sizeme](https://github.com/ctrlplusb/react-sizeme) - Make your React Components aware of their width and height! ![](https://img.shields.io/github/stars/ctrlplusb/react-sizeme.svg?style=social\u0026label=Star)\n- [react-spaces](https://github.com/aeagle/react-spaces) - Nestable resizable, anchored, scrollable components. ![](https://img.shields.io/github/stars/aeagle/react-spaces.svg?style=social\u0026label=Star)\n\n### Editable data grid / spreadsheet\n\n- [ag-grid](https://github.com/ceolter/ag-grid) - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components. ![](https://img.shields.io/github/stars/ceolter/ag-grid.svg?style=social\u0026label=Star)\n- [react-data-grid](https://github.com/adazzle/react-data-grid) - Excel-like grid. ![](https://img.shields.io/github/stars/adazzle/react-data-grid.svg?style=social\u0026label=Star)\n- [revo-grid](https://github.com/revolist/revogrid) - Powerfull Data Grid for React / AngularJS / Vue / Web Components with advanced customization. ![](https://img.shields.io/github/stars/revolist/revogrid.svg?style=social\u0026label=Star)\n- [ReactGrid](https://github.com/silevis/reactgrid) - Add spreadsheet-like behavior to your app. ![](https://img.shields.io/github/stars/silevis/reactgrid.svg?style=social\u0026label=Star)\n- [gigatables-react](https://github.com/GigaTables/reactables) - Sorting, pagination/infinite scroll, global/column search, AJAX CRUD, and more. ![](https://img.shields.io/github/stars/GigaTables/reactables.svg?style=social\u0026label=Star)\n\n### Table\n\n- [react-table](https://github.com/tannerlinsley/react-table) - Hooks for building fast and extendable tables and datagrids. ![](https://img.shields.io/github/stars/tannerlinsley/react-table.svg?style=social\u0026label=Star)\n- [material-table](https://github.com/mbrn/material-table) - Built on Material UI, plus: grouping, tree data, expandable rows, export, inline editing. ![](https://img.shields.io/github/stars/mbrn/material-table.svg?style=social\u0026label=Star)\n- [mui-datatables](https://github.com/gregnb/mui-datatables) - Built on Material-UI. Search, styling, filtering, resize/hide columns, export, print, select/expand rows. ![](https://img.shields.io/github/stars/gregnb/mui-datatables.svg?style=social\u0026label=Star)\n- [@devexpress/dx-react-grid](https://github.com/DevExpress/devextreme-reactive) -  High-performance plugin-based data grid for Bootstrap and Material Design. ![](https://img.shields.io/github/stars/DevExpress/devextreme-reactive.svg?style=social\u0026label=Star)\n- [react-data-table](https://github.com/jbetancur/react-data-table-component) - Accessible, responsive, themable, declaratively configurable table with sorting, selectable rows, expandable rows, pagination. ![](https://img.shields.io/github/stars/jbetancur/react-data-table-component.svg?style=social\u0026label=Star)\n- [rsuite-table](https://github.com/rsuite/rsuite-table) - A table component that supports virtualized. ![](https://img.shields.io/github/stars/rsuite/rsuite-table.svg?style=social\u0026label=Star)\n- [ka-table](https://github.com/komarovalexander/ka-table) - Customizable table component with sorting, filtering, grouping, virtualization, editing etc. ![](https://img.shields.io/github/stars/komarovalexander/ka-table.svg?style=social\u0026label=Star)\n- [sematable](https://github.com/sematext/sematable) - Client side sorting, pagination, and text filter for redux/react based apps. ![](https://img.shields.io/github/stars/sematext/sematable.svg?style=social\u0026label=Star)\n- [@progress/kendo-react-grid](https://github.com/telerik/kendo-react) - Powerful data grid component with 100+ ready-to-use features like paging, sorting, export to Excel, and more. ![](https://img.shields.io/github/stars/telerik/kendo-react.svg?style=social\u0026label=Star)\n\n### Viewer\n\n- [@react-pdf/renderer](https://github.com/diegomura/react-pdf) - React renderer for creating PDF files on the browser and server. ![](https://img.shields.io/github/stars/diegomura/react-pdf.svg?style=social\u0026label=Star)\n- [react-markdown](https://github.com/rexxars/react-markdown) - Render Markdown as React components. ![](https://img.shields.io/github/stars/rexxars/react-markdown.svg?style=social\u0026label=Star)\n- [react-pdf](https://github.com/wojtekmaj/react-pdf) - Display PDFs in your React app as easily as if they were images. ![](https://img.shields.io/github/stars/wojtekmaj/react-pdf.svg?style=social\u0026label=Star)\n- [react-json-tree](https://github.com/alexkuz/react-json-tree) - React JSON Viewer Component, Extracted from redux-devtools.![](https://img.shields.io/github/stars/alexkuz/react-json-tree.svg?style=social\u0026label=Star)\n- [react-pdf-viewer](https://github.com/phuoc-ng/react-pdf-viewer) - A React component to view a PDF document. ![](https://img.shields.io/github/stars/phuoc-ng/react-pdf-viewer.svg?style=social\u0026label=Star)\n\n### Carousel\n\n- [react-slick](https://github.com/akiran/react-slick) - React carousel component. ![](https://img.shields.io/github/stars/akiran/react-slick.svg?style=social\u0026label=Star)\n- [keen-slider](https://github.com/rcbyr/keen-slider) - Performant carousel/slider with native touch/swipe behavior. ![](https://img.shields.io/github/stars/rcbyr/keen-slider.svg?style=social\u0026label=Star)\n- [react-awesome-slider](https://github.com/rcaferati/react-awesome-slider) - 3D animated 60fps media and content slider/carousel. ![](https://img.shields.io/github/stars/rcaferati/react-awesome-slider.svg?style=social\u0026label=Star)\n- [react-responsive-carousel](https://github.com/leandrowd/react-responsive-carousel) - React.js Responsive Carousel (with Swipe). ![](https://img.shields.io/github/stars/leandrowd/react-responsive-carousel.svg?style=social\u0026label=Star)\n- [@egjs/react-flicking](https://github.com/naver/egjs-flicking/blob/master/packages/react-flicking/) - It's reliable, flexible and extendable carousel. ![](https://img.shields.io/github/stars/naver/egjs-flicking.svg?style=social\u0026label=Star)\n- [pure-react-carousel](https://github.com/express-labs/pure-react-carousel) - Built from scratch and not highly opinionated. ![](https://img.shields.io/github/stars/express-labs/pure-react-carousel.svg?style=social\u0026label=Star)\n- [react-id-swiper](https://github.com/kidjp85/react-id-swiper) - A library to use idangerous Swiper as a ReactJs component. ![](https://img.shields.io/github/stars/phuoc-ng/react-pdf-viewer.svg?style=social\u0026label=Star)\n- [react-instagram-zoom-slider](https://github.com/skozer/react-instagram-zoom-slider) - A slider component with pinch to zoom capabilities inspired by Instagram. ![](https://img.shields.io/github/stars/skozer/react-instagram-zoom-slider.svg?style=social\u0026label=Star)\n\n### Lazy Load\n\n- [react-lazyload](https://github.com/jasonslyvia/react-lazyload) - Lazyload your Component, Image or anything matters the performance. ![](https://img.shields.io/github/stars/jasonslyvia/react-lazyload.svg?style=social\u0026label=Star)\n- [react-lazy-load](https://github.com/loktar00/react-lazy-load) - React component that renders children elements when they enter the viewport. ![](https://img.shields.io/github/stars/loktar00/react-lazy-load.svg?style=social\u0026label=Star)\n\n### Infinite Scroll / Virtualized List / Virtualized Tree\n\n- [react-virtualized](https://github.com/bvaughn/react-virtualized) - React components for efficiently rendering large lists and tabular data. ![](https://img.shields.io/github/stars/bvaughn/react-window.svg?style=social\u0026label=Star)\n- [react-window](https://github.com/bvaughn/react-window) - React components for efficiently rendering large lists and tabular data. ![](https://img.shields.io/github/stars/bvaughn/react-window.svg?style=social\u0026label=Star)\n- [react-list](https://github.com/orgsync/react-list) - A versatile infinite scroll React component. ![](https://img.shields.io/github/stars/orgsync/react-list.svg?style=social\u0026label=Star)\n- [@egjs/react-infinitegrid](https://github.com/naver/egjs-infinitegrid/blob/master/packages/react-infinitegrid) - A module used to arrange card elements including content infinitely according to various layout types. ![](https://img.shields.io/github/stars/mkosir/react-parallax-tilt.svg?style=social\u0026label=Star)\n- [react-virtualized-tree](https://github.com/diogofcunha/react-virtualized-tree) - A virtualized tree view component making use of react. ![](https://img.shields.io/github/stars/mkosir/react-parallax-tilt.svg?style=social\u0026label=Star)\n- [af-virtual-scroll](https://github.com/nowaalex/af-virtual-scroll) - Render large scrollable lists and tables. ![](https://img.shields.io/github/stars/nowaalex/af-virtual-scroll.svg?style=social\u0026label=Star)\n\n### Loader\n\n- [react-content-loader](https://github.com/danilowoz/react-content-loader) - SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading). ![](https://img.shields.io/github/stars/danilowoz/react-content-loader.svg?style=social\u0026label=Star)\n- [react-spinners](https://github.com/davidhu2000/react-spinners) - A collection of loading spinner components for react. ![](https://img.shields.io/github/stars/davidhu2000/react-spinners.svg?style=social\u0026label=Star)\n- [react-redux-loading-bar](https://github.com/mironov/react-redux-loading-bar) - Simple Loading Bar for Redux and React. ![](https://img.shields.io/github/stars/mironov/react-redux-loading-bar.svg?style=social\u0026label=Star)\n- [react-loader](https://github.com/TheCognizantFoundry/react-loader) - React component that displays a spinner via spin.js until your component is loaded. ![](https://img.shields.io/github/stars/TheCognizantFoundry/react-loader.svg?style=social\u0026label=Star)\n- [react-spinners-css](https://github.com/JoshK2/react-spinners-css) - Amazing collection of react spinners components. ![](https://img.shields.io/github/stars/JoshK2/react-spinners-css.svg?style=social\u0026label=Star)\n- [react-block-ui](https://github.com/availity/react-block-ui) - Easy way to block the user from interacting with your UI. ![](https://img.shields.io/github/stars/availity/react-block-ui.svg?style=social\u0026label=Star)\n\n### Collapse\n\n- [react-collapse](https://github.com/nkbt/react-collapse) - Component-wrapper for collapse animation with react-motion. ![](https://img.shields.io/github/stars/nkbt/react-collapse.svg?style=social\u0026label=Star)\n- [react-accessible-accordion](https://github.com/springload/react-accessible-accordion) - Accessible Accordion component for React. ![](https://img.shields.io/github/stars/springload/react-accessible-accordion.svg?style=social\u0026label=Star)\n- [react-tabbordion](https://github.com/Merri/react-tabbordion) - [demo](https://merri.github.io/react-tabbordion) - Tabbordion is a component for managing active state between multiple items. You can make anything out of it: Tabs component, Accordion component, Multi select list component,Option component, List of options, List of checkboxes. ![](https://img.shields.io/github/stars/Merri/react-tabbordion.svg?style=social\u0026label=Star)\n\n### Tree\n\n- [react-treebeard](https://github.com/alexcurtis/react-treebeard) - React Tree View Component. Data-Driven, Fast, Efficient and Customisable. ![](https://img.shields.io/github/stars/alexcurtis/react-treebeard.svg?style=social\u0026label=Star)\n- [react-treeview](https://github.com/chenglou/react-treeview) - Easy, light, flexible tree view made with React. ![](https://img.shields.io/github/stars/chenglou/react-treeview.svg?style=social\u0026label=Star)\n- [react-complex-tree](https://github.com/lukasbach/react-complex-tree) - Unopinionated Accessible Tree Component with Multi-Select, Drag-And-Drop and Search. ![](https://img.shields.io/github/stars/lukasbach/react-complex-tree.svg?style=social\u0026label=Star)\n\n### Navigation\n\n- [react-swipeable-views](https://github.com/oliviertassinari/react-swipeable-views) - A React Component for binded Tabs and Swipeable Views. ![](https://img.shields.io/github/stars/oliviertassinari/react-swipeable-views.svg?style=social\u0026label=Star)\n- [react-scroll](https://github.com/fisshy/react-scroll) - React scroll component. ![](https://img.shields.io/github/stars/fisshy/react-scroll.svg?style=social\u0026label=Star)\n\n### Custom Scrollbar\n\n- [react-custom-scroll](https://github.com/rommguy/react-custom-scroll) - Easily customize the browser scroll bar with native OS scroll behavior. ![](https://img.shields.io/github/stars/rommguy/react-custom-scroll.svg?style=social\u0026label=Star)\n- [rc-scrollbars](https://github.com/sakhnyuk/rc-scrollbars) - React scrollbars component. ![](https://img.shields.io/github/stars/sakhnyuk/rc-scrollbars.svg?style=social\u0026label=Star)\n- [react-shadow-scroll](https://github.com/andrelmlins/react-shadow-scroll) - Component that customizes the list and inserts shadow when scrolling exist. ![](https://img.shields.io/github/stars/andrelmlins/react-shadow-scroll.svg?style=social\u0026label=Star)\n\n### Audio / Video\n\n- [react-player](https://github.com/CookPete/react-player) - A react component for playing a variety of URLs, including YouTube. ![](https://img.shields.io/github/stars/CookPete/react-player.svg?style=social\u0026label=Star)\n- [video-react](https://github.com/video-react/video-react) - A web video player built for the HTML5 world using React library. ![](https://img.shields.io/github/stars/video-react/video-react.svg?style=social\u0026label=Star)\n- [react-soundplayer](https://github.com/soundblogs/react-soundplayer) - Create custom SoundCloud players with React. ![](https://img.shields.io/github/stars/soundblogs/react-soundplayer.svg?style=social\u0026label=Star)\n- [react-youtube](https://github.com/troybetz/react-youtube) - React.js powered YouTube player component. ![](https://img.shields.io/github/stars/troybetz/react-youtube.svg?style=social\u0026label=Star)\n- [react-audio-player](https://github.com/justinmc/react-audio-player) - A simple React wrapper on the HTML5 audio tag. ![](https://img.shields.io/github/stars/justinmc/react-audio-player.svg?style=social\u0026label=Star)\n- [material-ui-audio-player](https://github.com/Werter12/material-ui-audio-player) - Audio player for material ui design. ![](https://img.shields.io/github/stars/Werter12/material-ui-audio-player.svg?style=social\u0026label=Star)\n- [react-dailymotion](https://github.com/u-wave/react-dailymotion) - Dailymotion player component for React. ![](https://img.shields.io/github/stars/u-wave/react-dailymotion.svg?style=social\u0026label=Star)\n\n### Time / Date / Age\n\n- [react-timeago](https://github.com/nmn/react-timeago) - A simple time-ago component for ReactJs. ![](https://img.shields.io/github/stars/nmn/react-timeago.svg?style=social\u0026label=Star)\n- [timeago-react](https://github.com/hustcc/timeago-react) - Format date with `*** time ago` statement. eg: '3 hours ago'. ![](https://img.shields.io/github/stars/hustcc/timeago-react.svg?style=social\u0026label=Star)\n\n### Photo / Image\n\n- [lightGallery](https://github.com/sachinchoolur/lightGallery) - Full-featured lightbox gallery component. ![](https://img.shields.io/github/stars/sachinchoolur/lightGallery.svg?style=social\u0026label=Star)\n- [react-image-gallery](https://github.com/xiaolin/react-image-gallery) - Responsive image gallery, carousel, image slider react component. ![](https://img.shields.io/github/stars/xiaolin/react-image-gallery.svg?style=social\u0026label=Star)\n- [react-photo-gallery](https://github.com/neptunian/react-photo-gallery) - Responsive React Photo Gallery. ![](https://img.shields.io/github/stars/neptunian/react-photo-gallery.svg?style=social\u0026label=Star)\n- [react-image-lightbox](https://github.com/fritz-c/react-image-lightbox) - React lightbox component. ![](https://img.shields.io/github/stars/fritz-c/react-image-lightbox.svg?style=social\u0026label=Star)\n- [react-svg-pan-zoom](https://github.com/chrvadala/react-svg-pan-zoom) - A React component that adds pan and zoom features to SVG. ![](https://img.shields.io/github/stars/chrvadala/react-svg-pan-zoom.svg?style=social\u0026label=Star)\n- [react-particle-image](https://github.com/malerba118/react-particle-image) - Render images as interactive particles. ![](https://img.shields.io/github/stars/malerba118/react-particle-image.svg?style=social\u0026label=Star)\n- [react-imgix](https://github.com/imgix/react-imgix) - Add fast, responsive images as an image, picture, or background! ![](https://img.shields.io/github/stars/imgix/react-imgix.svg?style=social\u0026label=Star)\n- [react-compare-image](https://github.com/junkboy0315/react-compare-image) - React component to compare two images using a slider. ![](https://img.shields.io/github/stars/junkboy0315/react-compare-image.svg?style=social\u0026label=Star)\n- [react-intense](https://github.com/brycedorn/react-intense) - A React component for viewing large images up close. ![](https://img.shields.io/github/stars/brycedorn/react-intense.svg?style=social\u0026label=Star)\n\n#### QrCode\n\n- [qrcode.react](https://github.com/zpao/qrcode.react) - A \u003cQRCode/\u003e component for use with React. ![](https://img.shields.io/github/stars/zpao/qrcode.react.svg?style=social\u0026label=Star)\n\n### Paginator\n\n- [react-paginate](https://github.com/AdeleD/react-paginate) - A ReactJS component that creates a pagination. ![](https://img.shields.io/github/stars/AdeleD/react-paginate.svg?style=social\u0026label=Star)\n- [react-laravel-paginex](https://github.com/lionix-team/react-laravel-paginex) - Laravel Pagination with ReactJS (customizable). ![](https://img.shields.io/github/stars/lionix-team/react-laravel-paginex.svg?style=social\u0026label=Star)\n- [paginated](https://github.com/makotot/paginated) - React render props \u0026 custom hook to build pagination. ![](https://img.shields.io/github/stars/makotot/paginated.svg?style=social\u0026label=Star)\n\n### Canvas\n\n- [react-konva](https://github.com/konvajs/react-konva) - React Konva is a JavaScript library for drawing complex canvas graphics with bindings to the Konva Framework. ![](https://img.shields.io/github/stars/konvajs/react-konva.svg?style=social\u0026label=Star)\n\n#### Whiteboard/Sketch/Draw Editor\n\n- [@excalidraw/excalidraw](https://github.com/excalidraw/excalidraw) - Virtual whiteboard for sketching hand-drawn like diagrams. ![](https://img.shields.io/github/stars/excalidraw/excalidraw.svg?style=social\u0026label=Star)\n- [react-sketch](https://github.com/tbolis/react-sketch) - A Sketch tool for React based applications, backed-up by FabricJS. ![](https://img.shields.io/github/stars/tbolis/react-sketch.svg?style=social\u0026label=Star)\n- [react-sketch-canvas](https://github.com/vinothpandian/react-sketch-canvas) - Freehand vector drawing tool for React using SVG as canvas. Accepts input from Mouse, touch, and graphic tablets. ![](https://img.shields.io/github/stars/vinothpandian/react-sketch-canvas.svg?style=social\u0026label=Star)\n- [react-design-editor](https://github.com/salgum1114/react-design-editor) - React Design Editor has started to developed direct manipulation of editable design tools like Powerpoint, We've developed it with reactjs, ant.design, fabricjs. ![](https://img.shields.io/github/stars/salgum1114/react-design-editor.svg?style=social\u0026label=Star)\n\n### Guided Tours\n\n- [react-joyride](https://github.com/gilbarbara/react-joyride) - Create guided tours in your apps. ![](https://img.shields.io/github/stars/gilbarbara/react-joyride.svg?style=social\u0026label=Star)\n\n### Data Visualization\n\n#### Charts\n\n- [recharts](https://github.com/recharts/recharts) - Redefined chart library built with React and D3. ![](https://img.shields.io/github/stars/recharts/recharts.svg?style=social\u0026label=Star)\n- [visx](https://github.com/airbnb/visx) - 🐯 visx | visualization components.  ![](https://img.shields.io/github/stars/airbnb/visx.svg?style=social\u0026label=Star)\n- [nivo](https://github.com/plouc/nivo) - Provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries. ![](https://img.shields.io/github/stars/plouc/nivo.svg?style=social\u0026label=Star)\n- [victory](https://github.com/FormidableLabs/victory) - Data viz for React. ![](https://img.shields.io/github/stars/FormidableLabs/victory.svg?style=social\u0026label=Star)\n- [react-vis](https://github.com/uber/react-vis) - Data visualization library based on React and d3. ![](https://img.shields.io/github/stars/uber/react-vis.svg?style=social\u0026label=Star)\n- [BizCharts](https://github.com/alibaba/BizCharts) - Powerful data visualization library based on G2 and React. ![](https://img.shields.io/github/stars/alibaba/BizCharts.svg?style=social\u0026label=Star)\n- [react-chartjs-2](https://github.com/jerairrest/react-chartjs-2) - Common react charting components using Chart.js 2.0. ![](https://img.shields.io/github/stars/jerairrest/react-chartjs-2.svg?style=social\u0026label=Star)\n- [echarts-for-react](https://github.com/hustcc/echarts-for-react) - Apache ECharts components for React wrapper.  ![](https://img.shields.io/github/stars/hustcc/echarts-for-react.svg?style=social\u0026label=Star)\n- [react-sparklines](https://github.com/borisyankov/react-sparklines) - Beautiful and expressive Sparklines React component. ![](https://img.shields.io/github/stars/borisyankov/react-sparklines.svg?style=social\u0026label=Star)\n- [semiotic](https://github.com/nteract/semiotic) - Semiotic is a data visualization framework for React. ![](https://img.shields.io/github/stars/nteract/semiotic.svg?style=social\u0026label=Star)\n- [react-d3-components](https://github.com/codesuki/react-d3-components) - D3 Components for React. ![](https://img.shields.io/github/stars/codesuki/react-d3-components.svg?style=social\u0026label=Star)\n- [react-dazzle](https://github.com/Raathigesh/Dazzle) - Dashboards made easy in React JS. ![](https://img.shields.io/github/stars/Raathigesh/Dazzle.svg?style=social\u0026label=Star)\n- [react-highcharts](https://github.com/kirjs/react-highcharts) - React-highcharts. ![](https://img.shields.io/github/stars/kirjs/react-highcharts.svg?style=social\u0026label=Star)\n- [react-google-charts](https://github.com/RakanNimer/react-google-charts) - React-google-charts React component. ![](https://img.shields.io/github/stars/RakanNimer/react-google-charts.svg?style=social\u0026label=Star)\n- [react-timeseries-charts](https://github.com/esnet/react-timeseries-charts) - Declarative timeseries charts. ![](https://img.shields.io/github/stars/esnet/react-timeseries-charts.svg?style=social\u0026label=Star)\n- [chartify](https://github.com/kirillstepkin/chartify) - React.js plugin for building animated draggable and customizable charts. ![](https://img.shields.io/github/stars/kirillstepkin/chartify.svg?style=social\u0026label=Star)\n- [react-chartist](https://github.com/fraserxu/react-chartist) - React component for Chartist.js. ![](https://img.shields.io/github/stars/fraserxu/react-chartist.svg?style=social\u0026label=Star)\n- [rumble-charts](https://github.com/rumble-charts/rumble-charts) - React components for building composable and flexible charts. ![](https://img.shields.io/github/stars/rumble-charts/rumble-charts.svg?style=social\u0026label=Star)\n- [ej2-react-charts](https://github.com/syncfusion/ej2-react-ui-components/tree/master/components/charts) - Beautiful and interactive charts \u0026 graphs for react. ![](https://img.shields.io/github/stars/syncfusion/ej2-react-ui-components.svg?style=social\u0026label=Star)\n- [react-charty](https://github.com/99ff00/react-charty) - Small but powerful interactive data viz with multiple chart types, animations, zooming, theming. ![](https://img.shields.io/github/stars/99ff00/react-charty.svg?style=social\u0026label=Star)\n- [react-heat-map](https://github.com/uiwjs/react-heat-map) - A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph. ![](https://img.shields.io/github/stars/uiwjs/react-heat-map.svg?style=social\u0026label=Star)\n- [react-muze](https://github.com/chartshq/react-muze) - React wrapper for [muze](https://muzejs.org/)(free data visualization library for creating exploratory data visualizations in browser, using WebAssembly) ![](https://img.shields.io/github/stars/chartshq/react-muze.svg?style=social\u0026label=Star)\n\n#### Graphs\n\n- [graphin](https://github.com/antvis/graphin) - A React toolkit for graph visualization based on G6. ![](https://img.shields.io/github/stars/antvis/graphin.svg?style=social\u0026label=Star)\n- [react-sigmajs](https://github.com/dunnock/react-sigma) - Lightweight but powerful library for drawing network graphs built on top of SigmaJS. ![](https://img.shields.io/github/stars/dunnock/react-sigma.svg?style=social\u0026label=Star)\n\n#### Map\n\n- [react-map-gl](https://github.com/uber/react-map-gl) - A React wrapper for MapboxGL-js and overlay API. ![](https://img.shields.io/github/stars/uber/react-map-gl.svg?style=social\u0026label=Star)\n- [google-map-react](https://github.com/istarkov/google-map-react) - Universal google map react component, allows render react components on the google map. ![](https://img.shields.io/github/stars/istarkov/google-map-react.svg?style=social\u0026label=Star)\n- [react-leaflet](https://github.com/PaulLeCam/react-leaflet) - React components for Leaflet maps. ![](https://img.shields.io/github/stars/PaulLeCam/react-leaflet.svg?style=social\u0026label=Star)\n- [pigeon-maps](https://github.com/mariusandra/pigeon-maps) - ReactJS Maps without external dependencies. ![](https://img.shields.io/github/stars/mariusandra/pigeon-maps.svg?style=social\u0026label=Star)\n- [react-mapbox-gl](https://github.com/alex3165/react-mapbox-gl) - A React binding of mapbox-gl-js. ![](https://img.shields.io/github/stars/alex3165/react-mapbox-gl.svg?style=social\u0026label=Star)\n- [react-geosuggest](https://github.com/ubilabs/react-geosuggest) - A React autosuggest for the Google Maps Places API. ![](https://img.shields.io/github/stars/ubilabs/react-geosuggest.svg?style=social\u0026label=Star)\n- [react-svg-map](https://github.com/VictorCazanave/react-svg-map)- A set of components to display an interactive SVG map. ![](https://img.shields.io/github/stars/VictorCazanave/react-svg-map.svg?style=social\u0026label=Star)\n\n#### Gantt\n\n- [gantt-for-react](https://github.com/hustcc/gantt-for-react) - Frappe Gantt components for React wrapper. ![](https://img.shields.io/github/stars/hustcc/gantt-for-react.svg?style=social\u0026label=Star)\n\n#### Common\n\n- [@ant-design/charts](https://github.com/ant-design/ant-design-charts) - A React chart library, based on G2Plot, G6, X6, L7.  ![](https://img.shields.io/github/stars/ant-design/ant-design-charts.svg?style=social\u0026label=Star)\n\n### Form Components\n\n#### Form Logic\n\n- [formik](https://github.com/jaredpalmer/formik) - Build forms without tears and supports Validation in ease. ![](https://img.shields.io/github/stars/jaredpalmer/formik.svg?style=social\u0026label=Star)\n- [react-hook-form](https://github.com/react-hook-form/react-hook-form) - React hooks for form validation without the hassle. ![](https://img.shields.io/github/stars/react-hook-form/react-hook-form.svg?style=social\u0026label=Star)\n- [redux-form](https://github.com/redux-form/redux-form) - Redux form state management (Web and Native). ![](https://img.shields.io/github/stars/redux-form/redux-form.svg?style=social\u0026label=Star)\n- [react-jsonschema-form](https://github.com/mozilla-services/react-jsonschema-form) - A React component for building Web forms from JSONSchema. ![](https://img.shields.io/github/stars/mozilla-services/react-jsonschema-form.svg?style=social\u0026label=Star)\n- [react-final-form](https://github.com/final-form/react-final-form) - Subscription-based form state management. ![](https://img.shields.io/github/stars/final-form/react-final-form.svg?style=social\u0026label=Star)\n- [formily](https://github.com/alibaba/formily) - High performance, extensible, and Typescript friendly. ![](https://img.shields.io/github/stars/alibaba/formily.svg?style=social\u0026label=Star)\n- [surveyjs](https://github.com/surveyjs/survey-library) - The advanced Survey and Form library. ![](https://img.shields.io/github/stars/surveyjs/survey-library.svg?style=social\u0026label=Star)\n- [formsy-react](https://github.com/formsy/formsy-react) - A form input builder and validator for React JS. ![](https://img.shields.io/github/stars/formsy/formsy-react.svg?style=social\u0026label=Star)\n- [react-validation-mixin](https://github.com/jurassix/react-validation-mixin) - Simple validation mixin (HoC) for React. ![](https://img.shields.io/github/stars/jurassix/react-validation-mixin.svg?style=social\u0026label=Star)\n\n#### Input Types\n\n- [react-text-mask](https://github.com/msafi/text-mask) - Input mask for React, Angular, and vanilla JavaScript. Flexible, robust \u0026amp; tiny. ![](https://img.shields.io/github/stars/msafi/text-mask.svg?style=social\u0026label=Star)\n- [react-credit-cards](https://github.com/amarofashion/react-credit-cards) - Beautiful credit cards for your payment forms. ![](https://img.shields.io/github/stars/amarofashion/react-credit-cards.svg?style=social\u0026label=Star)\n- [react-input-mask](https://github.com/sanniassin/react-input-mask) - Yet another react component for input masking. ![](https://img.shields.io/github/stars/sanniassin/react-input-mask.svg?style=social\u0026label=Star)\n- [react-maskedinput](https://github.com/insin/react-maskedinput) - Masked \u0026lt;input/\u0026gt; React component. ![](https://img.shields.io/github/stars/insin/react-maskedinput.svg?style=social\u0026label=Star)\n- [react-payment-inputs](https://github.com/medipass/react-payment-inputs) - A zero-dependency container to help with payment card input fields. ![](https://img.shields.io/github/stars/medipass/react-payment-inputs.svg?style=social\u0026label=Star)\n- [react-numpad](https://github.com/gpietro/react-numpad) - Extensible number pad control for numbers, dates and times. ![](https://img.shields.io/github/stars/gpietro/react-numpad.svg?style=social\u0026label=Star)\n\n#### Autocomplete\n\n- [react-autosuggest](https://github.com/moroshko/react-autosuggest) - WAI-ARIA compliant React autosuggest component. ![](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social\u0026label=Star)\n- [react-mentions](https://github.com/effektif/react-mentions) - Mention people in a textarea. ![](https://img.shields.io/github/stars/effektif/react-mentions.svg?style=social\u0026label=Star)\n- [react-typeahead](https://github.com/fmoo/react-typeahead) - Pure react-based typeahead and typeahead-tokenizer. ![](https://img.shields.io/github/stars/fmoo/react-typeahead.svg?style=social\u0026label=Star)\n- [react-autocomplete-input](https://github.com/yury-dymov/react-autocomplete-input) - Autocomplete input field for React. ![](https://img.shields.io/github/stars/yury-dymov/react-autocomplete-input.svg?style=social\u0026label=Star)\n\n#### Autosize Input / Textarea\n\n- [react-textarea-autosize](https://github.com/andreypopp/react-textarea-autosize) - \u0026lt;textarea /\u0026gt; component for React which grows with content. ![](https://img.shields.io/github/stars/andreypopp/react-textarea-autosize.svg?style=social\u0026label=Star)\n- [react-input-autosize](https://github.com/JedWatson/react-input-autosize) - Auto-resizing input field for React. ![](https://img.shields.io/github/stars/JedWatson/react-input-autosize.svg?style=social\u0026label=Star)\n- [react-autowidth-input](https://github.com/kierien/react-autowidth-input) - Highly configurable \u0026 extensible automatically sized input field built with hooks. ![](https://img.shields.io/github/stars/kierien/react-autowidth-input.svg?style=social\u0026label=Star)\n\n#### Tag Input\n\n- [react-tagsinput](https://github.com/olahol/react-tagsinput) - A simple react component for inputing tags. ![](https://img.shields.io/github/stars/olahol/react-tagsinput.svg?style=social\u0026label=Star)\n- [react-tag-input](https://github.com/prakhar1989/react-tags) - A fantastically simple tagging component for your React projects. ![](https://img.shields.io/github/stars/prakhar1989/react-tags.svg?style=social\u0026label=Star)\n- [react-tokeninput](https://github.com/instructure-react/react-tokeninput) - Tokeninput component for React. ![](https://img.shields.io/github/stars/instructure-react/react-tokeninput.svg?style=social\u0026label=Star)\n- [@pathofdev/react-tag-input](https://github.com/pathofdev/react-tag-input) - Minimal tagging component with editable tags ![](https://img.shields.io/github/stars/pathofdev/react-tag-input.svg?style=social\u0026label=Star)\n\n#### Select\n\n- [react-select](https://github.com/JedWatson/react-select) - A Select control built with and for React JS. ![](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social\u0026label=Star)\n- [react-aria-menubutton](https://github.com/davidtheclark/react-aria-menubutton) - A fully accessible, easily themeable, React-powered menu button. ![](https://img.shields.io/github/stars/davidtheclark/react-aria-menubutton.svg?style=social\u0026label=Star)\n- [react-select-box](https://github.com/instructure-react/react-select-box) - An accessible select box component for React. ![](https://img.shields.io/github/stars/instructure-react/react-select-box.svg?style=social\u0026label=Star)\n- [react-functional-select](https://github.com/based-ghost/react-functional-select) - Micro-sized \u0026 micro-optimized select component for React.js. ![](https://img.shields.io/github/stars/based-ghost/react-functional-select.svg?style=social\u0026label=Star)\n- [react-column-select](https://github.com/chr-ge/react-column-select) - A column select component built for react. ![](https://img.shields.io/github/stars/chr-ge/react-column-select.svg?style=social\u0026label=Star)\n\n#### Radio Button\n\n- [react-radio-group](https://github.com/chenglou/react-radio-group) - Better radio buttons. ![](https://img.shields.io/github/stars/chenglou/react-radio-group.svg?style=social\u0026label=Star)\n\n#### Star Rating\n\n- [react-star-rating](https://github.com/cameronroe/react-star-rating) - A simple star rating component built with React. ![](https://img.shields.io/github/stars/cameronroe/react-star-rating.svg?style=social\u0026label=Star)\n- [react-star-rating-input](https://github.com/ikr/react-star-rating-input) - React.js component for entering 0-5 (or more) stars. ![](https://img.shields.io/github/stars/ikr/react-star-rating-input.svg?style=social\u0026label=Star)\n- [react-awesome-stars-rating](https://github.com/fedoryakubovich/react-awesome-stars-rating) - [demo](https://react-awesome-stars-rating.herokuapp.com/) - The star rating component with accessibility. ![](https://img.shields.io/github/stars/fedoryakubovich/react-awesome-stars-rating.svg?style=social\u0026label=Star)\n\n#### Toggle\n\n- [react-toggle](https://github.com/instructure-react/react-toggle) - An elegant, accessible toggle component for React. Also a glorified checkbox. ![](https://img.shields.io/github/stars/instructure-react/react-toggle.svg?style=social\u0026label=Star)\n- [react-ios-switch](https://github.com/clari/react-ios-switch) - React switch component. ![](https://img.shields.io/github/stars/clari/react-ios-switch.svg?style=social\u0026label=Star)\n\n#### Date / Time picker\n\n- [react-datepicker](https://github.com/Hacker0x01/react-datepicker) - A simple and reusable datepicker component for React. ![](https://img.shields.io/github/stars/Hacker0x01/react-datepicker.svg?style=social\u0026label=Star)\n- [react-big-calendar](https://github.com/intljusticemission/react-big-calendar) - Gcal/outlook like calendar component. ![](https://img.shields.io/github/stars/intljusticemission/react-big-calendar.svg?style=social\u0026label=Star)\n- [react-day-picker](https://github.com/gpbl/react-day-picker) - Flexible date picker for React. ![](https://img.shields.io/github/stars/gpbl/react-day-picker.svg?style=social\u0026label=Star)\n- [react-calendar](https://github.com/wojtekmaj/react-calendar) - Ultimate calendar for your React app. ![](https://img.shields.io/github/stars/wojtekmaj/react-calendar.svg?style=social\u0026label=Star)\n- [react-date-range](https://github.com/Adphorus/react-date-range) - A React component for choosing dates and date ranges. ![](https://img.shields.io/github/stars/Adphorus/react-date-range.svg?style=social\u0026label=Star)\n- [react-datetime](https://github.com/YouCanBookMe/react-datetime) - A lightweight but complete datetime picker react component. ![](https://img.shields.io/github/stars/YouCanBookMe/react-datetime.svg?style=social\u0026label=Star)\n- [devextreme-reactive](https://github.com/DevExpress/devextreme-reactive) - High-performance plugin-based scheduler/calendar for Material Design. ![](https://img.shields.io/github/stars/DevExpress/devextreme-reactive.svg?style=social\u0026label=Star)\n- [react-nice-dates](https://github.com/hernansartorio/react-nice-dates) - A responsive, touch-friendly, and modular date picker library. ![](https://img.shields.io/github/stars/hernansartorio/react-nice-dates.svg?style=social\u0026label=Star)\n- [react-date-picker](https://github.com/wojtekmaj/react-date-picker) - A date picker for your React app. ![](https://img.shields.io/github/stars/wojtekmaj/react-date-picker.svg?style=social\u0026label=Star)\n- [react-yearly-calendar](https://github.com/BelkaLab/react-yearly-calendar) - React.js Yearly Calendar Component. ![](https://img.shields.io/github/stars/BelkaLab/react-yearly-calendar.svg?style=social\u0026label=Star)\n- [react-flatpickr](https://github.com/coderhaoxin/react-flatpickr) - Flatpickr for React. ![](https://img.shields.io/github/stars/coderhaoxin/react-flatpickr.svg?style=social\u0026label=Star)\n- [react-google-flight-datepicker](https://github.com/JSLancerTeam/react-google-flight-datepicker) - React date picker inspired by Google Flight. ![](https://img.shields.io/github/stars/JSLancerTeam/react-google-flight-datepicker.svg?style=social\u0026label=Star)\n- [react-datepicker2](https://github.com/mberneti/react-datepicker2) - A simple and reusable datepicker component (with persian jalali calendar support). ![](https://img.shields.io/github/stars/mberneti/react-datepicker2.svg?style=social\u0026label=Star)\n- [date-range-picker](https://github.com/almogtavor/date-range-picker) - A calendar component that supports date, range \u0026 ranges picks. ![](https://img.shields.io/github/stars/almogtavor/date-range-picker.svg?style=social\u0026label=Star)\n- [react-simple-timefield](https://github.com/antonfisher/react-simple-timefield) - Simple time input field. ![](https://img.shields.io/github/stars/antonfisher/react-simple-timefield.svg?style=social\u0026label=Star)\n- [react-timezone-select](https://github.com/ndom91/react-timezone-select) - Dynamic, succinct timezone select. Based on `react-select`. ![](https://img.shields.io/github/stars/ndom91/react-timezone-select.svg?style=social\u0026label=Star)\n\n#### Emoji picker\n\n- [emoji-mart](https://github.com/missive/emoji-mart) - Emoji Mart is a customizable emoji picker HTML component for the web. ![](https://img.shields.io/github/stars/missive/emoji-mart.svg?style=social)\n- [interweave-emoji-picker](https://github.com/milesj/interweave/tree/master/packages/emoji-picker) - A React based emoji picker powered by Interweave and Emojibase. ![](https://img.shields.io/github/stars/milesj/interweave.svg?style=social\u0026label=Star)\n\n#### Color Picker\n\n- [react-colorful](https://github.com/omgovich/react-colorful) - A tiny (2,5 KB), dependency-free, fast and accessible color picker component. ![](https://img.shields.io/github/stars/omgovich/react-colorful.svg?style=social\u0026label=Star)\n- [react-input-color](https://github.com/wangzuo/react-input-color) - React input color component with hsv color picker. ![](https://img.shields.io/github/stars/wangzuo/react-input-color.svg?style=social\u0026label=Star)\n- [coloreact](https://github.com/elrumordelaluz/coloreact) - A tiny Color Picker for React. ![](https://img.shields.io/github/stars/elrumordelaluz/coloreact.svg?style=social\u0026label=Star)\n- [react-color](https://github.com/uiwjs/react-color) - Is a tiny color picker widget component for React apps. ![](https://img.shields.io/github/stars/uiwjs/react-color.svg?style=social\u0026label=Star)\n\n#### Slider\n\n- [react-slider](https://github.com/mpowaga/react-slider) - Slider component for React. ![](https://img.shields.io/github/stars/mpowaga/react-slider.svg?style=social\u0026label=Star)\n\n#### Sortable List\n\n- [sortablejs](https://github.com/SortableJS/Sortable) - Lists reorderable by drag-and-drop, within and among lists. ![](https://img.shields.io/github/stars/SortableJS/Sortable.svg?style=social\u0026label=Star)\n- [react-anything-sortable](https://github.com/jasonslyvia/react-anything-sortable) - Sort any children with touch support and IE8 compatibility. ![](https://img.shields.io/github/stars/jasonslyvia/react-anything-sortable.svg?style=social\u0026label=Star)\n- [react-sortable](https://github.com/danielstocks/react-sortable) - A sortable list component built with React. ![](https://img.shields.io/github/stars/danielstocks/react-sortable.svg?style=social\u0026label=Star)\n\n#### Rich Text Editor\n\n- [slate](https://github.com/ianstormtaylor/slate/tree/main/packages/slate-reacte) - A completely customizable framework for building rich text editors. ![](https://img.shields.io/github/stars/ianstormtaylor/slate.svg?style=social\u0026label=Star)\n- [draft-js](https://github.com/facebook/draft-js) - A React framework for building text editors. ![](https://img.shields.io/github/stars/facebook/draft-js.svg?style=social\u0026label=Star)\n- [react-draft-wysiwyg](https://github.com/jpuri/react-draft-wysiwyg) - WYSIWYG editor build on top of [DraftJS](https://draftjs.org/). ![](https://img.shields.io/github/stars/jpuri/react-draft-wysiwyg.svg?style=social\u0026label=Star)\n- [react-quill](https://github.com/zenoamaro/react-quill) - Quill wrapper. ![](https://img.shields.io/github/stars/zenoamaro/react-quill.svg?style=social\u0026label=Star)\n- [braft-editor](https://github.com/margox/braft-editor) - A web rich text editor based on draft-js, suitable for React framework, compatible with mainstream modern browsers. ![](https://img.shields.io/github/stars/margox/braft-editor.svg?style=social\u0026label=Star)\n- [alloyeditor](https://github.com/liferay/alloy-editor) - WYSIWYG editor based on CKEditor with completely rewritten UI. ![](https://img.shields.io/github/stars/liferay/alloy-editor.svg?style=social\u0026label=Star)\n- [remirror](https://github.com/remirror/remirror) - ProseMirror toolkit for React. ![](https://img.shields.io/github/stars/remirror/remirror.svg?style=social\u0026label=Star)\n- [react-contenteditable](https://github.com/lovasoa/react-contenteditable) - React component for a div with editable contents. ![](https://img.shields.io/github/stars/lovasoa/react-contenteditable.svg?style=social\u0026label=Star)\n- [megadraft](https://github.com/globocom/megadraft) - Rich Text editor built on top of draft.js. ![](https://img.shields.io/github/stars/globocom/megadraft.svg?style=social\u0026label=Star)\n- [edtr-io](https://github.com/edtr-io/edtr-io) - WYSIWYG in-line web editor with plugins. ![](https://img.shields.io/github/stars/edtr-io/edtr-io.svg?style=social\u0026label=Star)\n- [react-medium-editor](https://github.com/wangzuo/react-medium-editor) - medium-editor wrapper. ![](https://img.shields.io/github/stars/wangzuo/react-medium-editor.svg?style=social\u0026label=Star)\n- [ckeditor5-react](https://github.com/ckeditor/ckeditor5-react) - An official CKEditor 5 rich text editor wrapper. ![](https://img.shields.io/github/stars/ckeditor/ckeditor5-react.svg?style=social\u0026label=Star)\n- [smartblock](https://github.com/appleple/smartblock) - Block based WYSIWYG editor based on ProseMirror. ![](https://img.shields.io/github/stars/appleple/smartblock.svg?style=social\u0026label=Star)\n- [react-trumbowyg](https://github.com/RD17/react-trumbowyg) - [Trumbowyg](https://alex-d.github.io/Trumbowyg/) wrapper. ![](https://img.shields.io/github/stars/RD17/react-trumbowyg.svg?style=social\u0026label=Star)\n- [ckeditor4-react](https://github.com/ckeditor/ckeditor4-react) - An official CKEditor 4 rich text editor wrapper. ![](https://img.shields.io/github/stars/ckeditor/ckeditor4-react.svg?style=social\u0026label=Star)\n- [react-editor](https://github.com/fritx/react-editor) - Simple richtext editor that can insert images and HTML. ![](https://img.shields.io/github/stars/fritx/react-editor.svg?style=social\u0026label=Star)\n\n#### Code Editor\n\n- [react-ace](https://github.com/securingsincity/react-ace) - Ace (Advanced Code Editor) wraper. ![](https://img.shields.io/github/stars/securingsincity/react-ace.svg?style=social\u0026label=Star)\n- [react-codemirror2](https://github.com/scniro/react-codemirror2) - Codemirror integrated components for React. ![](https://img.shields.io/github/stars/scniro/react-codemirror2.svg?style=social\u0026label=Star)\n- [react-codemirror](https://github.com/uiwjs/react-codemirror) - CodeMirror component for React. ![](https://img.shields.io/github/stars/uiwjs/react-codemirror.svg?style=social\u0026label=Star)\n- [react-monacoeditor](https://github.com/jaywcjlove/react-monacoeditor) - Monaco Editor component for React. ![](https://img.shields.io/github/stars/jaywcjlove/react-monacoeditor.svg?style=social\u0026label=Star)\n\n#### Markdown Editor\n\n- [react-md-editor](https://github.com/uiwjs/react-md-editor) - A simple markdown editor with preview, implemented with React.js and TypeScript. ![](https://img.shields.io/github/stars/uiwjs/react-md-editor.svg?style=social\u0026label=Star)\n- [react-simplemde-editor](https://github.com/RIP21/react-simplemde-editor) - React component wrapper for [EasyMDE (the most fresh SimpleMDE fork)](https://github.com/Ionaru/easy-markdown-editor). ![](https://img.shields.io/github/stars/RIP21/react-simplemde-editor.svg?style=social\u0026label=Star)\n- [react-md-editor](https://github.com/JedWatson/react-md-editor) - Markdown editor. ![](https://img.shields.io/github/stars/JedWatson/react-md-editor.svg?style=social\u0026label=Star)\n- [react-markdown-editor](https://github.com/jrm2k6/react-markdown-editor) - A markdown editor using React/Reflux. ![](https://img.shields.io/github/stars/jrm2k6/react-markdown-editor.svg?style=social\u0026label=Star)\n\n#### Image Editing\n\n- [react-image-crop](https://github.com/DominicTobias/react-image-crop) - A responsive image cropping tool for React. ![](https://img.shields.io/github/stars/DominicTobias/react-image-crop.svg?style=social\u0026label=Star)\n- [react-avatar-editor](https://github.com/mosch/react-avatar-editor) - Facebook-like, avatar / profile picture component. ![](https://img.shields.io/github/stars/mosch/react-avatar-editor.svg?style=social\u0026label=Star)\n- [react-easy-crop](https://github.com/ricardo-ch/react-easy-crop) - Component to crop/rotate images/videos with easy interactions. Touch friendly. ![](https://img.shields.io/github/stars/ricardo-ch/react-easy-crop.svg?style=social\u0026label=Star)\n- [react-image-cropper](https://github.com/jerryshew/react-image-cropper) - Image cropper. ![](https://img.shields.io/github/stars/jerryshew/react-image-cropper.svg?style=social\u0026label=Star)\n- [react-avatar-generator](https://github.com/JosephSmith127/react-avatar-generator) - Generate fun kaleidoscope for user avatars. ![](https://img.shields.io/github/stars/JosephSmith127/react-avatar-generator.svg?style=social\u0026label=Star)\n\n### GraphQL\n\n- [react-relay](https://github.com/facebook/relay/tree/main/packages/react-relay) - Relay is a JavaScript framework for building data-driven React applications. ![](https://img.shields.io/github/stars/facebook/relay.svg?style=social\u0026label=Star)\n\n## UI Animation\n\n- [react-spring](https://github.com/react-spring/react-spring) - A spring physics based animation library. ![](https://img.shields.io/github/stars/react-spring/react-spring.svg?style=social\u0026label=Star)\n- [react-motion](https://github.com/chenglou/react-motion) - A spring that solves your animation problems. ![](https://img.shields.io/github/stars/chenglou/react-motion.svg?style=social\u0026label=Star)\n- [framer-motion](https://github.com/framer/motion) - An animation and gesture library. ![](https://img.shields.io/github/stars/framer/motion.svg?style=social\u0026label=Star)\n- [react-flip-move](https://github.com/joshwcomeau/react-flip-move) - Effortless animation between DOM changes (eg. list reordering) using the FLIP technique. ![](https://img.shields.io/github/stars/joshwcomeau/react-flip-move.svg?style=social\u0026label=Star)\n- [react-flip-toolkit](https://github.com/aholachek/react-flip-toolkit) - A lightweight magic-move library for configurable layout transitions. ![](https://img.shields.io/github/stars/aholachek/react-flip-toolkit.svg?style=social\u0026label=Star)\n- [velocity-react](https://github.com/twitter-fabric/velocity-react) - Velocity.js wrapper. ![](https://img.shields.io/github/stars/twitter-fabric/velocity-react.svg?style=social\u0026label=Star)\n- [react-animations](https://github.com/FormidableLabs/react-animations) - A collection of animations for inline style libraries, React-animations implements all animations from animate.css. ![](https://img.shields.io/github/stars/FormidableLabs/react-animations.svg?style=social\u0026label=Star)\n- [react-router-transition](https://github.com/maisano/react-router-transition) - Transitions built for react-router, powered by react-motion. ![](https://img.shields.io/github/stars/maisano/react-router-transition.svg?style=social\u0026label=Star)\n- [react-tsparticles](https://github.com/matteobruni/tsparticles/blob/master/components/react/README.md) - A lightweight component to easily create interactive particles animations. ![](https://img.shields.io/github/stars/matteobruni/tsparticles.svg?style=social\u0026label=Star)\n- [react-reveal](https://github.com/rnosov/react-reveal) - Easily add reveal on scroll animations to your React app. ![](https://img.shields.io/github/stars/rnosov/react-reveal.svg?style=social\u0026label=Star)\n- [react-anime](https://github.com/stelatech/react-anime) - A super easy animation library. ![](https://img.shields.io/github/stars/stelatech/react-anime.svg?style=social\u0026label=Star)\n- [react-gsap-enhancer](https://github.com/azazdeaz/react-gsap-enhancer) - Use the full power of React and GSAP together. ![](https://img.shields.io/github/stars/azazdeaz/react-gsap-enhancer.svg?style=social\u0026label=Star)\n- [data-driven-motion](https://github.com/tkh44/data-driven-motion) - Easily animate your data. ![](https://img.shields.io/github/stars/tkh44/data-driven-motion.svg?style=social\u0026label=Star)\n- [gooey-react](https://github.com/luukdv/gooey-react) - The gooey effect for React, used for shape blobbing / metaballs. ![](https://img.shields.io/github/stars/luukdv/gooey-react.svg?style=social\u0026label=Star)\n- [react-particles-bg](https://github.com/lindelof/particles-bg) - Particles backgrounds. ![](https://img.shields.io/github/stars/lindelof/particles-bg.svg?style=social\u0026label=Star)\n- [react-mt-svg-lines](https://github.com/moarwick/react-mt-svg-lines) - Wrapper to animate the line stroke in SVGs. ![](https://img.shields.io/github/stars/moarwick/react-mt-svg-lines.svg?style=social\u0026label=Star)\n- [react-spark-scroll](https://github.com/gilbox/react-spark-scroll) - Scroll-based actions and animations for react. ![](https://img.shields.io/github/stars/gilbox/react-spark-scroll.svg?style=social\u0026label=Star)\n- [react-track](https://github.com/gilbox/react-track) - Track the position of DOM elements. Create cool animations. ![](https://img.shields.io/github/stars/gilbox/react-track.svg?style=social\u0026label=Star)\n- [tween-one](https://github.com/react-component/tween-one) - Animate One React Element.  ![](https://img.shields.io/github/stars/react-component/tween-one.svg?style=social\u0026label=Star)\n- [react-web-animation](https://github.com/bringking/react-web-animation) - React components for the Web Animations API -. ![](https://img.shields.io/github/stars/bringking/react-web-animation.svg?style=social\u0026label=Star)\n- [react-transitive-number](https://github.com/Lapple/react-transitive-number) - Apply transition effect to numeric strings, a la old Groupon timers. ![](https://img.shields.io/github/stars/Lapple/react-transitive-number.svg?style=social\u0026label=Star)\n- [react-tweenful](https://github.com/teodosii/react-tweenful) -  Animation engine that lets you animate DOM nodes, mounting, unmounting, child changes/transitions. ![](https://img.shields.io/github/stars/teodosii/react-tweenful.svg?style=social\u0026label=Star)\n- [auto-size-transition](https://github.com/DualWield/auto-size-transition) - A component that scale dynamically according to the internal children size.  ![](https://img.shields.io/github/stars/DualWield/auto-size-transition.svg?style=social\u0026label=Star)\n\n### Parallax\n\n- [react-parallax](https://github.com/rrutsche/react-parallax) - A React Component for parallax effect. ![](https://img.shields.io/github/stars/rrutsche/react-parallax.svg?style=social\u0026label=Star)\n- [react-parallax-tilt](https://github.com/mkosir/react-parallax-tilt) - Easily apply parallax tilt hover effect on components. ![](https://img.shields.io/github/stars/mkosir/react-parallax-tilt.svg?style=social\u0026label=Star)\n- [react-parallax-component](https://github.com/keske/react-parallax-component) - Easiest way to add scroll parallax effect on the component. ![](https://img.shields.io/github/stars/keske/react-parallax-component.svg?style=social\u0026label=Star)\n\n## Static Site Generator \u0026 Documentation Generator \u0026 Blogging\n\n- [gatsby](https://github.com/gatsbyjs/gatsby) - Build blazing fast, modern apps and websites with React. ![](https://img.shields.io/github/stars/gatsbyjs/gatsby.svg?style=social\u0026label=Star)\n- [Docusaurus](https://github.com/facebook/docusaurus) - Easy to maintain open source documentation websites. ![](https://img.shields.io/github/stars/facebook/docusaurus.svg?style=social\u0026label=Star)\n- [react-static](https://github.com/react-static/react-static) - A progressive static site generator for React. ![](https://img.shields.io/github/stars/react-static/react-static.svg?style=social\u0026label=Star)\n- [dumi](https://github.com/umijs/dumi) - 📖 Documentation Generator of React Component. ![](https://img.shields.io/github/stars/umijs/dumi.svg?style=social\u0026label=Star)\n- [component-controls](https://github.com/ccontrols/component-controls) - A next-generation tool to create blazing-fast documentation sites. ![](https://img.shields.io/github/stars/ccontrols/component-controls.svg?style=social\u0026label=Star)\n\n## Dev Tools\n\n### Debug\n\n- [react-dev-inspector](https://github.com/zthxxx/react-dev-inspector) - Jump to local IDE code directly from browser React component by just a simple click.  ![](https://img.shields.io/github/stars/zthxxx/react-dev-inspector.svg?style=social\u0026label=Star)\n\n### Performance\n\n- [@welldone-software/why-did-you-render](https://github.com/welldone-software/why-did-you-render) - why-did-you-render by Welldone Software monkey patches React to notify you about potentially avoidable re-renders. (Works with React Native as well.)  ![](https://img.shields.io/github/stars/welldone-software/why-did-you-render.svg?style=social\u0026label=Star)\n\n### Test\n\n- [jest](https://github.com/facebook/jest) - Delightful JavaScript Testing. ![](https://img.shields.io/github/stars/facebook/jest.svg?style=social\u0026label=Star)\n- [enzyme](https://github.com/airbnb/enzyme) - JavaScript Testing utilities for React. ![](https://img.shields.io/github/stars/airbnb/enzyme.svg?style=social\u0026label=Star)\n- [react-testing-library](https://github.com/testing-library/react-testing-library) - 🐐 Simple and complete React DOM testing utilities that encourage good testing practices. ![](https://img.shields.io/github/stars/testing-library/react-testing-library.svg?style=social\u0026label=Star)\n- [react-hooks-testing-library](https://github.com/testing-library/react-hooks-testing-library) - Simple and complete React hooks testing utilities that encourage good testing practices. ![](https://img.shields.io/github/stars/testing-library/react-hooks-testing-library.svg?style=social\u0026label=Star)\n- [chai-enzyme](https://github.com/producthunt/chai-enzyme) - Chai.js assertions and convenience functions for testing React Components with enzyme. ![](https://img.shields.io/github/stars/producthunt/chai-enzyme.svg?style=social\u0026label=Star)\n- [ui-harness](https://github.com/philcockfield/ui-harness) - Create, isolate and test modular UI components in React. ![](https://img.shields.io/github/stars/philcockfield/ui-harness.svg?style=social\u0026label=Star)\n- [react-unit](https://github.com/pzavolinsky/react-unit) - Lightweight unit test library for ReactJS. ![](https://img.shields.io/github/stars/pzavolinsky/react-unit.svg?style=social\u0026label=Star)\n- [unexpected-react](https://github.com/bruderstein/unexpected-react) - Plugin for unexpected to enable testing the full React virtual DOM, and also the shallow renderer. ![](https://img.shields.io/github/stars/bruderstein/unexpected-react.svg?style=social\u0026label=Star)\n- [redux-test-recorder](https://github.com/conorhastings/redux-test-recorder) - A redux middleware to automatically generate tests for reducers through ui interaction. ![](https://img.shields.io/github/stars/tcoopman/react-flexbox.svg?style=social\u0026label=Star)\n- [rut](https://github.com/milesj/rut) - React testing made easy with `react-test-renderer`. Supports DOM and custom renderers. ![](https://img.shields.io/github/stars/milesj/rut.svg?style=social\u0026label=Star)\n","funding_links":[],"categories":["Repository","miscellaneous","Programming Language Lists"],"sub_categories":["Data Visualization","JavaScript Lists"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuaize2020%2Fawesome-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhuaize2020%2Fawesome-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuaize2020%2Fawesome-react/lists"}