2022最新常用React 组件库大全

小何 • • 前端技术 • 575 阅读

项目地址

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

 

项目简介

这是一个很棒的组件列表。不，它不是所有 React 组件的完整列表。那么，“厉害”是什么意思呢？出色地：

  • 它解决了一个实际问题
  • 它在一个?独特的，?漂亮，或者?特殊的方式。（而且它不是超级流行和知名的......没有必要列出这些。）
  • 它有最近的代码提交！

寻找一个?对于真正令人惊叹的项目。并在一些注意事项列表之后寻找快速维护者的评论和评论（斜体括号） 。

维护者：

  • @petebray，Fluxguard 的作者—监控 PROD 网站的变化。
  • @brillout，vite-plugin-ssr（类似于 Next.js / Nuxt，但作为 do-one-thing-do-it-well Vite 插件）和Telefunc（远程函数而不是 API）的作者。

贡献

请查看我们的贡献指南。我们通过要求所有 PR 从这个列表中删除一个或多个非真棒条目来保持这个列表的新鲜。如果您还要删除一个新资源，请仅 PR 一个新资源。

目录

用户界面组件

可编辑的数据网格/电子表格

桌子

  • ka-table -演示- 可定制的表格组件，具有排序、过滤、分组、虚拟化、编辑等功能。
  • material-table - demo/docs - 建立在 Material UI 之上，外加：分组、树数据、可扩展行、导出、内联编辑
  • mui-datatables - 建立在 Material UI 之上。搜索、样式、过滤、调整大小/隐藏列、导出、打印、选择/扩展行。
  • react-data-table -演示/文档- 可访问、响应式、主题化、声明式可配置表，具有排序、可选行、可扩展行、分页
  • react-table -演示- 用于构建快速和可扩展的表和数据网格的钩子
  • react-table-library -演示- React 表库 - 一个几乎无头的表库 - 用于构建更好的表。
  • rsuite-table - demo/docs - 支持虚拟化的表格组件。
  • sematable - 基于 redux/react 的应用程序的客户端排序、分页和文本过滤器。
  • DevExtreme React Grid - 用于 Bootstrap 和 Material Design 的高性能基于插件的数据网格。
  • Smart React Grid - 使用 Material Design 的快速且功能完整的数据网格。
  • KendoReact Grid - 强大的数据网格组件，具有 100 多个即用型功能，如分页、排序、导出到 Excel 等。

无限滚动

覆盖

显示覆盖/模态/警报/对话框/灯箱/弹出

通知

Toaster /snackbar — 使用无模式的临时小弹出窗口通知用户

工具提示

菜单

菜单/侧边栏

黏

固定标题/向上滚动标题/粘性元素

标签

装载机

加载器/微调器/进度条——让用户知道有东西正在加载

旋转木马

纽扣

坍塌

图表

在图表/图形/图表中显示数据

树

显示树形数据结构

用户界面导航

浏览视图的方法

自定义滚动条

音频视频

地图

时间/日期/年龄

显示时间/日期/年龄

照片/图像

显示图像/照片

图标

显示图标/图标集/表情符号

  • iconify-react - 来自 50 多个图标集的超过 40k 图标，包括所有流行的图标和表情符号集。
  • react-icons - 使用 ES6 导入的流行图标包的 Svg 反应图标.
  • react-open-doodles - 很棒的免费插图作为反应组件。
  • react-icomoon - 使用 react-icomoon，您可以轻松地使用您在 icomoon 中选择或创建的图标。
  • tabler-icons-react - 一组超过 450 个免费的 MIT 许可的高质量 SVG 图标。

分页器

显示要分页的控制元素

降价查看器

显示解析的markdow源

帆布

使用 Canvas 或 SVG 进行草图输入

  • react-konva -React Konva 是一个 JavaScript 库，用于绘制复杂的画布图形并绑定到 Konva 框架.
  • react-sketch - 基于 React 的应用程序的 Sketch 工具，由 FabricJS 支持
  • react-sketch-canvas -使用 SVG 作为画布的 React演示手绘矢量绘图工具. 接受来自鼠标、触摸和图形输入板的输入
  • react-heat-map - 基于 SVG 的轻量级日历热图反应组件，GitHub 贡献图的可定制版本。

