Skip to content

Latest commit

 

History

History
719 lines (560 loc) · 88 KB

README-en.md

File metadata and controls

719 lines (560 loc) · 88 KB
Raw

English | 简体中文

Under continuous construction...

Table of contents

Official

Utilities

Router

  • react-router - Declarative routing for React.
  • reach - Next Generation Routing for React.
  • wouter - A minimalist-friendly ~1.3KB routing library.
  • navi - Declarative, asynchronous routing for React.
  • universal-router - A simple middleware-style router for isomorphic JavaScript web apps.
  • 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.
  • curi - JavaScript router for single-page applications.

Hooks Collection

  • react-use - React Hooks.
  • react-query - Hooks for fetching, caching and updating asynchronous data in React.
  • ahooks - A collection of React Hooks specifically aiming at enterprise applications.
  • beautiful-react-hooks - A collection of hooks to speed-up your components and custom hooks development.

State Management

  • redux - Predictable State Container for JavaScript Apps.
  • mobx - Simple, scalable state management.
  • xstate-react - State machines and statecharts for the modern web.
  • flux - Application architecture for building user interfaces.
  • dva - 🌱 React and redux based, lightweight and elm-style framework. (Inspired by elm and choo).
  • recoil - Experimental state management library for React apps.
  • zustand - Bear necessities for state management in React.
  • jotai - Primitive and flexible state management for React.
  • easy-peasy - An abstraction of Redux, providing a reimagined API that focuses on developer experience.
  • effector - Fast and powerful reactive state manager.
  • reactn - React, but with built-in global state management.
  • hookstate - The simple but very powerful and incredibly fast state management for React that is based on hooks.

i18n

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

style

  • @emotion/react - 👩‍🎤 CSS-in-JS library designed for high performance style composition.
  • classnames - A simple javascript utility for conditionally joining classNames together.

UI Frameworks

  • ant-design - An enterprise-class UI design language and React UI library.
  • material-ui - React components for faster and easier web development.
  • chakra-ui - Simple, Modular & Accessible UI Components for your React Applications.
  • react-bootstrap - Bootstrap components built with React.
  • blueprint - A React-based UI toolkit for the webs.
  • semantic-ui-react - The official Semantic-UI-React integration.
  • office-ui-fabric-react - React components for building Microsoft web experiences.
  • Fluent UI - A set of React components for building Microsoft web experiences.
  • evergreen - Evergreen React UI Framework by Segment.
  • reactstrap - Simple React Bootstrap 4 components.
  • rebass - React primitive UI components built with styled-system.
  • grommet - A react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package.
  • baseweb - Base is a design system comprised of modern, responsive, living components. Base Web is the React implementation of Base.
  • rsuite - A suite of React components.
  • react-spectrum - Adobe's collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
  • reakit - Accessible, Composable and Customizable components for React.
  • carbon - A design system built by IBM.
  • semi-design - A modern, comprehensive, flexible design system and UI library. Quickly build beautiful React apps by douyin FE.
  • searchkit - React UI components / widgets. The easiest way to build a great search experience with Elasticsearch.
  • gestalt - A set of components that supports Pinterest’s design language.
  • eui - Elastic UI Framework.
  • ring-ui - JetBrains Web UI components.
  • zeit-ui-react - Modern and minimalist React UI library.
  • primereact - A complete UI Framework for React with 50+ components featuring material, bootstrap and custom themes.
  • mantine - React components and hooks library with native dark theme support focused on usability, accessibility and developer experience.
  • arco-design - A comprehensive React UI components library.
  • ChatUI - The UI design language and React library for Conversational UI.
  • orbit-components - Components for building travel oriented projects.
  • react-bulma-components - React components for Bulma framework.
  • bumbag-ui - Build accessible & themeable React applications with your Bumbag.
  • shineout - Chinese-friendly set of components: form elements, navigation, table, tree, tree select drop-down etc.
  • pivotal-ui-react - React components based on a custom version of the Bootstrap library.
  • react-foundation - Foundation as React components.
  • react-bulma - React.js components for Modern CSS framework based on Flexbox.
  • trunx - Super Saiyan React components, son of awesome Bulma, implemented in TypeScript.
  • cdbreact - Elegant UI Kit library and reusable components for building mobile-first, responsive websites and web apps.

Mobile

  • antd-mobile - Configurable Mobile UI from China.
  • OnsenUI - Mobile app framework with Material and flat (iOS) designs. Based on Web Components.

Solution

  • ant-design-pro - An out-of-box UI solution for enterprise applications as a React boilerplate.
  • 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.

Boilerplate

UI Components

