Huaize2020 Awesome React Save

English | 简体中文

正在持续建设中...

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

• awesome-nodejs
  • awesome-koa
  • awesome-egg
  • awesome-electron
• awesome-frontend
  • awesome-react-native

目录

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

官方资料

• 官网
• 文档
• 仓库

资源

• 中文社区

书籍

• React技术揭秘 - [@卡颂] 一本自顶向下的React源码分析书。

小册

• React 进阶实践指南 - @我不是外星人 彻底弄懂 React 基础和高阶用法，结合实践 Demo，告别技术瓶颈期，实现进阶~
• React 实战：设计模式和最佳实践 - @程墨 深入了解 React 应用中的设计模式，总结业界验证的最佳实践，更进一步，了解React 未来新功能 Suspense 和 Hooks。
• React Hooks 与 Immutable 数据流实战 - @神三元 以实战为线索，逐步深入React开发各个环节，掌握前端常用性能体验优化思路，打造完整前端工作流，提升工程化编码能力和思维能力。

工具

路由

• 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

• react-intl - React 应用国际化。
• react-i18next - 使用 i18next 的 React 国际化。
• js-lingui – 可读、自动化和优化的 (5 kb) JavaScript 国际化。
• react-intl-universal - React 应用程序国际化。不仅适用于 React 组件，同样适用于原生 JS。
• react-translate-maker - 通用国际化 (i18n) 开源 React 库。
• react-localized - 基于 gettext 格式的 React 组件国际化。

样式

• @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。

脚手架

• create-react-app - 无需构建配置即可创建 React 应用程序。
• react-boilerplate - 高扩展性，具有最佳开发体验并专注于性能和最佳实践。
• electron-react-boilerplate - 使用 Electron, React, React Router, Webpack and React Fast Refresh 的Electron React脚手架。
• generator-starhackit - 全栈开发工具。

UI组件

按钮

• react-awesome-button - 带有加载进度和社交分享操作的 3D 动画 60fps 按钮。
• reactive-button - 一个漂亮的带有进度指示器的动画按钮组件。

图标

• react-icons - 使用ES6导入React SVG流行图标库。
• react-fontawesome - Font Awesome组件。
• iconify-react - 来自50多个图标集的超过4万个图标，包括所有流行的图标和表情符号集。
• react-open-doodles - 由opendoodles提供的一组免费粗略插图。

布局

• 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-tooltip - React提示工具组件。
• react-popper - 🍿⚛官方 React 库，使用定位库 Popper。

通知提醒框组件

• react-toastify - 🎉 React-Toastify允许你轻松的添加通知。
• react-hot-toast - 好用的通知提示组件，默认情况下轻量，可定制和美观。
• notistack - 高度可定制的通知组件（toasts），可以堆叠在彼此的顶部。
• react-toast-notifications - 一个 React & Redux 的通知系统。
• react-notifications-component - 高度可定制和易用的通知提醒组件。
• cogo-toast - 美观，零配置的Toast消息组件。~4kb gzip (包括样式和图标)
• simple-react-notifications - 极小的通知库(gzip后仅1kb).
• react-toast - 小巧的toast通知组件。

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

• react-modal - 可访问的模态对话框组件。
• react-aria-modal - 一个完全可访问且灵活的 React 模态对话框，根据 WAI-ARIA 最佳实践构建的。
• react-skylight - 一个模态弹窗和对话框组件。
• nice-modal-react - 模态弹窗管理。
• sweetalert2-react-content - 官方 SweetAlert2 的增强，添加了对 React 元素作为内容的支持。
• reoverlay - 一个管理模态对话框的方案。
• reboron - 一组对话框动画。

导航菜单

• react-burger-menu - 带有特效和样式的侧边栏菜单。
• hamburger-react - React 的动画汉堡菜单图标。
• react-planet - 创建看起来像行星的圆形菜单。
• react-offcanvas - 侧边栏菜单。

粘性吸顶

• react-sticky - <Sticky />组件。
• react-headroom - 隐藏头部，直到你需要它。
• react-stickynode - 一个高性能和全面的React吸顶。

标签页

• react-tabs - 选项卡切换组件。
• react-tabtab - 选项卡切换组件。

设备输入/用户操作

键盘事件

• react-hotkeys - 声明式热键和焦点区域管理。
• react-keydown - 轻量的 Keydown 键盘按下 React 封装。
• react-key-handler - 处理键盘事件。
• react-shortcuts - 在一个地方统一管理键盘快捷键。
• useKeyCapture - 自定义Hook，以侦听目标或全局的键盘按下事件。

滚动事件

• react-scroll-components - 页面滚动的组件集合。

触摸滑动

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

鼠标事件

