• Stars
    star
    111
  • Rank 314,510 (Top 7 %)
  • Language
  • License
    MIT License
  • Created over 3 years ago
  • Updated 11 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React 资源大全中文版。An awesome React packages and resources

English | 简体中文

正在持续建设中...

同时推荐你查看我正在维护的其他仓库

目录

官方资料

资源

书籍

小册

工具

路由

  • react-router - React 的声明式路由。
  • reach - React 的下一代路由。
  • wouter - 一个极简友好的 ~1.3KB 路由库。
  • navi - React 的声明式异步路由。
  • universal-router - 简单中间件式路由,用于同构 JavaScript Web 应用程序的。
  • react-keepalive-router - 基于react 16.8+ ,react-router 4+ 开发的react缓存组件,可以用于缓存页面组件,类似vue的keepalive包裹vue-router的效果功能。
  • curi - 用于单页应用程序的 JavaScript 路由。

Hooks集合

  • react-use - React Hooks.
  • react-query - 用于在 React 中获取、缓存和更新异步数据的Hooks。
  • ahooks - 专门针对企业应用程序的 React Hook 集合。
  • beautiful-react-hooks - 用于加速组件和开发自定义 Hooks 的 Hooks 集合。

状态管理

  • redux - 用于 JavaScript 应用程序的可预测状态容器。
  • mobx - 简单、可扩展的状态管理。
  • xstate-react - 现代网络的状态机和状态图。
  • flux - 用于构建用户界面的应用程序架构。
  • dva - 🌱 基于 React 和 redux 的轻量级 elm 风格的框架。 (灵感来自 elm 和 choo)。
  • recoil - 实验级的状态管理库。
  • zustand - 在 React 中承担状态管理。
  • jotai - 灵活的状态管理。
  • easy-peasy - Redux 的抽象,提供重构的 API,专注于开发人员体验。
  • effector - 快速而强大的 React 状态管理器。
  • reactn - 内置全局状态管理的 React。
  • hookstate - 基于Hooks 的简单但非常强大且非常快速的 React 状态管理库。

i18n

样式

  • @emotion/react - 👩‍🎤 专为高性能组合样式而设计的 CSS-in-JS 库。
  • classnames - 用于按条件地将 classNames 连接在一起。

UI框架

  • ant-design - 一套企业级 UI 设计语言和 React 组件库。
  • material-ui - 一套React 组件,以实现更快、更轻松的 Web 开发。
  • chakra-ui - 用于 React 应用程序的简单、模块化和可访问性的 UI 组件。
  • react-bootstrap - 使用 React 构建的 Bootstrap 组件。
  • blueprint - 用于 Web 的基于 React 的 UI 工具包。
  • semantic-ui-react - Semantic 官方提供的 React 封装。
  • office-ui-fabric-react - 用于构建Microsoft Web体验的React组件。
  • Fluent UI - 一套用于构建 Microsoft Web 体验的 React 组件。
  • evergreen - Segment使用的UI框架。
  • reactstrap - 简单的 React Bootstrap 4 组件。
  • rebass - 使用 styled-system 构建的原始React UI 组件。
  • grommet - 基于React的整洁框架,提供可访问性、模块化、响应性和主题。
  • baseweb - Base 是一个由现代的、响应式的、有生命力的组件组成的设计系统。 Base Web 是 Base 的 React 实现。
  • rsuite - 一套 React 组件。
  • react-spectrum - Adobe 的库和工具集合,可帮助您构建适应性强、可访问且强大的用户体验。
  • reakit - 可访问、可组合和可定制的React组件。
  • carbon - IBM构建的设计系统。
  • semi-design - 抖音前端团队出品现代、全面、灵活的设计系统和 UI 库。 快速搭建美观的React 应用。
  • searchkit - React UI组件/小部件。使用Elasticsearch构建出色搜索体验的最简单方法。
  • gestalt - 一组支持 Pinterest设计语言的组件。
  • eui - 弹性式UI框架。
  • ring-ui - JetBrains的 Web UI组件库。
  • zeit-ui-react - 现代简约的 React UI库。
  • primereact - 一个完整的 React UI 框架,包含 50 多个具有material、bootstrap和自定义主题的组件。
  • mantine -具有原生深色主题支持的 React 组件和Hooks库专注于可用性、可访问性和开发人员体验。
  • arco-design - 一个全面的 React UI 组件库。
  • ChatUI - 服务于对话领域的设计和开发体系。
  • orbit-components - 用于构建面向旅行的项目的组件。
  • react-bulma-components - Bulma 的React组件。
  • bumbag-ui - 使用 Bumbag 构建具备可访问性且主题化的 React 应用程序。
  • shineout - 中文友好的组件集:表单元素、导航、表格、树、树选择下拉等。
  • pivotal-ui-react - 基于自定义版本的Bootstrap库的React组件。
  • react-foundation - 作为React组件的基础。
  • react-bulma - 基于 Flexbox 的现代 CSS 框架的 React.js 组件。
  • trunx - 使用 TypeScript 实现,基于Bulma 的React 组件。
  • cdbreact - 优雅的UI Kit库和可重用组件,用于构建移动优先、响应式网站和Web应用程序。