Buttons

  • react-awesome-button - 3D animated 60fps buttons with load progress and social share actions.
  • reactive-button - A beautiful animated button component with progress indicator.

Icons

  • react-icons - Svg react icons of popular icon packs using ES6 imports.
  • react-fontawesome - A React Font Awesome component.
  • iconify-react - Over 40k icons from 50+ icon sets, including all popular icon and emoji sets.
  • react-open-doodles - A Free Set of Sketchy Illustrations provided by opendoodles.

Layout

flexbox implementation

  • hedron - A no-frills flexbox grid system, powered by styled-components.
  • react-reflex - Flex layout container component for advanced React web applications.
  • flexbox-react - Unopinionated, standard compliant flexbox components.
  • react-flexbox - React flexbox implementation.

Tooltip

  • react-tooltip - React tooltip component.
  • react-popper - 🍿⚛Official React library to use Popper, the positioning library.

Notification

  • react-toastify - 🎉 React-Toastify allows you to add notifications to your app with ease. No more nonsense.
  • react-hot-toast - Smoking 🔥hot🔥 Notifications for React. Lightweight, customizable and beautiful by default.
  • notistack - Highly customizable notification snackbars (toasts) that can be stacked on top of each other.
  • react-toast-notifications - A React & Redux notifications system.
  • react-notifications-component - Highly customizable and easy-to-use component for notifications.
  • cogo-toast - Beautiful, Zero Configuration, Toast Messages for React ~4kb gzip (with styles and icons)
  • simple-react-notifications - Tiny notification library (1kb gzip).
  • react-toast - Minimal toast notifications.

Dialog/Modal/Alert

  • react-modal - Accessible modal dialog component for React.
  • react-aria-modal - A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.
  • react-skylight - A react component for modals and dialogs.
  • nice-modal-react - A nice modal manager for React.
  • sweetalert2-react-content - Official SweetAlert2 enhancer adding support for React elements as content.
  • reoverlay - The missing solution for managing modals.
  • reboron - A collection of dialog animations with React.js.

Menu

Sticky

Tabs

Device Input/User Action

Keyboard Events

Scroll Events

Touch Swipe

Mouse Events

Drag and Drop

Resizable

Editable data grid / spreadsheet

  • ag-grid - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components.
  • react-data-grid - Excel-like grid.
  • revo-grid - Powerfull Data Grid for React / AngularJS / Vue / Web Components with advanced customization.
  • ReactGrid - Add spreadsheet-like behavior to your app.
  • gigatables-react - Sorting, pagination/infinite scroll, global/column search, AJAX CRUD, and more.

Table

  • react-table - Hooks for building fast and extendable tables and datagrids.
  • material-table - Built on Material UI, plus: grouping, tree data, expandable rows, export, inline editing.
  • mui-datatables - Built on Material-UI. Search, styling, filtering, resize/hide columns, export, print, select/expand rows.
  • @devexpress/dx-react-grid - High-performance plugin-based data grid for Bootstrap and Material Design.
  • react-data-table - Accessible, responsive, themable, declaratively configurable table with sorting, selectable rows, expandable rows, pagination.
  • rsuite-table - A table component that supports virtualized.
  • ka-table - Customizable table component with sorting, filtering, grouping, virtualization, editing etc.
  • sematable - Client side sorting, pagination, and text filter for redux/react based apps.
  • @progress/kendo-react-grid - Powerful data grid component with 100+ ready-to-use features like paging, sorting, export to Excel, and more.

Viewer

Carousel

Lazy Load

  • react-lazyload - Lazyload your Component, Image or anything matters the performance.
  • react-lazy-load - React component that renders children elements when they enter the viewport.

Infinite Scroll / Virtualized List / Virtualized Tree

  • react-virtualized - React components for efficiently rendering large lists and tabular data.
  • react-window - React components for efficiently rendering large lists and tabular data.
  • react-list - A versatile infinite scroll React component.
  • @egjs/react-infinitegrid - A module used to arrange card elements including content infinitely according to various layout types.
  • react-virtualized-tree - A virtualized tree view component making use of react.
  • af-virtual-scroll - Render large scrollable lists and tables.

Loader

Collapse

  • react-collapse - Component-wrapper for collapse animation with react-motion.
  • react-accessible-accordion - Accessible Accordion component for React.
  • react-tabbordion - demo - 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.

Tree

  • react-treebeard - React Tree View Component. Data-Driven, Fast, Efficient and Customisable.
  • react-treeview - Easy, light, flexible tree view made with React.
  • react-complex-tree - Unopinionated Accessible Tree Component with Multi-Select, Drag-And-Drop and Search.

Navigation

Custom Scrollbar

Audio / Video