各种各样的

表单组件

让用户输入数据

日期/时间选择器

日期选择器/时间选择器/日期时间选择器/日期范围选择器

表情符号选择器

  • interweave-emoji- picker - 由 Interweave 和 Emojibase 提供支持的基于 React 的表情符号选择器.

输入类型

掩蔽输入，专用输入；电子邮件/电话号码/信用卡/等

自动完成

自动建议/自动完成/预先输入

选择

选色器

  • coloreact - 用于 React 的小型颜色选择器。
  • react-color - 是一个用于 React 应用程序的微型颜色选择器小部件组件。
  • react-colorful - 一个小巧 (2,5 KB)、无依赖、快速且可访问的颜色选择器组件。
  • react-input-color - 使用 hsv 颜色选择器反应输入颜色组件。

切换

滑块

单选按钮

类型选择

让用户在打字时选择一些东西（例如标签）

标签输入

让用户在单个输入中添加多个标签

自动调整输入/文本区域

星级

拖放

可排序列表

让用户在列表上定义一个订单

  • react-anything-sortable - 对任何具有触摸支持和 IE8 兼容性的子项进行排序。
  • sortablejs - 列表可通过拖放重新排序，在列表内和列表之间。

富文本编辑器

降价编辑器

图像编辑

图像处理

表单组件集合

各种各样的

  • @anatoliygatt/numeric-stepper -演示- 一个完全可主题化且可访问的数字步进器组件。
  • interweave - 用于安全渲染 HTML、过滤属性、使用匹配器自动换行文本、渲染 emoji 字符等的 React 库。
  • react-designer - 在您的反应组件中易于配置、轻量级、可编辑的矢量图形。
  • react-upload-gallery - 用于上传图片库的反应。拖放，可排序，自定义。

语法亮点

界面布局

用于布局应用程序 UI 的组件

界面动画

动画过渡

视差

用户界面框架

响应式

组件集 + 响应式布局系统

  • AgnosticUI - 可访问的 React 组件原语，也可与 Vue 3、Svelte 和 Angular 一起使用！
  • ant-design - demo/docs - 来自中国的 UI 设计语言。可用的单个组件。
  • atlaskit - Atlassian 的官方 UI 库，包含从徽章到树表的组件。
  • base web - Base Web 是启动、发展和统一网络产品的基础。
  • carbon -演示/文档- IBM 构建的设计系统。
  • cdbreact -演示-文档- 优雅的 UI 工具包库和可重用组件，用于构建移动优先、响应式网站和 Web 应用程序。
  • chakra-ui -演示/文档- 用于您的 React 应用程序的简单、模块化和可访问的 UI 组件。
  • ChatUI -演示/文档- 用于对话式 UI 的 UI 设计语言和 React 库
  • CoreUI for React -演示/文档- 开源 UI 组件库。
  • evergreen -演示/文档- 细分的 Evergreen React UI 框架。
  • fluentui - UX 框架，用于创建共享代码、设计和交互行为的漂亮的跨平台应用程序。
  • geist-ui - 现代简约的 React UI 库。
  • gestalt -演示/文档- 一组支持 Pinterest 设计语言的组件。
  • grommet - 用于企业应用程序的最先进的 UX 框架。
  • Mantine -演示/文档- 一个功能齐全的库，包含 100 多个钩子和组件，支持原生深色主题
  • orbit - 用于构建面向旅行的项目的组件。
  • pivotal-ui - 基于 Bootstrap 库的自定义版本的 React 组件。
  • primereact - 一个完整的 UI 框架，包含 50 多个组件，包括材料、引导程序和自定义主题。
  • radix-ui - 用于构建高质量设计系统和 Web 应用程序的无样式、可访问的组件。
  • react-bootstrap - 使用 React 构建的引导组件。
  • react-foundation - 作为 React 组件的基础。
  • reakit -用于构建可访问的富 Web 应用程序的演示/文档工具包
  • searchkit - React UI 组件/小部件。使用 Elasticsearch 构建出色搜索体验的最简单方法。
  • semantic-ui-react - 官方 Semantic-UI-React 集成。
  • semi-design - demo/docs - 一个现代、全面、灵活的设计系统。
  • Shineout -演示- 中文友好的组件集：表单元素，导航，表格，树，树选择下拉等。