移动端

  • antd-mobile - 可配置的移动端UI(来自中国)。
  • OnsenUI - 具有Material和flat(iOS)设计的移动应用程序框架。 基于 Web Components。

解决方案

  • ant-design-pro - 一个开箱即用企业应用程序UI解决方案。An out-of-box UI solution for enterprise applications as a React boilerplate.
  • react-admin - 一个前端框架,用于在 REST/GraphQL API 之上构建在浏览器中运行的 B2B 应用程序,使用 ES6、React 和 Material Design。

脚手架

UI组件

按钮

图标

布局

  • react-grid-layout - 网格布局系统,可以实现响应式的网格布局,并且支持分割点(breakpoints)的设置,灵活运用可以方便的实现拖拽式组件。
  • golden-layout - 一款强大的响应式多窗口分割管理器。
  • autoresponsive-react - 自动响应式网格布局库。
  • react-masonry-component - 基于@desandro's Masonry的封装。
  • react-stonecutter - 动画网格布局组件。
  • react-spaces - 使您可以将页面或容器划分为可嵌套的锚定,可滚动和可调整大小的空间。
  • muuri-react - 响应式、可排序、可筛选和可拖动的网格布局。
  • m-react-splitters - 拆分器组件,用 TypeScript 编写。

flexbox实现

  • hedron - 一个简洁的flexbox网格系统,由样式组件提供支持。
  • react-reflex - 用于高级React Web应用程序的Flex布局容器组件。
  • flexbox-react - 无偏见、符合标准的 flexbox 组件.
  • react-flexbox - React flexbox思想。

提示工具

通知提醒框组件

对话框/模态弹窗/警告提示组件

导航菜单

粘性吸顶

标签页

设备输入/用户操作

键盘事件

滚动事件

触摸滑动

  • react-swipe - 基于Swipe.js 封装的 React 组件。

鼠标事件

拖放

缩放(放大缩小)

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

  • ag-grid - 高级数据网格/数据表,支持原生JavaScript/React/AngularJS/Web Components.
  • react-data-grid - 类似Excel的数据网格。
  • revo-grid - 适用于React/AngularJS/Vue/Web组件的强大数据网格,具有高级定制功能。
  • ReactGrid - 向您的应用程序添加类似电子表格的行为。
  • gigatables-react - 排序、分页/无限滚动、全局/列搜索、AJAX CRUD等。

表格

  • react-table - 用于构建快速且可扩展的表和数据网格的Hooks。
  • material-table - 基于Material UI,添加:分组、树数据、可扩展行、导出、内联编辑。
  • mui-datatables - 基于Material UI。添加:搜索、样式设置、过滤、调整大小/隐藏列、导出、打印、选择/扩展行。
  • @devexpress/dx-react-grid - 用于Bootstrap和Material Design的基于插件的高性能数据网格。
  • react-data-table - 可访问、响应式、主题化、声明式可配置表,具有排序、可选行、可扩展行、分页。
  • rsuite-table - 支持虚拟化的表组件。
  • ka-table - 可定制的表格组件,具有排序、过滤、分组、虚拟化、编辑等功能。
  • sematable - 基于redux/react的客户端排序、分页和文本过滤器。
  • @progress/kendo-react-grid - 强大的数据网格组件,具有 100 多种即用型功能,如分页、排序、导出到Excel等。

查看/预览器

轮播组件

懒加载组件

  • react-lazyload - 延迟加载组件、图像或任何对性能影响的东西。
  • react-lazy-load - 当子元素进入视图范围内时,才渲染它们。

虚拟滚动列表/树/模块

加载组件

折叠组件

  • react-collapse - 使用react-motion实现的带动画的折叠组件。
  • react-accessible-accordion - 可访问的手风琴组件。
  • react-tabbordion - demo - Tabbordion是用于管理多个内容之间的活动状态的组件。你可以用它做任何事情:选项卡组件、手风琴组件、多选列表组件、选项组件、选项列表、复选框列表。

  • react-treebeard - React树视图组件。数据驱动、快速、高效且可定制。
  • react-treeview - 使用 简单、轻便、灵活的树视图。
  • react-complex-tree - 具有多选、拖放和搜索功能的不受限制的可访问树组件。

导航组件

自定义滚动条