• react-fastclick - React版的 fastclick。
• react-aim - 确定用于触发鼠标事件的光标。
• react-hook-mighty-mouse - 跟踪所选元素上的鼠标事件的Hook。

拖放

• react-beautiful-dnd - 漂亮且易于使用的 React 列表拖拽。
• react-dnd - 拖拽库
• react-dropzone - 简单 HTML5 拖放区。
• react-draggable - React可拖动组件。
• react-movable - 可访问且简约（<4kB gzipped）库，用于在列表和表格中进行垂直拖放。
• react-dragula - 拖放如此简单，让人心痛。
• react-sortable-pane - 可排序和可调整大小的窗格组件。

缩放(放大缩小)

• react-resizable-and-movable - 可缩放和可拖动组件。
• react-resizable -一个简单可缩放的组件。
• re-resizable - 可缩放组件。
• react-sizeme - 使你的React组件能够了解它们的宽度和高度！
• react-spaces - 可嵌套的可调整大小、锚定、可滚动的组件。

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

• 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-pdf/renderer - React 渲染器，用于在浏览器和服务器上创建 PDF 文件。
• react-markdown - 一个渲染Markdown的React组件。
• react-pdf - 实现在React应用中PDF在线预览。
• react-json-tree - JSON预览组件，从redux-devtools提取出。
• react-pdf-viewer - 一个预览PDF文档的React组件。

轮播组件

• react-slick - React轮播组件。
• keen-slider - 具有原生触摸/滑动行为的高性能轮播/滑块。
• react-awesome-slider - 3D animated 60fps media and content slider/carousel.
• react-responsive-carousel - 响应式的可滑动轮播组件。
• @egjs/react-flicking - 它可靠、灵活且可扩展的轮播组件。
• pure-react-carousel - 从头开始构建，并不固执己见。
• react-id-swiper - 使用危险的 Swiper 作为 ReactJs 组件的库。
• react-instagram-zoom-slider - 受Instagram启发的具有捏合缩放功能的滑块组件。

懒加载组件

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

虚拟滚动列表/树/模块

• react-virtualized - 用于高效呈现大型列表和表格数据的 React 组件。
• react-window - 可有效渲染大型列表和表格数据的React组件。
• react-list - 多功能的虚拟滚动组件。
• @egjs/react-infinitegrid - 根据各种布局类型排列包含内容的卡片元素。
• react-virtualized-tree - 虚拟滚动树组件。
• af-virtual-scroll - 渲染大型可滚动列表和表格。

加载组件

• react-content-loader - 基于SVG的组件，可轻松创建内容占位加载效果（如 Facebook 的卡片加载效果）。
• react-spinners - 一个加载组件集合。
• react-redux-loading-bar - 使用React和Redux的简单加载工具条。
• react-loader - 使用spin.js显示加载效果的React组件，直到您的组件被加载。
• react-spinners-css - 让人惊讶的React加载组件集合。
• react-block-ui - 阻止用户与UI 交互的简单方法。

折叠组件

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

树

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

导航组件

• react-swipeable-views - 用于绑定选项卡和可滑动视图的React组件。
• react-scroll - React滚动组件。

自定义滚动条

• react-custom-scroll - 轻松自定义带有原生操作系统滚动行为的浏览器滚动条。
• rc-scrollbars - React 滚动条组件。
• react-shadow-scroll - 可自定义列表并在滚动时插入阴影的组件。

音视频

• react-player - 用于播放各种URL的React组件，包括YouTube。
• video-react - 为HTML5世界构建的网络视频播放器。
• react-soundplayer - 使用React创建自定义SoundCloud播放器。
• react-youtube - React.js 版 YouTube 播放器组件。
• react-audio-player - 基于 HTML5 audio 标签的简单封装。
• material-ui-audio-player - 用于Material UI Design的音频播放器.
• react-dailymotion - Dailymotion播放器组件。

日期/时间

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

照片/图像

• lightGallery - 功能齐全的灯箱画廊组件。
• react-image-gallery - 响应式图片库、轮播、图片滑块React组件。
• react-photo-gallery - 响应式的照片画廊组件
• react-image-lightbox - React灯箱组件。
• react-svg-pan-zoom - 为SVG添加平移和缩放功能的React组件。
• react-particle-image - 将图像渲染为交互式粒子。
• react-imgix - 添加快速响应式的图像作为图像、图片或背景！
• react-compare-image - 使用滑块对比两张图片。
• react-intense - 用于查看大图像。

二维码

• qrcode.react - 一个 <QRCode/> React 组件

分页

• react-paginate - 用于创建分页的React组件。
• react-laravel-paginex - Laravel分页(可定制的)。
• paginated - 使用props和自定义hook来构建分页。

画布

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

白板/草图/绘图编辑器

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

应用程序导览（可交互式教程）