材料设计

  • ? Material UI - 全套组件。构建您自己的设计系统，或从 Material Design 开始。
    • 自动完成- 可访问的自动完成、组合框、多选
    • Material Icons - 1,000 多个 SVG 材质图标。
    • Modal - 可访问的模态对话框组件。
    • Slider - 可访问的滑块组件。
    • 表格- 具有排序、选择、分页、虚拟化的表格。
    • Tree View - React 的可访问树视图组件。
  • react-essence - 本质 - 基本的材料设计框架。
  • react-materialize - 反应的材料设计，由 materializecss 提供支持。
  • react-toolbox - 一组实现 Google 的 Material Design 的 React 组件。
  • mdbootstrap - 使用 Material Design 反应 Bootstrap

移动的

  • antd-mobile - 来自中国的可配置移动 UI。
  • Ionic React - Ionic 框架：使用一个代码库轻松构建 Android、桌面和渐进式 Web 应用程序。
  • OnsenUI -演示/文档- 具有 Material 和平面 (iOS) 设计的移动应用程序框架。基于 Web 组件。

组件集合

  • blueprint - demo - docs - UI 工具包，用于为桌面（非移动）应用程序构建复杂的、数据密集的 Web 界面。
  • dataminr-react-components - 可重用的 React 组件和实用功能的集合。
  • shards-react -文档/演示- 一个漂亮而现代的 React 设计系统。免费增值?
  • aframe-react - 使用 A-Frame 和 React 构建虚拟现实体验。
  • react-admin - 在 REST 和 GraphQL 服务之上构建管理员用户体验。
  • 精炼-演示-文档- 立即构建数据密集型应用程序。它附带 Ant Design System，一个企业级 UI 工具包。
  • matrix-card -演示- 生成矩阵雨式卡片的最简单的组件。
  • rsuite -演示/文档- “企业系统产品”的组件套件。
  • lens-ui - docs - 一套专注于简单性的组件。

用户界面实用程序

记者

报告计算样式

能见度记者

报告组件何时可见/隐藏

测量报告器

确定并报告元素的测量值

设备输入

将用户输入转化为操作

键盘事件

滚动事件

触摸滑动

鼠标事件

元标签

设置元标签，<title>，children of

门户网站

在任意 DOM 节点处渲染元素

  • react-layer-stack - 简单但无处不在的强大且不可知的 React 分层系统.
  • react-portal - 用于将模式、灯箱、加载栏...传输到 document.body 的 React 组件。

测试用户行为

A/B 测试、实验、...

  • react-ab - React 的简单声明性和通用 A/B 测试组件。
  • react-experiments - 用于实现 UI 实验的 React 组件。

代码设计

有助于代码设计的库

数据存储

数据流/数据管理/数据存储/组件状态/数据流

  • alt - 同构通量实现。
  • baobab-react - 猴面包树的反应集成.
  • 大脑- 具有自己的调试器的状态控制器。
  • effector-react - 效果器的 React 绑定，一个有效的多存储状态管理器。
  • fluorine-lib - 使用单个动作流对 React 进行反应性状态和副作用管理。
  • Fluxible - 用于通用助焊剂应用的可插拔容器。
  • Fluxxor - 用于 React 的 Flux 架构工具。
  • kea - React 应用程序的高级架构。
  • mobx-react - MobX 的反应绑定. 创建完全反应式组件。
  • react-3ducks -演示- React 的简单状态管理解决方案。
  • react-controllables - 轻松创建可控组件。
  • react-i13n - 一种用于检测 React 应用程序的高性能、可扩展和可插入的方法。
  • react-redux-provide - 弥合 Redux 与 GraphQL/Relay 的声明性本质之间的差距。
  • react-redux - Redux 的官方 React 绑定.
  • redux-batched-actions - Reducer + action 以减少单个订阅者通知下的操作。
  • redux-batched-subscribe - 允许批量订阅通知的存储增强器。
  • redux - JavaScript 应用程序的可预测状态容器。
  • 回流- 一个简单的库，用于单向数据流应用程序架构，具有受 Flux 启发的 React 扩展。
  • reselect - Redux 的选择器库。
  • resourcerer - REST API 的声明性数据获取框架
  • shasta - 用于构建 redux/react 应用程序的简单 + 固执己见的工具包。
  • synergies - docs一个高性能的分布式上下文状态库，用于通过协同 atomar 上下文片段来创建可重用的 React 状态逻辑。
  • zustand -文档- 使用简化通量原理和无样板钩子 API 的快速熊骨状态管理解决方案。
  • teaful - 小巧、简单且强大的 React 状态管理

