小何博客 一个Qter编程生涯记录博客
游客 G 游客点击登录
欢迎来到本站

登录后可查看订单、下载资源、收藏内容等

登录 注册
前端技术

2022最新常用React 组件库大全

小何 2022年9月7日 10 浏览 0 评论

项目地址 https://github.com/brillout/awesome-react-componen […]

项目地址

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 一个新资源。

目录

用户界面组件

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

  • fortune-sheet – 一个在线电子表格组件，提供与 Excel 一样的开箱即用功能。
  • AG Grid – 支持 Javascript / React / AngularJS / Web 组件的高级数据网格 / 数据表。
  • gigatables-react – 排序、分页/无限滚动、全局/列搜索、AJAX CRUD 等。
  • MUI X 数据网格–演示/文档– 快速和可定制的数据网格，具有高级用户和复杂用例的高级功能。
  • react-data-grid – 类似 Excel 的网格。
  • revo-grid –演示/文档– 用于 React / AngularJS / Vue / Web 组件的强大数据网格，具有高级定制。
  • ReactGrid –演示/文档– 向您的应用添加类似电子表格的行为
  • jqwidgets-react-grid – 过滤、分页、分组、导出到 Excel、PDF、CRUD 等。

桌子

  • 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 状态管理

形式逻辑

  • data-driven-forms – 一种用于构建具有所有功能的表单的声明性方式。
  • formcat – 一种使用 React Context API 在 React 中控制表单的简单方法
  • formik – 轻松构建表单并支持验证。
  • formsy-react – React JS 的表单输入构建器和验证器。
  • plexus-form – 使用 JSON-Schema 做出反应的动态表单组件。
  • react-hook-form – 用于表单验证的 React 钩子，无需麻烦。
  • react-jsonschema-form – 用于从 JSONSchema 构建 Web 表单的 React 组件。
  • react-client-validation – React 的简单且超轻量级的验证.
  • react-final-form – 基于订阅的表单状态管理
  • react-formawesome – 用于创建很棒的表单的复杂库。
  • surveyjs – 高级调查和表单库
  • Formily – 高性能、可扩展和 Typescript 友好

路由器

  • react-breadcrumbs – React-Router 的自动面包屑。
  • react-router-component -React 的声明性路由器组件。
  • react-router-scroll -React 路由器滚动管理。
  • react-router – 一个完整的 React 路由库。
  • redux-first-history – Redux First History – Redux 历史绑定支持 react-router – @reach/router – wouter
  • redux-router – React Router 的 Redux 绑定 – 将路由器状态保存在 Redux 存储中。
  • Universal-router – 用于同构 JavaScript Web 应用程序的简单中间件样式路由器。
  • wouter – 一个极简友好的 ~1.3KB 路由库。除了钩子，别无他物。

来自服务器的道具

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

  • 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 模板

同构应用

  • hypernova – 用于服务器端渲染 JavaScript 视图的服务。
  • isomorphic-relay – 为 React Relay 添加服务器端渲染支持。
  • isomorphic-style-loader -Webpack 的同构 CSS 样式加载器.
  • react-server – 带有服务器渲染的 React 框架，用于快速加载页面。
  • rill – 通用 Web 应用程序框架。
  • webpack-isomorphic-tools – 用于 Webpack 构建的应用程序（例如 React）的服务器端渲染。

样板

脚手架 / 入门套件 / 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 将纯文本转换为动态博客和网站。

云解决方案

数据库

版权声明
文章标题：2022最新常用React 组件库大全
文章链接：https://blog.chiyuba.com/qianduanjishu/332.html
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布，转载或引用请注明出处。
温馨提示：本文最后更新于 2022年9月7日，部分内容可能存在时效性，请注意甄别。

相关推荐

更多教程
【好文推荐】TSConfig通用配置记录 前端技术 【好文推荐】TSConfig通用配置记录

  简介：tsconfig.j...

1 浏览 前端开源实用的编辑器库tiptap的使用 前端技术 前端开源实用的编辑器库tiptap的使用

前言 最近发现一个好用的编辑器库，尝试了...

1 浏览 ThinkPHP6自动将数据库中的字段转换成驼峰方式命名 前端技术 ThinkPHP6自动将数据库中的字段转换成驼峰方式命名

  简介：前言在开发会遇到将数...

3 浏览

评论