• react-joyride - 为应用程序创建一个交互式教程。

数据可视化

图表

• recharts - 使用React和D3重新定义图表库。
• visx - 🐯 visx | 可视化组件。
• nivo - 提供一组丰富的 dataviz 组件，基于 d3 和 React。
• victory - 数据可视化。
• react-vis - 基于D3和React的数据可视化。
• BizCharts - 使用G2和React强大的数据可视化库。
• react-chartjs-2 - 使用Chart.js 2.0的通用React图表组件。
• echarts-for-react - 一个简单的 Apache echarts 的 React 封装。
• react-sparklines - 美丽而富有表现力的React微线图组件。
• semiotic - Semiotic是一个React数据可视化框架。
• react-d3-components - React D3组件。
• react-dazzle - 使用React轻松制作仪表盘。
• react-highcharts - React-highcharts.
• react-google-charts - React-google-charts React组件。
• react-timeseries-charts - 时间序列图表。
• chartify - React.js 插件，用于构建可拖动和可自定义的动画图表。
• react-chartist - 使用Chartist.js的React组件。
• rumble-charts - 用于构建可组合且灵活的图表的 React 组件。
• ej2-react-charts - 精美交互式图表和图。
• react-charty - 小巧但强大的交互式数据可视化，具有多种图表类型、动画、缩放、主题。
• react-heat-map - 一个基于 SVG 的轻量级日历热图反应组件。
• react-muze - 基于muze的封装。(muze是使用 WebAssembly 在浏览器中创建探索性数据可视化的免费数据可视化库)

关系图

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

地图

• react-map-gl - 基于MapboxGL-js封装覆盖的API。
• google-map-react - 通用谷歌地图React组件，允许在谷歌地图上渲染React组件。
• react-leaflet - 基于Leaflet maps的React组件。
• pigeon-maps - 没有外部依赖的ReactJS地图。
• react-mapbox-gl - 基于mapbox-gl-js React封装。
• react-geosuggest - 为 Google Maps Places API做出自动建议的React组件。
• react-svg-map - 一组用于显示交互式 SVG 地图的组件。

甘特图

• gantt-for-react - 基于 frappe-gantt 封装的甘特图。

通用

• @ant-design/charts - 基于 G2Plot, G6, X6, L7 React图表库。

表单组件

表单逻辑

• formik - React 中开发表单，从此没有眼泪。
• react-hook-form - 用于表单校验的不麻烦的 React hooks。
• redux-form - Redux 表单状态管理(Web and Native)。
• react-jsonschema-form - 基于 JSONSchema 构建表单。
• react-final-form - 基于订阅的表单状态管理。
• formily - 高性能、高扩展、TypeScript友好的表单解决方案。
• surveyjs - 先进的调查和表单库。
• formsy-react - React JS 的表单输入构建器和验证。
• react-validation-mixin - eact 的简单验证Mixin (HoC高阶组件)。

各类输入框

• react-text-mask - 灵活、健壮、微小的输入框屏蔽(遮罩)，可用于React、Angular 和 vanilla JavaScript。
• react-credit-cards - 美观的信用卡输入框，用于你的支付表单。
• react-input-mask - 另一个用于屏蔽输入的React组件。
• react-maskedinput - 输入遮罩组件。
• react-payment-inputs - 一个零依赖容器，用于帮助处理支付卡输入字段。
• react-numpad - 可扩展数字键盘控件，支持数字、日期和时间。

自动完成

• react-autosuggest - 符合 WAI-ARIA 的 React 自动建议组件。
• react-mentions - 在文本输入框中提及某人。
• react-typeahead - 纯基于 React 的 typeahead 和 typeahead-tokenizer。
• react-autocomplete-input - React自动完成组件。

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

• react-textarea-autosize - <textarea /> component for React which grows with content.
• react-input-autosize - Auto-resizing input field for React.
• react-autowidth-input - Highly configurable & extensible automatically sized input field built with hooks.

标签输入

• react-tagsinput - 一个简单的React标签输入组件。
• react-tag-input - 一个非常简单的React标签组件。
• react-tokeninput - React标签组件。
• @pathofdev/react-tag-input - 小巧的可编辑标签组件。

下拉选择框/下拉菜单

• react-select - 下拉框组件。
• react-aria-menubutton - 一个完全可访问、易于主题化、由 React 驱动的下拉菜单按钮。
• react-select-box - 一个可访问的下拉组件。
• react-functional-select - 体积微小，性能好的下拉组件。
• react-column-select - 列选择组件.

单选框

• react-radio-group - 更好的单选输入框按钮。

评分组件

• react-star-rating - 一个简单的星星评分组件。
• react-star-rating-input - 输入0-5 (获得更多) 星星的评分组件.
• react-awesome-stars-rating - 具备可访问性的星星评分组件。