音视频

日期/时间

  • react-timeago - 一个简单的 time-ago组件.
  • timeago-react - 将Date格式化为 *** time ago 的状态. 例如: '3 hours ago'.

照片/图像

二维码

分页

画布

  • react-konva - React Konva 是一个 JavaScript 库,用于绘制复杂的画布图形。

白板/草图/绘图编辑器

  • @excalidraw/excalidraw - 用于手绘(如绘制图表)的虚拟白板。
  • react-sketch - 基于FabricJS, 用于React应用程序的 Sketch 工具。
  • react-sketch-canvas - 使用 SVG 作为画布的 React 手绘矢量绘图工具。接受来自鼠标、触摸板和图形输入板的输入。
  • react-design-editor - 基于React、Fabricjs的可编辑设计工具

应用程序导览(可交互式教程)

数据可视化

图表

关系图

  • graphin - 基于G6的React图可视化工具集。
  • react-sigmajs - 基于SigmaJS,轻量但强大的绘制网络关系图。

地图

甘特图

通用

表单组件

表单逻辑

各类输入框

自动完成

自动缩放的输入框/文本输入框

标签输入

下拉选择框/下拉菜单

单选框

评分组件

状态切换按钮

  • react-toggle - 一个优雅的、可访问的 React切换组件。 还有一个美化的复选框。
  • react-ios-switch - React切换组件。

日期和时间选择器

表情符号选择器

  • emoji-mart - Emoji Mart 是一个可定制的表情选择器组件。
  • interweave-emoji-picker - 由InterweaveEmojibase提供支持的基于 React的表情符号选择器。

颜色选择器

滑动输入条

可排序列表

富文本编辑器

  • slate - 一个完全可定制的框架,用于在浏览器中构建富文本编辑器。
  • draft-js - Draft.js是一个 JavaScript富文本编辑器框架,为React构建并由不可变模型支持。
  • react-draft-wysiwyg - 基于DraftJS封装的可见即可得的编辑器。
  • react-quill - 基于Quill封装。
  • braft-editor - 美观易用的 React 富文本编辑器,基于 draft-js 开发。
  • alloyeditor - 基于CKEditor完全重写的UI可见即可得的编辑器
  • remirror - 用于React的ProseMirror 工具包。
  • react-contenteditable - 基于div可编辑内容的React组件。
  • megadraft - 建立在Draft.js之上的富文本编辑器。
  • edtr-io - 带有插件的可见即可得内嵌 Web 编辑器。
  • react-medium-editor - medium编辑器封装。
  • ckeditor5-react - 基于CKEditor 5官方富文本编辑器封装。
  • smartblock - 基于ProseMirror的可见即可得的编辑器。
  • react-trumbowyg - 基于Trumbowyg的封装。
  • ckeditor4-react - 基于CKEditor 4 rich文本编辑器封装。
  • react-editor - 可以插入图片和HTML的简单富文本编辑器。

代码编辑器

Markdown编辑器

图片编辑

GraphQL

  • react-relay - Relay 用于构建基于数据驱动的 React 应用。

UI动画

视觉差

静态网站生成 & 文档生成 & 博客

  • gatsby - 使用 React 构建快速、现代的应用程序和网站。
  • Docusaurus - 使用 React 和 Markdown 并具有翻译和版本控制功能的文档站点生成器。
  • react-static - 渐进式的 React 静态网站生成工具。
  • dumi - React 组件文档生成器。
  • component-controls - 用于创建极速文档站点的新一代工具。

开发工具

调试相关

  • react-dev-inspector - 只需单击一下,即可直接从浏览器 React 组件跳转到本地 IDE 代码。

性能相关

  • @welldone-software/why-did-you-render - 由 Welldone Software 开发,通过对 React 进行猴子补丁 (Monkey Patch),通知你有关于可能避免的重新渲染的信息。它也可以在 React Native 中使用。

测试相关

  • jest - 愉悦的JavaScript测试。
  • enzyme - 用于React的测试工具。
  • react-testing-library - 🐐 简单而完整的React DOM测试实用程序,鼓励良好的测试实践。
  • react-hooks-testing-library - 🐏 简单而完整的 React hooks 测试实用程序,鼓励良好的测试实践。
  • chai-enzyme - 配合enzyme使用的Chai.js断言库和便利函数
  • ui-harness - 在React中创建、隔离和测试模块化UI组件。
  • react-unit - 轻量级单元测试库。
  • unexpected-react - unexpected插件,用于测试完整React虚拟DOM以及浅层渲染器。
  • redux-test-recorder - 一个redux中间件,通过ui交互自动生成reducers的测试。
  • rut - 使用react-test-renderer使React测试变得容易。支持DOM和自定义渲染器。