Time / Date / Age

  • react-timeago - A simple time-ago component for ReactJs.
  • timeago-react - Format date with *** time ago statement. eg: '3 hours ago'.

Photo / Image

QrCode

Paginator

Canvas

  • react-konva - React Konva is a JavaScript library for drawing complex canvas graphics with bindings to the Konva Framework.

Whiteboard/Sketch/Draw Editor

  • @excalidraw/excalidraw - Virtual whiteboard for sketching hand-drawn like diagrams.
  • react-sketch - A Sketch tool for React based applications, backed-up by FabricJS.
  • react-sketch-canvas - Freehand vector drawing tool for React using SVG as canvas. Accepts input from Mouse, touch, and graphic tablets.
  • 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.

Guided Tours

Data Visualization

Charts

  • recharts - Redefined chart library built with React and D3.
  • visx - 🐯 visx | visualization components.
  • nivo - Provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries.
  • victory - Data viz for React.
  • react-vis - Data visualization library based on React and d3.
  • BizCharts - Powerful data visualization library based on G2 and React.
  • react-chartjs-2 - Common react charting components using Chart.js 2.0.
  • echarts-for-react - Apache ECharts components for React wrapper.
  • react-sparklines - Beautiful and expressive Sparklines React component.
  • semiotic - Semiotic is a data visualization framework for React.
  • react-d3-components - D3 Components for React.
  • react-dazzle - Dashboards made easy in React JS.
  • react-highcharts - React-highcharts.
  • react-google-charts - React-google-charts React component.
  • react-timeseries-charts - Declarative timeseries charts.
  • chartify - React.js plugin for building animated draggable and customizable charts.
  • react-chartist - React component for Chartist.js.
  • rumble-charts - React components for building composable and flexible charts.
  • ej2-react-charts - Beautiful and interactive charts & graphs for react.
  • react-charty - Small but powerful interactive data viz with multiple chart types, animations, zooming, theming.
  • react-heat-map - A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph.
  • react-muze - React wrapper for muze(free data visualization library for creating exploratory data visualizations in browser, using WebAssembly)

Graphs

  • graphin - A React toolkit for graph visualization based on G6.
  • react-sigmajs - Lightweight but powerful library for drawing network graphs built on top of SigmaJS.

Map

Gantt

Common

Form Components

Form Logic

  • formik - Build forms without tears and supports Validation in ease.
  • react-hook-form - React hooks for form validation without the hassle.
  • redux-form - Redux form state management (Web and Native).
  • react-jsonschema-form - A React component for building Web forms from JSONSchema.
  • react-final-form - Subscription-based form state management.
  • formily - High performance, extensible, and Typescript friendly.
  • surveyjs - The advanced Survey and Form library.
  • formsy-react - A form input builder and validator for React JS.
  • react-validation-mixin - Simple validation mixin (HoC) for React.

Input Types

Autocomplete

Autosize Input / Textarea

Tag Input

Select

Radio Button

Star Rating

Toggle

Date / Time picker

Emoji picker

  • emoji-mart - Emoji Mart is a customizable emoji picker HTML component for the web.
  • interweave-emoji-picker - A React based emoji picker powered by Interweave and Emojibase.

Color Picker

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

Slider

Sortable List

Rich Text Editor

Code Editor

Markdown Editor

Image Editing

GraphQL

  • react-relay - Relay is a JavaScript framework for building data-driven React applications.

UI Animation

Parallax

Static Site Generator & Documentation Generator & Blogging

  • gatsby - Build blazing fast, modern apps and websites with React.
  • Docusaurus - Easy to maintain open source documentation websites.
  • react-static - A progressive static site generator for React.
  • dumi - 📖 Documentation Generator of React Component.
  • component-controls - A next-generation tool to create blazing-fast documentation sites.

Dev Tools

Debug

  • react-dev-inspector - Jump to local IDE code directly from browser React component by just a simple click.

Performance

  • @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.)

Test

  • jest - Delightful JavaScript Testing.
  • enzyme - JavaScript Testing utilities for React.
  • react-testing-library - 🐐 Simple and complete React DOM testing utilities that encourage good testing practices.
  • react-hooks-testing-library - Simple and complete React hooks testing utilities that encourage good testing practices.
  • chai-enzyme - Chai.js assertions and convenience functions for testing React Components with enzyme.
  • ui-harness - Create, isolate and test modular UI components in React.
  • react-unit - Lightweight unit test library for ReactJS.
  • unexpected-react - Plugin for unexpected to enable testing the full React virtual DOM, and also the shallow renderer.
  • redux-test-recorder - A redux middleware to automatically generate tests for reducers through ui interaction.
  • rut - React testing made easy with react-test-renderer. Supports DOM and custom renderers.