状态切换按钮

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

日期和时间选择器

• react-datepicker - 一个简单且可重用的 React 日期选择器组件。
• react-big-calendar - Gcal/outlook类似的日历组件。
• react-day-picker - React 的灵活日期选择器。
• react-calendar - React 应用程序的终极日历。
• react-date-range - 用于选择日期和日期范围的React组件。
• react-datetime - 轻量级但完整的日期时间选择器React组件。
• devextreme-reactive - 基于插件，用于Material Design的高性能调度程序/日历。
• react-nice-dates - 响应式、对移动端Touch友好和模块化的日期选择器库。
• react-date-picker - 日期选择器。
• react-yearly-calendar - 年历组件。
• react-flatpickr - React 的 Flatpickr。
• react-google-flight-datepicker - 受 Google Flight 启发的 React 日期选择器。
• react-datepicker2 - 一个简单且可重用的日期选择器组件（支持波斯 jalali 日历）。
• date-range-picker - 支持日期、范围和范围选择的日历组件。
• react-simple-timefield - 简单的时间输入。
• react-timezone-select - 动态、简洁的时区选择，基于react-select。

表情符号选择器

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

颜色选择器

• react-colorful - 极小的(2,5 KB)、零依赖、快速和可访问的颜色选择器组件。
• react-input-color - 带有HSV颜色选择器的颜色输入框组件。
• coloreact - 极小的颜色选择器。
• react-color - 极小的颜色选择器。

滑动输入条

• react-slider - 滑动输入条组件。

可排序列表

• sortablejs - 可通过拖放排序的列表。.
• react-anything-sortable - 可排序子元素。支持touch并兼容IE8。
• react-sortable - 可排序列表组件。

富文本编辑器

• 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的简单富文本编辑器。

代码编辑器

• react-ace - 基于Ace (Advanced Code Editor)封装。
• react-codemirror2 - 基于 CodeMirror 封装的 React 组件。
• react-codemirror - 基于CodeMirror封装的React组件。
• react-monacoeditor - 基于Monaco Editor封装的React组件。

Markdown编辑器

• react-md-editor - 可预览的简单Markdown编辑器，使用React.js和TypeScript实现。
• react-simplemde-editor - 基于EasyMDE (the most fresh SimpleMDE fork)封装的React组件.
• react-md-editor - Markdown编辑器。
• react-markdown-editor - 使用React/Reflux简单markdown编辑器。

图片编辑

• react-image-crop - 响应式图像裁剪工具。
• react-avatar-editor - 类似Facebook的头像/个人资料图片组件。
• react-easy-crop - 通过简单的交互来裁剪/旋转图像/视频的组件。移动端触摸友好。
• react-image-cropper - 图像裁剪。
• react-avatar-generator - 为用户头像生成有趣的万花筒。

GraphQL

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

UI动画

• react-spring - 基于弹簧物理的动画库。
• react-motion - 一个解决您的动画问题的弹簧。
• framer-motion - 动画和手势库。
• react-flip-move - 使用FLIP技术在DOM更改的时候（例如列表重新排序）轻松实现动画。
• react-flip-toolkit - 轻量级的可配置布局转换的移动库。
• velocity-react - 基于Velocity.js的封装。
• react-animations - 内联样式库的动画集合，React-animations实现了animate.css中的所有动画。
• react-router-transition - 为react-router构建的变换库，基于react-motion。
• react-tsparticles - 轻量级组件，可轻松创建交互式粒子动画。
• react-reveal - 轻松地添加滚动动画到您的React应用程序
• react-anime - 一个超级简单的动画库。
• react-gsap-enhancer - 使用React和GSAP的全部功能。
• data-driven-motion - 轻松为您的数据制作动画。
• gooey-react - React的粘性效果，用于形状斑点/元球。
• react-particles-bg - 粒子背景。
• react-mt-svg-lines - SVG线条描边动画封装。
• react-spark-scroll - 用于React的基于滚动的动作和动画。
• react-track - 跟踪DOM元素的位置，创建很酷的动画。
• tween-one - 让一个React元素动画。
• react-web-animation - 用于Web动画API的React组件.
• react-transitive-number - 将过渡效果应用于数字字符串，就像旧的 Groupon 计时器。
• react-tweenful - 动画引擎，可让您对DOM节点、挂载、卸载、子元素更改/转换进行动画处理。
• auto-size-transition - 尺寸大小可以随着内容变化而动态变化。

视觉差

• react-parallax - 视觉差效果。
• react-parallax-tilt - 轻松在组件上应用视差倾斜悬停效果。Easily apply parallax tilt hover effect on components.
• react-parallax-component - 在组件上添加滚动视差效果的最简单方法。

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

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