形式逻辑

路由器

来自服务器的道具

通过网络异步获取的组件属性

  • react-async - 为 React 组件异步获取数据。
  • react-refetch - 一种简单、声明性和可组合的方式来获取 React 组件的数据。
  • react-resolver - 通用 React 应用程序的异步渲染和数据获取。
  • react-router-relay -React 路由器的中继集成。
  • redial - React 等的通用数据获取和路由生命周期管理。
  • redux-async-connect - 请求异步数据，以 redux 状态存储，并连接到您的组件。
  • redux-connect - 为解决 react-router 中的异步 props 提供装饰器。
  • axios-react - React 的 HTTP 客户端组件。

与服务器通信

  • adrenaline - 简单的接力替代品。
  • apollo-client - 适用于任何 GraphQL 服务器和 UI 框架的简单缓存客户端。
  • react-relay - Relay 是一个 JavaScript 框架，用于构建数据驱动的 React 应用程序。
  • query - docs强大的异步状态管理、服务器状态实用程序和数据获取，适用于 TS/JS、React、Solid、Svelte 和 Vue。

CSS / 样式

  • 美学- 一个强大的类型安全、与框架无关的 CSS-in-JS 库，用于样式化组件，无论是普通对象、导入样式表还是简单地引用外部类名。
  • aphrodite - 它是内联样式，但它们有效！
  • inline-style-prefixer - 内联样式对象的运行时自动前缀。
  • 回形针-文档- 使用纯 HTML 和 CSS 构建 UI 原语。
  • 镭- 一组管理 React 元素内联样式的工具。
  • react-container-query - 模块化响应组件。
  • react-css-modules - 将类名无缝映射到 React 组件内的 CSS 模块。
  • react-responsive - 响应式设计的媒体查询。
  • reactponsive - 响应组件和钩子。
  • styled-components - 组件时代的视觉原语。

HTML 模板

同构应用

样板

脚手架 / 入门套件 / Yeoman 发电机 / stack ensemble / 种子

  • create-react-app - 创建没有构建配置的 React 应用程序。
  • crisp-react - 在 TypeScript 中快速集成，支持多个 SPA 和避免陷阱。
  • cra-template-redux-auth-starter - CRA 的 Redux auth starter 样板。
  • electron-react-boilerplate - 桌面应用程序上的实时编辑开发。
  • essential-react - 使用 Babel 构建可测试的 React 应用程序的最小框架。
  • generator-react-webpack - ReactJS 和 Webpack 的 Yeoman 生成器.
  • generator-starhackit - 全栈入门套件。
  • nwb - React 应用程序和组件以及 npm 模块的 CLI 工具和 devDependency。
  • nx - 具有一流的 monorepo 支持和强大集成的下一代构建系统。
  • react-boilerplate - 使用 JSX 的 React 模块的快速打包程序不可知样板。
  • react-hot-boilerplate - 用于您的下一个 ReactJS 项目的最小实时编辑样板。
  • react-redux-universal-hot-example - 通用 webapp 的入门样板。
  • reactuate - React/Redux 堆栈（不是样板套件）.
  • redux-cli - 一个自以为是的 CLI，用于更快地构建 redux/react 应用程序。
  • relay-fullstack - 中继入门套件。
  • roc - 现代应用程序开发生态系统。
  • rockpack - 在 5 分钟内创建带有 SSR、捆绑、linting、测试的 React 应用程序的简单解决方案。
  • Universal-redux - 一个 npm 包，可让您直接进入 React 和 Redux 编码。
  • create-react-dependency - 在没有构建配置的情况下创建反应依赖项。
  • phoenix - 一个简单的样板文件，可帮助您使用服务器端渲染和本地化支持制作您的反应应用程序。
  • react-enterprise-starter-kit - 高度可扩展且性能出色的 React Starter Kit，适用于企业应用程序，具有非常易于维护的代码库.
  • express-react-boilerplate - 一个帮助程序员基于 react-cool-starter 轻松创建 Express 和 React 项目的工具。

