加入CODE CHINA

· 不限速    · 不限空间    · 不限人数    · 私仓免费

免费加入
    README.md

    🚀 Absolutely Awesome React Components & Libraries

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

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

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

    Maintainers:

    Contributing

    Please review our contributing guidelines. We keep this list fresh by requiring all PRs to remove one or more non-awesome entries from this list. Please ONLY PR a new resource if you are ALSO removing one.

    Table of Contents

    UI Components

    Editable data grid / spreadsheet

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

    Table

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

    Infinite Scroll

    Overlay

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

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

    Notification

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

    Tooltip

    Menu

    Menus / sidebars

    Sticky

    Fixed headers / scroll-up headers / sticky elements

    Tabs

    Loader

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

    Carousel

    Buttons

    Collapse

    Chart

    Display data in charts / graphs / diagrams

    Tree

    Display a tree data structure

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

    UI Navigation

    Ways to navigate views

    Custom Scrollbar

    Audio / Video

    Map

    Time / Date / Age

    Display time / date / age

    Photo / Image

    Display images / photos

    Icons

    Display icons / icon set / emojis

    • iconify-react - Over 40k icons from 50+ icon sets, including all popular icon and emoji sets.
    • react-icons - Svg react icons of popular icon packs using ES6 imports.
    • react-open-doodles - Awesome free illustrations as react components.

    Paginator

    Display a control element to paginate

    Markdown Viewer

    Display parsed markdow source

    Canvas

    Sketch input using Canvas or SVG

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

    Miscellaneous

    Form Components

    Let the user enter data

    Date / Time picker

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

    Emoji picker

    Input Types

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

    Autocomplete

    Autosuggest / autocomplete / typeahead

    Select

    Color Picker

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

    Toggle

    Slider

    Radio Button

    Type Select

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

    Tag Input

    Let the user add multiple tags in a single input

    Autosize Input / Textarea

    Star Rating

    Drag and Drop

    Sortable List

    Let the user define an order on a list

    Rich Text Editor

    Markdown Editor

    Image Editing

    Image manipulation

    Form Component Collections

    Miscellaneous

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

    Syntax Highlight

    UI Layout

    Components to layout the app's UI

    UI Animation

    Animate transitions

    Parallax

    UI Frameworks

    Responsive

    Set of components + responsive layout system

    • zeit-ui-react - Modern and minimalist React UI library.
    • 🚀 ant-design - demo/docs - A UI Design Language from China. Individual components available.
    • atlaskit - Atlassian's official UI library, with components from badge to tree table.
    • base web - Base Web is a foundation for initiating, evolving, and unifying web products.
    • carbon - demo/docs - A design system built by IBM.
    • chakra-ui - demo/docs - Simple, Modular & Accessible UI Components for your React Applications.
    • evergreen - demo/docs - Evergreen React UI Framework by Segment.
    • fluent-ui - demo/docs - 🌈 React components that inspired by Microsoft's Fluent Design System.
    • grommet - The most advanced UX framework for enterprise applications.
    • gestalt - demo/docs - A set of components that supports Pinterest’s design language.
    • insites-ui - Modern, opinionated, minimal, yet powerful React components library, powered by Styled Components.
    • office-ui-fabric-react - React components for building Microsoft web experiences.
    • orbit-components - Components for building travel oriented projects.
    • pivotal-ui-react - React components based on a custom version of the Bootstrap library.
    • primereact - A complete UI Framework with 50+ components featuring material, bootstrap and custom themes.
    • react-bootstrap - Bootstrap components built with React.
    • react-foundation - Foundation as React components.
    • reakit - demo/docs Toolkit for building accessible rich web apps
    • rebass - Configurable React Stateless Functional UI Components.
    • searchkit - React UI components / widgets. The easiest way to build a great search experience with Elasticsearch.
    • semantic-ui-react - The official Semantic-UI-React integration.
    • shineout - demo - Chinese-friendly set of components: form elements, navigation, table, tree, tree select drop-down etc.
    • ChatUI - demo/docs - The UI design language and React library for Conversational UI

    Material Design

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

    Mobile

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

    Component Collections

    • blueprint - demo - docs - UI toolkit for building complex, data-dense web interfaces for desktop (not mobile) applications.
    • dataminr-react-components - Collection of reusable React Components and utility functions.
    • shards-react - docs/demo - A beautiful and modern React design system. Freemium 💰
    • aframe-react - Build virtual reality experiences with A-Frame and React.
    • react-admin - Build admin user experiences on top of REST and GraphQL services.
    • react-desktop - React UI Components for macOS Sierra and Windows 10.
    • matrix-card - demo - Simplest possible component to generate matrix rain style cards.
    • rsuite - demo/docs - Suite of components for "enterprise system products".

    UI Utilities

    Reporter

    Report computed styles

    Visibility Reporter

    Report when a component becomes visible/hidden

    Measurement Reporter

    Determine and report measurements of an element

    Device Input

    Turn user input into actions

    Keyboard Events

    Scroll Events

    Touch Swipe

    Mouse Events

    Meta Tags

    Set meta tags, , children of

    Portal

    Render an element at an arbitrary DOM node

    • react-layer-stack - Simple but ubiquitously powerful and agnostic layering system for React.
    • react-portal - React component for transportation of modals, lightboxes, loading bars... to document.body.

    Test User Behavior

    A/B tests, experiments, ...

    • react-ab - Simple declarative and universal A/B testing component for React.
    • react-experiments - React components for implementing UI experiments.

    Code Design

    Libraries that help with code design

    Data Store

    Data flow / data management / data stores / components state / data flow

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

    Form Logic

    • data-driven-forms - A declarative way for building forms with all the functionality.
    • formcat - A simple and easy way to control forms in React using the React Context API
    • formik - Build forms without tears and supports Validation in ease.
    • formsy-react - A form input builder and validator for React JS.
    • plexus-form - A dynamic form component for react using JSON-Schema.
    • react-hook-form - React hooks for form validation without the hassle.
    • react-jsonschema-form - A React component for building Web forms from JSONSchema.
    • react-validation-mixin - Simple validation mixin (HoC) for React.
    • react-final-form - Subscription-based form state management
    • react-formawesome - Complex library for creating awesome forms.
    • surveyjs - The advanced Survey and Form library
    • Formily - High performance, extensible, and Typescript friendly

    Router

    Props from server

    Component properties asynchronously fetched over the network

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

    Communication with server

    CSS / Style

    • aesthetic - A powerful type-safe, framework agnostic, CSS-in-JS library for styling components, whether it be plain objects, importing stylesheets, or simply referencing external class names.
    • aphrodite - It's inline styles, but they work!.
    • inline-style-prefixer - Run-time Autoprefixer for Inline Style Objects.
    • paperclip - docs - Build UI primitivites with plain HTML & CSS.
    • radium - A set of tools to manage inline styles on React elements.
    • react-container-query - Modular responsive component.
    • react-css-modules - Seamless mapping of class names to CSS modules inside of React components.
    • react-responsive - Media queries in react for responsive design.
    • reactponsive - Responsive components and hooks.
    • styled-components - Visual primitives for the component age.

    HTML Template

    Isomorphic Apps

    Boilerplate

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

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

    Miscellaneous

    • react-inlinesvg - An SVG loader component for ReactJS.
    • react-godfather - A new way to write Functional Components, without Hooks.
    • redux-auth-patch - Complete token authentication system for react + redux that supports isomorphic rendering.
    • redux-search - Redux bindings for client-side search.
    • tcomb-react - Alternative syntax for PropTypes.
    • react-find - ️ Elegant, accessible search component for React.
    • react-universal-hooks - 🎉 support react hooks everywhere (Functional or Class Component).

    Utilities

    i18n

    Internationalization / L10n / localization / translation

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

    Framework bindings / integrations

    Integrations with Third Party Services

    Performance

    UI

    Inspect

    Lazy Load

    • react-infinite-grid - A React component which renders a grid of elements.
    • react-infinite - A browser-ready efficient scrolling container based on UITableView.
    • react-lazy-load - React component that renders children elements when they enter the viewport.
    • react-lazyload - Lazyload your Component, Image or anything matters the performance.
    • react-virtualized - React components for efficiently rendering large lists and tabular data.

    App Size

    Server-Side Rendering

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

    Dev Tools

    Test

    • carte-blanche - An isolated development space with integrated fuzz testing for your components.
    • chai-enzyme - Chai.js assertions and convenience functions for testing React Components with enzyme.
    • enzyme - JavaScript Testing utilities for React.
    • jest-cli - Painless JavaScript Testing.
    • react-unit - Lightweight unit test library for ReactJS.
    • 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.
    • ui-harness - Create, isolate and test modular UI components in React.
    • unexpected-react - Plugin for unexpected to enable testing the full React virtual DOM, and also the shallow renderer.

    Redux

    Inspect

    • fluxguard - PROD change monitoring that highlights all DOM + design changes.
    • react-inspector - Power of Browser DevTools inspectors right inside your React app.
    • react-json-inspector - React JSON inspector component.
    • reactotron - A CLI and OS X app for inspecting your React JS and React Native apps.

    Miscellaneous

    Miscellaneous

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

    Static Website Generator

    • gatsby - Transform plain text into dynamic blogs and websites using React.js.

    Cloud Solutions

    Databases

    项目简介

    🚀 Github 镜像仓库 🚀

    源项目地址

    https://github.com/brillout/awesome-react-components

    发行版本

    当前项目没有发行版本

    贡献者 191

    全部贡献者

    开发语言