awesome-react icon indicating copy to clipboard operation
awesome-react copied to clipboard

Published 20 hours ago • verified publisher icon huaize2020
→

Metadata

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

English | 简体中文

正在持续建设中...

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

目录

  • 目录
  • 官方资料
  • 资源
    • 书籍
    • 小册
  • 工具
    • 路由
    • Hooks集合
    • 状态管理
    • i18n
    • 样式
  • UI框架
    • 移动端
    • 解决方案
  • 脚手架
  • UI组件
    • 按钮
    • 图标
    • 布局
      • flexbox实现
    • 提示工具
    • 通知提醒框组件
    • 对话框/模态弹窗/警告提示组件
    • 导航菜单
    • 粘性吸顶
    • 标签页
    • 设备输入/用户操作
      • 键盘事件
      • 滚动事件
      • 触摸滑动
      • 鼠标事件
      • 拖放
      • 缩放(放大缩小)
    • 可编辑数据网格/电子表格
    • 表格
    • 查看/预览器
    • 轮播组件
    • 懒加载组件
    • 虚拟滚动列表/模块
    • 加载组件
    • 折叠组件
    • 树
    • 导航组件
    • 自定义滚动条
    • 音视频
    • 日期/时间
    • 照片/图像
    • 分页
    • 画布
    • 白板/草图/绘图编辑器
    • 数据可视化
      • 图表
      • 关系图
      • 地图
      • 甘特图
      • 通用
    • 表单组件
      • 表单逻辑
      • 各类输入框
      • 自动完成
      • 自动缩放的输入框/文本输入框
      • 标签输入
      • 下拉选择框/下拉菜单
      • 单选框
      • 评分组件
      • 状态切换按钮
      • 日期和时间选择器
      • 表情符号选择器
      • 颜色选择器
      • 滑动输入条
      • 可排序列表
      • 富文本编辑器
      • 代码编辑器
      • Markdown编辑器
      • 图片编辑
    • GraphQL
  • UI动画
    • 视觉差
  • 静态网站生成 & 文档生成 & 博客
  • 开发工具
    • 测试相关

官方资料

资源

书籍

小册

工具

路由

  • 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集合

状态管理

  • 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

样式

  • 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 - 由Interweave和Emojibase提供支持的基于 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 - 用于创建极速文档站点的新一代工具。

开发工具

测试相关

  • 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和自定义渲染器。

← Metadata

108
Stars
21
Forks
Watchers

Owner

verified publisher icon huaize2020

Metadata

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

Back