各种各样的

实用程序

i18n

国际化/L10n/本地化/翻译

  • react-i18next - 正确完成反应的国际化。使用 i18next i18n 生态系统。
  • react-intl - 国际化 React 应用程序。
  • react-localized - 基于gettext格式的 React 组件的国际化。
  • react-translate-maker -React 的通用国际化（i18n）开源库.
  • react-intl-universal -演示国际化 React 应用程序。不仅适用于 React.Component，也适用于 Vanilla JS。
  • @tolgee/react - docs – 基于 Web 的本地化工具，使用户能够直接在他们开发的 React 应用程序中进行翻译
  • js-lingui - docs – JavaScript 的可读、自动化和优化 (5 kb) 国际化。

框架绑定/集成

与第三方服务的集成

表现

用户界面

检查

延迟加载

  • react-infinite-grid - 渲染元素网格的 React 组件。
  • react-infinite - 基于 UITableView 的浏览器就绪高效滚动容器。
  • react-lazy-load - 当子元素进入视口时呈现子元素的 React 组件。
  • react-lazyload - 延迟加载你的组件、图像或任何对性能很重要的东西。
  • react-virtualized - 用于有效呈现大型列表和表格数据的 React 组件。

应用程序大小

服务器端渲染

  • iSSR - 将 React 应用程序移动到服务器端渲染的最简单方法。处理副作用并同步状态。
  • react-esi - 通过将 React 组件公开为 Edge Side Includes (ESI) 片段来提高 SSR 性能的库

开发工具

测试

  • chai-enzyme -Chai.js 断言和便利函数，用于使用酶测试 React 组件。
  • 酶- 用于 React 的 JavaScript 测试实用程序。
  • jest-cli - 无痛 JavaScript 测试。
  • react-unit -ReactJS 的轻量级单元测试库。
  • redux-test-recorder - 一个 redux 中间件，通过 ui 交互自动为 reducer 生成测试。
  • rut - 使用react-test-renderer. 支持 DOM 和自定义渲染器。
  • 意外反应- 意外的插件，可以测试完整的 React 虚拟 DOM，以及浅层渲染器。

还原

检查

  • Fluxguard - 突出所有 DOM + 设计更改的 PROD 更改监控。
  • react-inspector - 在您的 React 应用程序中浏览器 DevTools 检查器的强大功能。
  • react-json-inspector - React JSON 检查器组件。
  • reactotron - 用于检查 React JS 和 React Native 应用程序的 CLI 和 OS X 应用程序。

各种各样的

各种各样的

  • DataFormsJS JSX Loader - 小型 JavaScript 编译器，用于直接在网页上快速将 JSX 转换为 JS。
  • html-to-react-components - 将 HTML 的注释部分提取到 React 组件中作为单独的模块。
  • htmltojsx - 使用 React 的强大功能自动 AJAXify 纯 HTML。这是魔法！。
  • jsonx - 反应 JSON 语法。
  • mozaik - Mozaïk 是一个基于 nodejs / react / d3 / stylus 的工具，可以轻松制作漂亮的仪表板.
  • react-blessed - 祝福的反应渲染器。
  • jsondiffpatch-react - JSON 差异。

静态网站生成器

  • gatsby - 使用 React.js 将纯文本转换为动态博客和网站。

云解决方案

数据库

版权声明：
作者：小何
链接：https://ligo100.cn/qianduanjishu/332.html
来源：小何博客
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录