3.Github1000个顶级组件应对各种业务场景
用户界面组件
可编辑的数据网格/电子表格
- fortune-sheet - 一种在线spreedsheet组件，提供开箱即用的功能，就像Excel一样。
- AG Grid - 高级数据网格/支持Javascript / React / AngularJS / Web Components的数据表。
- gigatables-react - 排序，分页/无限滚动，全局/列搜索，AJAX CRUD等。
- MUI X 数据网格 - 演示/文档 - 快速且可自定义的数据网格，具有适用于高级用户和复杂用例的高级功能。
- react-data-grid - Excel-like grid。
- revo-grid - demo/docs - Powerfull Data Grid for React / AngularJS / Vue / Web Components with Advanced Customize。
- ReactGrid - 演示/文档 - 向应用添加类似电子表格的行为
- jqwidgets-react-grid - Filtering， Pagination， Grouping， Export to Excel， PDF， CRUD 等。
桌子
- ka-table - demo - 可定制的表格组件，具有排序，过滤，分组，虚拟化，编辑等功能。
- 材质表 - 演示/文档 - 基于材质 UI 构建，以及：分组、树数据、可展开行、导出、内联编辑
- mui-datatables - 建立在 Material UI 之上。搜索，样式设置，过滤，调整列大小/隐藏列，导出，打印，选择/展开行。
- react-data-table - demo/docs - 可访问，响应式，可主题化，声明性可配置的表，具有排序，可选行，可扩展行，分页
- react-table - demo - 用于构建快速且可扩展的表和数据网格的钩子
- react-table-library - demo - React Table Library – 一个几乎无外设的表库 – 用于构建更好的表。
- rsuite-table - demo/docs - 支持虚拟化的表组件。
- sematable - 客户端排序、分页和文本过滤器，用于基于 redux/react 的应用。
- DevExtreme React Grid - 用于Bootstrap和Material Design的基于插件的高性能数据网格。
- 智能反应网格 - 快速且功能齐全的数据网格，采用材料设计。
- KendoReact Grid - 功能强大的数据网格组件，具有100多种即用型功能，如分页，排序，导出到Excel等。
无限滚动
- @egjs/react-infinitegrid - npm - demo - 用于根据各种布局类型无限排列卡元素（包括内容）的模块。
- react-lazyload - Lazyload 你的组件、镜像或其他任何性能至关重要的东西。
- react-list - 一个多功能的无限滚动 React 组件。
- af-virtual-scroll - demo/docs - 渲染大型可滚动列表和表格。
- react-window - demo - 用于高效呈现大型列表和表格数据的 React 组件
覆盖
显示叠加/ 模式 / 警报 / 对话框 / 灯箱 / 弹出窗口
- reboron - 使用 React 的对话动画集合.js
- react-aria-modal - 根据 WAI-ARIA 创作实践构建的完全可访问且灵活的 React 模态。
- react-modal - React 的可访问模式对话框组件。
- react-skylight - 用于模式和对话框的反应组件。
- reoverlay - demo - 管理模式的缺失解决方案。
- sweetalert2 - demo/docs - 一个漂亮，响应迅速，高度可定制和可访问（WAI-ARIA）的JavaScript弹出框替代品。零依赖性。
- sweetalert2-react-content - 官方 SweetAlert2 增强器添加对 React 元素作为内容的支持
通知
烤面包机/小吃店 — 使用无模式临时小弹出窗口通知用户
- cogo-toast - 演示/文档 - 即插即用，承诺支持，内置样式，~3.5K。（无需引用/提供程序😊)
- react-notifications-component - demo - 高度可定制且易于使用的通知组件。
- notistack - demo - docs - 高度可定制的通知小吃店（吐司），可以堆叠在一起
- react-local-toast - demo - docs - 显示链接到特定组件的反馈，而不是应用范围的 Toast。
- react-toast - demo - docs - 最小的 Toast 通知。
- 🚀 react-toastify - demo - 目前最好的选择。钩子支持。没有引用。
- reapop - 一个 React & Redux 通知系统。
- simple-react-notifications - demo - Tiny notification library （1kb gzip）.
- 反应热吐司 - 演示 - 吸烟🔥热🔥React 的通知。默认情况下，轻量级，可定制且美观。
工具提示
- react-tooltip - React tooltip component.
菜单
菜单/侧边栏
- 汉堡-react - demo/docs - React 的动画汉堡菜单图标。
- react-burger-menu - 一个带有效果和风格的画布侧边栏。
- react-offcanvas - React 的 Off-canvas 菜单。
- react-planet - demo - 创建看起来像行星的圆形菜单。
粘
固定页眉/向上滚动页眉/粘性元素
- react-headroom - 隐藏你的标题，直到你需要它。
- react-sticky -
组件，用于出色的 React 应用程序。 - react-stickynode - 一种高性能且全面的 React 粘性。
制表符
- react-tabs - React tabs component。
- react-tabtab - React， tabs.
装载 机
加载器/微调器/进度条 — 让用户知道正在加载某些内容
- react-loader-spinner - 用于异步操作的 react-spinner 的集合集。
- react-block-ui - 阻止用户与UI交互的简单方法。
- react-redux-loading-bar - Simple Loading Bar for Redux and React。
- react-spinners-css - react spinners 组件的惊人集合。
- react-spinners - 用于 react 的加载微调器组件的集合。
- react-content-loader - SVG驱动的组件，可以轻松创建占位符加载（如Facebook的卡片加载）。
旋转 木马
- @egjs/反应轻拂 - npm - 演示 - 它是可靠，灵活和可扩展的轮播。
- react-awesome-slider - demo - Fullpage，3D动画，60fps媒体和内容滑块/轮播。
- 纯粹的反应轮播 - 从头开始构建，而不是高度固执己见。
- react-id-swiper - 一个使用 idangerous Swiper 作为 ReactJs 组件的库
- react-instagram-zoom-slider - demo - 一个滑块组件，具有受Instagram启发的捏合缩放功能。
- react-responsive-carousel - React.js Responsive Carousel（带Swipe）。
- react-slick - React carousel component.
- 敏锐滑块 - 演示 - 具有本机触摸/滑动行为的高性能轮播/滑块。
- react-image-magnify - demo - 用于触摸和鼠标的响应式 React 图像轮播缩放组件。专为购物网站设计产品详情
- swiper - demo - docs - 最现代的免费移动触摸滑块，具有硬件加速的过渡和惊人的本机行为。
按钮
崩溃
- react-accessibl-accordion - React 的 Access Accordion 组件.
- react-collapse - 用于具有 react-motion 的折叠动画的组件包装器。
- react-tabbordion - demo - 用于创建折叠和选项卡的通用，语义和仅CSS组件。
图表
以图表/图形/示意图显示数据
- chartify - React.js插件，用于构建可拖动和可自定义的动画图表。
- essential js 2 charts - 漂亮和交互式的图表和图形，用于反应。
- jscharting-react – React图表组件，提供一套完整的图表类型，并通过JSCharting进行引人入胜的数据可视化。
- react-chartist - Chartist的React组件.js。
- react-charty - demo - 小而强大的交互式数据可视化，具有多种图表类型，动画，缩放，主题。
- react-chartjs-2 - 使用 Chart.js 2.0 的常见 react 图表组件。
- react-d3-components - D3 Components for React.
- react-dazzle - 在 React JS 中使 Dashboards 变得简单。
- react-google-charts - React-google-charts React component.
- react-highcharts - React-highcharts.
- react-sigmajs - 轻量级但功能强大的库，用于绘制构建在SigmaJS之上的网络图。
- react-sparklines - 美观而富有表现力的迷你图 React 组件。
- react-timeseries-charts - 声明性时间序列图表。
- react-vis - 基于 React 和 d3 的数据可视化库。
- recharts - 用 React 和 D3 构建的重新定义的图表库。
- 隆隆声图 - 用于构建可组合和灵活图表的反应组件。
- 胜利 - React 的数据可视化。
- 符号学 - 符号学是 React 的数据可视化框架。
- DevExtreme React Chart - 用于Bootstrap和Material Design的基于插件的高性能图表。
- 智能反应图 - 功能完整的图表库。
- react-muze - React wrapper for muze（免费的数据可视化库，用于在浏览器中创建探索性数据可视化，使用WebAssembly）
- Flowchart React - React.js的流程图和流程图设计师。
树
显示树数据结构
- react-complex-tree - demo - docs - 无攻击的可访问树组件，具有多选，拖放和搜索功能
- react-treebeard - React Tree View Component。数据驱动、快速、高效、可定制。
- react-treeview - 使用 React 制作的简单、轻便、灵活的树视图。
用户界面导航
导航视图的方法
- react-scroll - React scroll component。
- react–swipe-views - 用于绑定选项卡和可滑动视图的 React 组件。
自定义滚动条
- rc滚动条 - 演示 - 可自定义的滚动条，具有弹性选项和60FPS
- react-custom-scroll - demo - 使用本机操作系统滚动行为轻松自定义浏览器滚动条。
- react-shadow-scroll - 自定义图像并在滚动存在时插入阴影的组件。
音频/视频
- react-dailymotion - React 的 Dailymotion player 组件。
- react-player - 用于播放各种URL（包括YouTube）的react组件。
- react-soundplayer - 使用 React 创建自定义 SoundCloud 播放器。
- react-youtube - React.js驱动的YouTube播放器组件。
- video-react - 使用 React 库为 HTML5 世界构建的 Web 视频播放器。
- material-ui-audio-player - 用于材质 UI 设计的音频播放器。
- react-vision-camera - 使用 getUserMedia 的 React 相机组件。我们可以将此组件用于计算机视觉任务，如条形码扫描，文本识别等。
- react-barcode-qrcode-scanner - 用于 React 的条形码和 QR 码 scanner 组件。它使用react-vision-camera来访问相机，并使用Dynamsoft条形码阅读器来读取条形码。
地图
- google-map-react - 通用的 google map react 组件，允许在 google 地图上渲染 react 组件。
- 鸽子映射 - 演示 - 没有外部依赖项的 ReactJS 映射。
- react-geosuggest - Google Maps Places API 的 React autosuggest。
- react-leaflet - 用于 Leaflet 映射的 React 组件。
- react-map-gl - MapboxGL-js和overlay API的React包装器。
- react-mapbox-gl - Mapbox-gl-js 的 React 绑定。
- react-svg-map - demo - 一组用于显示交互式 SVG 映射的组件。
时间 / 日期 / 年龄
显示时间/日期/年龄
- react-timeago - ReactJs的一个简单的time-ago组件。
- timeago-react - 使用语句格式化日期。例如：“3小时前”。
*** time ago - react-google-flight-datepicker - 在 ReactJS 中实现的 Google 航班日期选取器。
照片/图像
显示图像/照片
- lightGallery - demo - docs - 功能齐全的灯箱图库组件。
- react-compare-image - demo - React 组件，使用滑块比较两个图像。
- react-image-gallery - 响应式图像库、轮播、图像滑块 react 组件。
- react-image-lightbox - React lightbox component.
- 反应强烈 - 用于近距离查看大图像的反应组件。
- react-photo-album - demo - docs - Responsive React Photo Gallery.
- react-svg-pan-zoom - 一个 React 组件，用于向 SVG 添加平移和缩放功能。
- react-particle-image - demo - 将图像渲染为交互式粒子。
- react-imgix - 添加快速响应的图像作为图像，图片或背景！
图标
显示图标/图标集/表情符号
- iconify-react - 来自50多个图标集的40k多个图标，包括所有流行的图标和表情符号集。
- react-icons - 使用 ES6 导入的流行图标包的 svg react 图标。
- react-open-doodles - 真棒免费插图作为 react 组件。
- react-icomoon - 使用 react-icomoon，您可以轻松使用在 icomoon 中选择或创建的图标。
- tabler-icons-react - 一组超过450个免费的MIT许可的高质量SVG图标。
分页器
显示要分页的控制元素
- react-paginate - 创建分页的 ReactJS 组件。
- react-laravel-paginex - Laravel Pagination with ReactJS（可定制）。
- 分页 - React渲染道具和自定义钩子来构建分页。
- react-steps - Demo - Responsive React Stepper.
降价查看器
显示解析的标记源
- react-markdown - Render Markdown as React component.
帆布
使用 Canvas 或 SVG 的草图输入
- react-konva - React Konva是一个JavaScript库，用于绘制复杂的画布图形，并绑定到Konva框架。
- react-sketch - 用于基于 React 的应用程序的 Sketch 工具，由 FabricJS 提供支持
- react-sketch-canvas - 演示 Freehand 矢量绘图工具，用于使用 SVG 作为画布的 React。接受来自鼠标、触摸和图形输入板的输入
- react-heat-map - 一个轻量级的日历热图 react 组件，构建在 SVG 上，GitHub 贡献图的可自定义版本。
杂项
- react-advanced-news-ticker - demo - 一个灵活且动画化的垂直新闻代码组件
- react-avatar-generator - 允许用户创建随机的万花筒作为头像。
- react-awesome-query-builder - demo - Visual Query Builder from form fields，带有SQL，MongoDB和JSON导出
- react-blur - 用于模糊背景的反应组件。
- react-demo-tab - demo - 一个 React 组件，用于轻松创建其他组件的演示。
- react-facebook - Facebook组件，如登录按钮，喜欢，分享，评论，页面或嵌入式帖子。
- fastcomments-react - demo - FastComments组件，用于在页面或SPA上嵌入实时评论线程。
- react-pdf-viewer - docs - 一个用于查看PDF文档的React组件。
- react-simple-chatbot - demo - 一个简单的聊天机器人组件，用于创建对话聊天。
- react-file-reader-input - 用于控制文件读取样式和抽象的文件输入组件。
- react-filter-control - React filterbuilder 组件，用于在 UI 中构建筛选条件。
- react-headings - 自动递增您的HTML标题（h1，h2等），以提高可访问性和SEO，无论您的组件结构如何，同时您可以完全控制呈现的内容。
- react-joyride - 为您的 ReactJS 应用程序创建演练和导览。现在有了独立的工具提示！
- react-json-tree - React JSON Viewer Component，从 redux-devtools 中提取。
- react-mouse-select - Demo 一个允许通过移动鼠标来选择 DOM 元素的组件
- react-resize-and-movable - React 的可调整大小和可移动组件。
- react-resize-box - React 的可调整大小组件。#reactjs。
- react-searchbox-awesome - demo - Minimalistic searchbox.
- react-split-pane - React split-pane component。
- react-swipe-to-delete-ios - demo - 以与iOS相同的方式删除列表中的项目。
- react-可滑动列表 - 演示 - 可配置组件，用于呈现包含可滑动项目的列表。
- 排版 - 一个强大的工具包，用于构建具有精美排版的网站。
- react-pulse-text - demo/docs - 允许您对另一个组件的任何属性的文本进行动画处理。
- 验证码图像 - 允许您生成带有选项的随机验证码图像。
- react-pdf - 在 React 应用程序中显示 PDF 就像显示图像一样简单。
- 反应可定制的聊天机器人 - 演示 - 在几分钟内构建符合您品牌需求的聊天机器人。
- @restpace/架构表单 - 演示 - 从 JSON 架构轻松自动构建复杂表单。
- react-darkreader - 🌓一个 React Hook，用于在您的网站添加黑暗/夜间模式，灵感来自黑暗阅读器。
- react-apple-signin-auth - Apple signin for React 使用官方 Apple JS SDK。
表单组件
让用户输入数据
日期/时间选取器
日期选取器/ 时间选取器 / 日期时间选取器 / 日期范围选取器
- 日期范围选择器 - 演示 - 支持日期，范围和范围选择的日历组件。
- react-big-calendar - Gcal/outlook like calendar component.
- react-date-range - 用于选择日期和日期范围的 React 组件。
- react-datepicker - 一个简单且可重用的 React 日期拾取器组件。
- react-datepicker2 - demo - docs 一个简单且可重用的日期拾取器组件（具有波斯语 jalali 日历支持）。
- react-datetime - 一个轻量级但完整的日期时间选择器react组件。
- react-day-picker - React 的灵活日期选取器。
- react-flatpickr - Flatpickr for React.
- react-nice-dates - demo/docs 一个响应式的、触摸友好的、模块化的日期选取器库。
- 反应简单时间场 - 演示 - 简单时间输入字段。
- react-timezone-select - demo - 动态、简洁的时区选择。基于。
react-select - react-year-calendar - React.js Yearly Calendar Component。
- DevExtreme React Scheduler - 用于材料设计的高性能基于插件的调度程序/日历。
- jQWidgets Scheduler - 功能完整的调度库。
- react-calendar - React 应用程序的终极日历。
- react-date-picker - React app 的日期选取器。
表情符号选取器
- interweave-emoji-picker - 一种基于 React 的表情符号拾取器，由 Interweave 和 Emojibase 提供支持。
输入类型
屏蔽输入，专用输入;电子邮件/电话号码/信用卡/等
- 反应信用卡 - 美丽的信用卡为您的付款方式。
- react-payment-inputs - demo - 一个零依赖的容器，用于帮助支付卡输入字段。
- react-input-mask - demo - 另一个用于输入屏蔽的反应组件。
- @lunasec/react-sdk - 文档 - 安全，强化的表单组件，可自动加密/标记所有数据。
- react-numpad - demo - 可扩展的数字、日期和时间控制。
自动完成
自动建议/自动完成/键入
- react-autosuggest - 符合 WAI-ARIA 的 React autosuggest 组件。
- react-typeahead - 纯基于 react 的 typeahead 和 typeahead-tokenizer。
选择
- react-aria-menubutton - 一个完全可访问的，易于主题化的，React驱动的菜单按钮。
- react-functional-select - demo - React.js的微尺寸和微优化选择组件。
- react-select-box - React 的可访问选择框组件。
- react-select - 使用 React JS 构建的 Select 控件，并为 React JS 构建。
- react-column-select - 为 react 构建的列选择组件。
颜色选取器
- coloreact - 一个用于 React 的微小颜色选择器。
- react-color - 是 React 应用程序的一个微小的颜色选择器小部件组件。
- react-colorful - 一个微小的（2，5 KB），无依赖性，快速且易于访问的颜色选择器组件。
- 反应输入颜色 - 使用 hsv 颜色选取器的反应输入颜色分量。
切换
- @anatoliygatt/心形开关 - 演示 - 完全可主题化且易于访问的心形拨动开关组件。
- react-ios-switch - React switch component.
- react-toggle - 一个优雅、可访问的 React 切换组件。还有一个美化的复选框。
- react-triple-toggle - React multi toggle component.
- ui-switch - 最完整的切换组件
滑 块
- react-slider - React 的 Slider 组件。
单选按钮
- react-radio-group - 更好的单选按钮。
类型选择
让用户在键入时选择某些内容（例如标签）
- react-autocomplete-input - React 的自动完成输入字段。
- react-mentions - 在文本区域中提及人员。
- 富文本区域 - 用于着色、突出显示、修饰文本并提供自动完成功能的文本区域。
标签输入
允许用户在单个输入中添加多个标签
- react-tag-input - 一个非常简单的标签组件，用于您的 React 项目。
- react-tagsinput - 用于输入标签的简单 react 组件。
- react-tokeninput - React 的 Tokeninput 组件。
- tagify - demo & docs - 轻量级，高效的标签输入组件。
自动调整输入大小/文本区域
- react-input-autosize - 自动调整 React 输入字段的大小。
- react-autowidth-input - 高度可配置和可扩展的自动调整大小的输入字段，用钩子构建。
- react-textarea-autosize - react 的组件，随着内容的增长而增长。
星级
- 反应评级 - 演示 - 零依赖性，高度可定制的评级组件。
- react-awesome-stars-rating - demo - 具有辅助功能的星级评定组件。
- react-star-rating-input - React.js用于输入 0-5 颗（或更多）颗星的分量。
拖放
- react-beautiful-dnd - 使用 React 为列表进行美观且易于访问的拖放
- react-dnd - 拖放用于 React。
- react-drag-size - “Drag to resize”（size）作为 React Component。
- 可拖动反应 - 可拖动反应组件。
- react-dragula - 拖放如此简单，以至于很痛苦。
- react-dropzone - Simple HTML5 drag-drop zone with React.js。
- react-movable - 可访问和简约（<4kB gzipped）库，用于在列表和表格中垂直拖放。
- react-sortable-pane - React 的可排序和可调整大小的窗格组件。
可排序列表
让用户在列表上定义订单
- react-anything-sortable - 对具有触摸支持和IE8兼容性的任何子级进行排序。
- sortablejs - 可通过拖放在列表内和列表之间重新排序的列表。
富文本编辑器
- alloyeditor - 基于CKEditor的所见即所得编辑器，具有完全重写的UI。
- ckeditor4-react - 一个官方的CKEditor 4富文本编辑器包装器。
- ckeditor5-react - 官方的CKEditor 5富文本编辑器包装器。
- draft-js - 用于构建文本编辑器的 React 框架。
- edtr-io - demo - docs - WYSIWYG内联网页编辑器，带有插件。
- megadraft - 建立在草稿之上的富文本编辑器.js。
- react-ace - Ace（高级代码编辑器）包装器。
- react-codemirror - demo - CodeMirror component for React.
- react-contenteditable - 具有可编辑内容的 div 的 React 组件。
- react-draft-wysiwyg - WYSIWYG编辑器建立在DraftJS之上。
- react-editor - 简单的富文本编辑器，可以插入图像和HTML。
- react-medium-editor - medium-editor wrapper.
- react-monacoeditor - React 的 Monaco Editor 组件。
- react-simple-code-editor - 简单简洁的代码编辑器，带有语法突出显示
- react-quill - Quill wrapper.
- react-trumbowyg - Trumbowyg wrapper.
- remirror - demo - docs - ProseMirror toolkit for React.
- slate - demo - docs - 一个完全可定制的框架，用于构建富文本编辑器。
- smartblock - demo - docs - 基于块的所见即所得编辑器基于ProseMirror。
- tiptap - demo - docs - Web Artisans的无头编辑器框架。
Markdown Editor
- react-simplemde-editor - React component wrapper for EasyMDE（最新鲜的 SimpleMDE fork）。
- react-markdown-editor - 使用 React/Reflux 的 markdown 编辑器。
- react-md-editor - 一个简单的带有预览的markdown编辑器，使用React.js和TypeScript实现。
图像编辑
图像处理
- react-avatar-cropper - 旨在成为 react 中头像裁剪的完整解决方案。
- react-avatar-editor - Facebook-like，avatar/profile picture component。
- react-avatar-generator - 为用户头像生成有趣的万花筒。
- 反应轻松裁剪 - 通过简单的交互来裁剪/旋转图像/视频的组件。触摸友好。
- react-image-crop - React 的响应式图像裁剪工具。
- react-image-cropper - Image cropper。
- react-advanced-cropper - 一个 react cropper 库，用于创建完全适合您的网站设计的裁剪器。
表单组件集合
- formsy-material-ui - 用于 Material UI 表单组件的 Formsy 兼容性包装器。
- formy-react-components - 一组用于formsy-react形式的React JS组件。
- react-input-enhancements - 一组用于输入控制的增强功能。
- react-widgets - 一组经过打磨、可扩展且易于访问的输入。
杂项
- @anatoliygatt/数字步进器 - 演示 - 一个完全可主题化且易于访问的数字步进器组件。
- 交织 - React库，用于安全地呈现HTML，过滤属性，使用匹配器自动包装文本，呈现表情符号字符等等。
- react-designer - 在您的 react 组件中，易于配置、轻量级、可编辑的矢量图形。
- react-upload-gallery - React for Upload Image Gallery。拖放，可排序，自定义。
语法突出显示
- react-syntax-highlighter - 使用内联样式的 Prismjs 或 Highlightjs AST 的语法突出显示组件。
用户界面布局
用于布局应用 UI 的组件
- 自动响应-反应 - 自动响应网格布局库。
- 黄金布局 - 多屏幕JavaScript布局管理器。
- hedron - 一种简洁的柔性盒网格系统，由样式组件提供动力。
- m-react-splitters - Splitter component，用 TypeScript 编写。
- muuri-react - demo - docs - 响应式，可排序，可过滤和可拖动的网格布局。
- react-grid-layout - 一种可拖动且可调整大小的网格布局，带有响应式断点，适用于 React。
- react-masonry-component - @desandro’s Masonry的包装器。
- react-reflex - 用于高级 React Web 应用程序的 Flex 布局容器组件。
- react-spaces - demo/docs - 可嵌套的锚定、可调整大小、可滚动的组件。
- 反应石匠 - 动画网格布局组件。
- react-colrow - 响应式网格布局组件。基于 css flexbox。支持分数宽度，自动增长。
- 反应原理图 - 演示 - 使用带样式的原理图构建响应式布局，而无需任何主题配置的开销
用户界面动画
为过渡添加动画效果
- 数据驱动的运动 - 轻松对数据进行动画处理。
- react-animatable - 使用 Web Animations API 的动画库。
- react-anime - 一个超级简单的动画库。
- react-flip-move - 使用 FLIP 技术在 DOM 更改（例如列表重新排序）之间轻松制作动画。
- react-gsap-enhancer - 同时使用 React 和 GSAP 的全部功能。
- react-tsparticles - 一个轻量级组件，可轻松创建交互式粒子动画
- 反应运动 - 解决动画问题的弹簧。
- react-mt-svg-lines - 用于在 SVG 中对线条描边进行动画处理的包装器。
- react-router-transition - 为 react-router 构建的转换，由 react-motion 提供支持。
- react-spring - 一个基于弹簧物理的动画库。
- react-ts-打字机 - 演示 - 易于使用和可自定义的打字机效果，适用于任何文本。
- 成帧运动 - 动画和手势库。
- react-spark-scroll - 用于 react 的基于 Scroll 的操作和动画。
- react-track - 跟踪 DOM 元素的位置。创建很酷的动画。
- react-transitive-number - 将转换效果应用于数字字符串，这是一个旧的Groupon计时器。
- react-web-animation - Web Animations API 的 React 组件 -.
- 速度反应 - 速度.js包装器。
- 自动大小转换 - 根据内部子级大小动态缩放的组件
- react-particles-bg - 粒子背景。
- gooey-react - demo/docs - React 的粘性效果，用于形状斑点/元球。
- react-voodoo - 演示/示例 - 附加动画引擎允许复杂的类似android / iOs的动画，SSR上的渲染滑块，预测惯性，多点触控等
视差
- react-parallax-component - 在组件上添加滚动视差效果的最简单方法。
- 反应-视差-倾斜 - 演示 - 在组件上轻松应用视差倾斜悬停效果。
用户界面框架
响应
组件集 + 响应式布局系统
- AgnosticUI - 可访问的 React 组件基元，也可与 Vue 3、Svelte 和 Angular 一起使用！
- ant-design - demo/docs - 一种来自中国的UI设计语言。提供单个组件。
- atlaskit - Atlassian的官方UI库，包含从徽章到树表的组件。
- 基础 Web - 基础 Web 是启动、发展和统一 Web 产品的基础。
- 碳 - 演示/文档 - 由 IBM 构建的设计系统。
- cdbreact - 演示 - 文档 - 优雅的UI工具包库和可重用的组件，用于构建移动优先，响应式网站和Web应用程序。
- chakra-ui - demo/docs - Simple， Modular & Accessable UI Components for Your React Applications。
- ChatUI - demo/docs - 用于会话UI的UI设计语言和React库
- CoreUI for React - demo/docs - Open Source UI components library.
- evergreen - demo/docs - Evergreen React UI Framework by Segment.
- Fluentui - 用于创建共享代码、设计和交互行为的美观跨平台应用的 UX 框架。
- geist-ui - 现代和极简主义的 React UI 库。
- 格式塔 - 演示/文档 - 一组支持Pinterest设计语言的组件。
- grommet - 用于企业应用程序的最先进的UX框架。
- Mantine - 演示/文档 - 一个功能齐全的库，具有100多个钩子和组件，支持原生深色主题
- orbit - 用于构建面向旅行的项目的组件。
- pivotal-ui - 基于 Bootstrap 库的自定义版本的 React 组件。
- primereact - 一个完整的UI框架，具有50多个组件，具有材料，引导和自定义主题。
- radix-ui - 用于构建高质量设计系统和Web应用程序的无样式，可访问的组件。
- react-bootstrap - 用 React 构建的 Bootstrap 组件。
- react-foundation - Foundation 作为 React 组件的基础。
- reakit - 用于构建可访问的富 Web 应用程序的演示/文档工具包
- searchkit - React UI组件/小部件。使用 Elasticsearch 构建出色搜索体验的最简单方法。
- semantic-ui-react - 官方的Semantic-UI-React集成。
- 半设计 - 演示/文档 - 一个现代，全面，灵活的设计系统。
- shineout - demo - 中文友好的组件集：表单元素，导航，表格，树，树选择下拉列表等。
材料设计
-
🚀
材质 UI - 全套组件。构建您自己的设计系统，或从材质设计开始。
-
反应本质 - 本质 - 基本材料设计框架。
-
react-materialize - react的材料设计，由materializecss提供动力。
-
react-toolbox - 一组实现 Google Material Design 的 React 组件。
-
mdbootstrap - React Bootstrap with Material Design
移动
- antd-mobile - 来自中国的可配置移动UI。
- Ionic React - Ionic Framework：使用一个代码库轻松构建Android，Desktop和Progressive Web Apps。
- OnsenUI - 演示/文档 - 具有材料和平面（iOS）设计的移动应用程序框架。基于 Web 组件。
组件集合
- 蓝图 - 演示 - 文档 - UI 工具包，用于为桌面（非移动）应用程序构建复杂、数据密集的 Web 界面。
- dataminr-react-components - 可重用 React Components 和实用程序函数的集合。
- shards-react - docs/demo - 一个漂亮而现代的 React 设计系统。免费增值💰
- aframe-react - 使用A-Frame和React构建虚拟现实体验。
- react-admin - 在 REST 和 GraphQL 服务之上构建管理员用户体验。
- 优化 - 演示 - 文档 - 立即构建数据密集型应用程序。它附带了 Ant Design System，这是一个企业级 UI 工具包。
- 矩阵卡 - 演示 - 生成矩阵雨式卡的最简单组件。
- rsuite - demo/docs - “企业系统产品”的组件套件。
- lens-ui - docs - 一套专注于简单的组件。
UI 实用工具
记者
报表计算样式
可见性报告程序
当组件变为可见/隐藏时报告
- react-intersection-observer - Intersection Observer API 的 React 实现。
- 反应能见度传感器 - 传感器组件。
- react-waypoint - 一个 React 组件，用于在滚动到元素时执行函数。
测量报告程序
确定并报告元素的测量值
- react-component-query - 根据组件的宽度和/或高度为组件提供道具。
- react-container-dimensions - 检测元素大小调整的包装器组件。
- react-dimensions - React 高阶组件，以获取容器的维度。
- 反应高度 - 用于确定和报告子元素高度的组件包装器。
- react-measure - 计算 React 组件的测量值。
- react-sizeme - 让你的 React Components 知道它们的宽度和高度。
设备输入
将用户输入转化为操作
键盘事件
- react-hotkeys - React 的声明式热键和焦点区域管理。
- react-key-handler - 用于处理键盘事件的 React 组件。
- react-keydown - React 组件的轻量级 keydown 包装器。
- 反应快捷键 - 从一个位置管理键盘快捷键。
- useKeyCapture - 一个自定义钩子，用于缓解目标/全局的按键侦听器。
- react-keyboard-navigator - 一套 React 组件和钩子，用于通过键盘选择同级组件。
滚动事件
- react-scroll-components - 一组对页面滚动做出反应的组件。
触摸滑动
- react-swipe - Swipe.js作为 React 组件。
鼠标事件
- 反应瞄准 - 确定用于触发鼠标事件的光标瞄准。
- react-hook-mighty-mouse - demo - Hook，用于跟踪选定元素上的鼠标事件。
元标记
设置元标记、<标题>、子级
- react-document-meta - 用于基于 React 的应用程序的 HTML 元标记。
- react-document-title - React 的声明性、嵌套、有状态、同构 document.title。
- react-helmet-async - React 16+ 和朋友的线程安全头盔
- react-helmet - React 的文档主管经理。
门户
在任意 DOM 节点处呈现元素
- react-layer-stack - 简单但无处不在的强大和不可知的 React 分层系统。
- react-portal - 用于运输模态，灯箱，加载栏的React组件…到 document.body。
测试用户行为
A / B测试，实验，…
- react-ab - 用于 React 的简单声明性和通用 A/B 测试组件。
- react-experiments - 用于实现 UI 实验的 React 组件。
代码设计
帮助代码设计的库
数据存储
数据流 / 数据管理 / 数据存储 / 组件状态 / 数据流
- alt - 同构通量实现。
- 猴面包树反应 - 猴面包树的反应集成。
- 大脑 - 具有自己的调试器的状态控制器。
- effector-react - effector的反应绑定，一种有效的多存储状态管理器。
- 氟-lib - React 使用单个操作流进行反应状态和副作用管理。
- 可通量 - 用于通用助焊剂应用的可插拔容器。
- fluxxor - 用于 React 的 Flux 架构工具。
- kea - React 应用程序的高级架构。
- mobx-react - React bindings for MobX.创建完全反应式组件。
- react-3ducks - demo - React 的简单状态管理解决方案。
- 反应可控 - 轻松创建可控组件。
- react-i13n - 一种高性能、可扩展和可插拔的方法来检测您的 React 应用程序。
- react-redux-provide - 弥合了 Redux 和 GraphQL/Relay 的声明性之间的差距。
- react-redux - Redux 的官方 React 绑定。
- redux 批处理操作 - Reducer + 操作，用于减少单个订阅者通知下的操作。
- redux-batched-subscribe - 存储增强器，允许批处理订阅通知。
- redux - JavaScript 应用程序的可预测状态容器。
- reflux - 一个简单的库，用于单向数据流应用程序架构，具有受Flux启发的React扩展。
- 重新选择 - 用于 Redux 的选择器库。
- resourcerer - REST API 的声明性数据提取框架
- shasta - Dead simple + 固执己见的工具包，用于构建 redux/react 应用程序。
- 协同作用 - docs 一个高性能和分布式上下文状态库，用于通过协同 atomar 上下文片段来创建可重用的 React 状态逻辑。
- zustand - docs - 使用简化的通量原理和无样板钩子api的快速熊骨状态管理解决方案。
- 茶 - 小巧，简单和强大的React状态管理
表单逻辑
- 数据驱动表单 - 一种用于构建具有所有功能的表单的声明性方法。
- formcat - 一种使用 React Context API 在 React 中控制表单的简单易用的方法
- formik - 构建没有撕裂的表单，并轻松支持验证。
- formsy-react - React JS的表单输入构建器和验证器。
- plexus-form - 一个动态表单组件，用于使用JSON-Schema进行反应。
- react-hook-form - React hooks 用于表单验证，没有麻烦。
- 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 Router scroll management。
- react-router - React 的完整路由库。
- redux-first-history - Redux First History - Redux history binding support react-router - @reach/router - wouter
- redux-router - React Router的Redux绑定 - 将路由器状态保存在Redux存储中。
- 通用路由器 - 一个简单的中间件式路由器，用于同构JavaScript Web应用程序。
- wouter - 一个极简主义友好的~1.3KB路由库。除了钩子，别无他物。
来自服务器的道具
通过网络异步获取的组件属性
- react-async - 异步获取 React 组件的数据。
- react-refetch - 一种简单、声明性和可组合的方式来获取 React 组件的数据。
- react-resolver - 通用 React 应用程序的异步渲染和数据获取。
- react-router-relay - React Router 的 Relay Integration。
- 重拨 - React 等的通用数据提取和路由生命周期管理。
- redux-async-connect - 请求异步数据，以 redux 状态存储，然后连接到组件。
- redux-connect - 提供用于解析 react-router 中的异步 props 的装饰器。
- axios-react - React 的 HTTP client component。
与服务器通信
- 肾上腺素 - 简单的接力替代品。
- apollo-client - 一个简单的缓存客户端，适用于任何 GraphQL 服务器和 UI 框架。
- react-relay - Relay 是一个 JavaScript 框架，用于构建数据驱动的 React 应用程序。
- query - docs 强大的异步状态管理，服务器状态实用程序和 TS/JS、React、Solid、Svelte 和 Vue 的数据提取。
CSS / 样式
- aesthetic - 一个功能强大的类型安全，框架不可知的CSS-in-JS库，用于样式组件，无论是普通对象，导入样式表，还是简单地引用外部类名。
- 阿佛洛狄忒 - 这是内联样式，但它们有效！
- 内联样式前缀 - 内联样式对象的运行时自动前缀。
- 回形针 - 文档 - 使用纯HTML和CSS构建UI primitivites。
- radium - 一组用于管理 React 元素上的内联样式的工具。
- react-container-query - 模块化响应组件。
- react-css-modules - 将类名无缝映射到 React 组件内部的 CSS 模块。
- react-responsive - react for responsive design 中的媒体查询。
- 反应响应 - 响应式组件和钩子。
- 带样式的组件 - 组件期限的可视基元。
模板
- hyperx - 标记的模板字符串虚拟 dom 生成器。
- jsx-control-statement - Neater If and For for React JSX.
同构应用
- hypernova - 用于服务器端呈现JavaScript视图的服务。
- 同构中继 - 向 React Relay 添加服务器端渲染支持。
- 同构样式加载器 - 用于 Webpack 的同构 CSS 样式加载程序。
- react-server - 具有服务器渲染的 React 框架，用于超快的页面加载。
- rill - 通用 Web 应用程序框架。
- webpack-isomorphic-tools - Webpack构建的应用程序（例如React）的服务器端渲染。
样板
脚手架 / 入门套件 / Yeoman 生成器 / 堆栈合奏 / 种子
- create-react-app - 创建没有构建配置的 React 应用。
- crisp-react - 在TypeScript中快速集成，支持多个SPA和陷阱避免。
- cra-template-redux-auth-starter - Cra 的 Redux auth starter boilerplate。
- electron-react-boilerplate - 在桌面应用程序上进行实时编辑开发。
- essential-react - 使用 Babel 构建可测试的 React 应用程序的最小框架。
- generator-react-webpack - 用于 ReactJS 和 Webpack 的 Yeoman generator。
- generator-starhackit - 全栈入门套件。
- nwb - CLI 工具和 devDependency for React apps & components and npm modules。
- nx - 下一代构建系统，具有一流的单一版本支持和强大的集成。
- react-boilerplate - 使用 JSX 的 React 模块的快速打包器不可知样板。
- react-hot-boilerplate - 下一个 ReactJS 项目的最小实时编辑样板。
- react-redux-universal-hot-example - 通用 Webapp 的入门样板。
- reactuate - React/Redux stack（不是样板套件）。
- redux-cli - 一个固执己见的CLI，用于更快地构建redux/react应用程序。
- 继电器全栈 - 继电器入门套件。
- roc - 现代应用程序开发生态系统。
- rockpack - 简单的解决方案，用于在5分钟内使用SSR创建React应用程序，捆绑，linting，测试。
- universal-redux - 一个npm包，可以让你直接进入React和Redux的编码。
- create-react-dependency - 创建没有构建配置的反应依赖关系。
- phoenix - 一个简单的样板，可帮助您通过服务器端渲染和本地化支持来制作您的反应应用程序。
- react-enterprise-starter-kit - 高度可扩展和高性能的令人敬畏的React Starter Kit，适用于企业应用程序，具有非常容易维护的代码库。
- express-react-boilerplate - 一个帮助程序员基于react-cool-starter轻松创建Express&React项目的工具。
杂项
- react-inlinesvg - ReactJS 的 SVG 加载程序组件。
- react-godfather - 一种编写功能组件的新方法，没有钩子。
- redux-auth-patch - 完整的令牌身份验证系统，用于支持同构渲染的 react + redux。
- redux-search - 用于客户端搜索的 Redux 绑定。
- tcomb-react - PropTypes 的替代语法。
- 反应查找 - ⚛️优雅、可访问的 React 搜索组件。
- 反应通用钩子 - 🎉支持无处不在的反应钩子（功能或类组件）。
公用事业
- qrcode.react - 一个
组件，用于 React。 - react-children-utilities - React.Children 的 Extended utils。
- react-media - React 的 CSS 媒体查询组件。
- react-middle-ellipsis - demo - 截断中间的长字符串而不是末尾。
- react-translate-component - 多语言/本地化文本内容。
i18n 型
国际化 / L10n / 本地化 / 翻译
- react-i18next - react 完成正确的国际化。使用 i18next i18n 生态系统。
- react-intl - Internationalize React apps.
- react-localized - 基于格式的 React 组件的国际化。
gettext - react-translate-maker - 用于 React 的通用国际化 （i18n） 开源库。
- react-intl-universal - demo Internationalize React apps.不仅适用于 React.Component，还适用于 Vanilla JS。
- @tolgee/react - 文档 – 基于 Web 的本地化工具，使用户能够直接在他们开发的 React 应用程序中进行翻译
- js-lingui - docs – JavaScript 的可读性、自动化和优化 （5 kb） 国际化。
框架绑定/集成
- backbone-react-component - 一点漂亮的胶水，可以自动插入你的Backbone模型。
- elm-react-component - 一个 React 组件，它包装了一个 Elm 模块，用于 React 应用程序。
- gl-react - 用于 React 的 OpenGL / WebGL 绑定，用于在图像和内容上实现复杂的效果。
- react-backbone - 用于react的Backbone感知混入器以及更多。
- react-d3-library - 用于在 React 中使用 D3 的开源库。
- react-elm-components - 用Elm编写React组件。
- react-famous - react bridge to Famo.us。
- react-localstorage - Facebook React的简单组件化localstorage实现。
- react-lottie-player - demo - Declarative lottie animation player.
- react-on-rails - 集成 React + Webpack + Rails 来构建通用（同构）应用程序。
- react-three-renderer - 使用 React 渲染成三.js画布。
- react-threejs - React 和 Three 之间最简单的绑定.js
- reactfire - ReactJS mixin，便于 Firebase 集成。
- 反应式元素 - 允许使用 React.js 组件作为 HTML 元素（web 组件）。
- react-unity-webgl - 使用内置事件系统与双向通信的 Unity 集成。
与第三方服务集成
- react-ga - React Google Analytics Module.
- react-google-analytics - Google Analytics component.
- react-google-autocomplete - Google Places API 组件和钩子。
- react-recaptcha - 一个 react.js google 的 reCAPTCHA。
- react-stripe-checkout - 将 stripe 的 checkout.js作为 react 组件。将结账与 React 结合使用的最简单方法。
- redux-segment - Segment.io redux 的分析集成。
- react-slack-notification - 直接向 Slack 通道发送消息和错误日志。
- react-firebase-hooks - 用于将 firebase 集成到应用程序中的 Hook。
性能
用户界面
- inferno - 一个非常快速的，类似React的JavaScript库，用于构建现代用户界面。
- react-fastclick - React 的快速触摸事件。
- react-static-container - 有效地呈现静态内容。
检查
- react-perf-tool - 调试 React 应用程序的性能。
- react-render-visualizer - Render visualizer for ReactJS.
延迟加载
- react-infinite-grid - 一个 React 组件，用于呈现元素网格。
- react-infinite - 一个基于UITableView的浏览器就绪的高效滚动容器。
- react-lazy-load - React 组件，在子元素进入视区时呈现它们。
- react-lazyload - Lazyload 你的组件、镜像或任何对性能都很重要的东西。
- react-virtualized - 用于高效呈现大型列表和表格数据的 React 组件。
应用大小
- babel-plugin-transform-react-remove-prop-types - Remove 不必要的 React propTypes。
- react-lite - React 的一种实现，针对小脚本大小进行了优化。
服务器端呈现
- iSSR - 将 React 应用程序移动到服务器端渲染的最简单方法。处理副作用并同步状态。
- react-esi - 通过将 React 组件公开为边缘端包含 （ESI） 片段来提高 SSR 性能的库
开发工具
测试
- carte-blanche - 一个隔离的开发空间，为您的组件提供集成的模糊测试。
- chai-enzyme - Chai.js断言和方便函数，用于测试酶的反应成分。
- enzyme - 用于 React 的 JavaScript 测试实用程序。
- jest-cli - Painless JavaScript Testing.
- react-unit - ReactJS 的轻量级单元测试库。
- redux-test-recorder - 一种 redux 中间件，通过 ui 交互自动生成化简器的测试。
- rut - 使用 .支持 DOM 和自定义渲染器。
react-test-renderer - unexpected-react - 用于意外的插件，用于测试完整的 React 虚拟 DOM，以及浅层渲染器。
Redux
- redux-devtools-chart-monitor - Redux DevTools的图表监视器。
- redux-devtools-dock-monitor - 用于 Redux DevTools 监视器的可调整大小和可移动的扩展坞。
- redux-devtools-filterable-log-monitor - Redux DevTools的可过滤树视图监视器。
- redux-devtools-inspector - 另一个 Redux DevTools Monitor.
- redux-devtools-log-monitor - Redux DevTools的默认监视器，带有树视图。
- redux-devtools - 用于 Redux 的 DevTools，具有热重载、操作重放和可自定义的 UI。
- remote-redux-devtools - Redux DevTools remotely.
检查
- fluxguard - PROD 更改监控，突出显示所有 DOM + 设计更改。
- react-inspector - Power of Browser DevTools inspectors 就在您的 React app 中。
- react-json-inspector - React JSON inspector component.
- reactotron - 一个CLI和OS X应用程序，用于检查您的React JS和React Native应用程序。
杂项
- 组件控件 - 演示 - 文档 - 下一代工具，用于创建超快的文档站点。
- cosmos-js - 用于设计真正封装的 React 组件的 DX 工具。
- react-demo-tab-cli - 用于创建 react 组件演示的 CLI 工具。
- react-heatpack - 一个“heatpack”命令，用于通过webpack热重载快速React开发。
- react-styleguidist - React 风格指南生成器。
- standard-react - JavaScript Standard Style Guide.
- Plasmic - 强大的设计工具，用于可视化构建您的 React 组件。
- SimpleLocalize - 开源 CLI 工具，用于在 React 项目中查找 i18n 密钥。
- react-device-frameset - React device frameset component。
杂项
- DataFormsJS JSX Loader - 小型JavaScript编译器，用于直接在网页上快速将JSX转换为JS。
- html-to-react-components - 将HTML的注释部分作为单独的模块提取到React组件中。
- htmltojsx - 使用 React 的强大功能自动 AJAXify plain HTML。太神奇了！
- jsonx - React JSON Syntax.
- mozaik - Mozaïk是一种基于nodejs / react / d3 / stylus的工具，可以轻松制作漂亮的仪表板。
- react-blessed - 一个用于祝福的反应渲染器。
- jsondiffpatch-react - JSON diffing.
静态网站生成器
- gatsby - 使用 React.js将纯文本转换为动态博客和网站。
云解决方案
数据库
-
crisp-bigquery - 全栈Google BigQuery与TypeScript中的Express。
-
react-server-routing-example - AWS DynamoDB 的通用客户端/服务器路由和数据。
- 原文作者：知识铺
- 原文链接：https://index.zshipu.com/geek/post/react/level01/3.Github1000%E4%B8%AA%E9%A1%B6%E7%BA%A7%E7%BB%84%E4%BB%B6%E5%BA%94%E5%AF%B9%E5%90%84%E7%A7%8D%E4%B8%9A%E5%8A%A1%E5%9C%BA%E6%99%AF/
- 版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可，非商业转载请注明出处（作者，原文链接），商业转载请联系作者获得授权。
- 免责声明：本页面内容均来源于站内编辑发布，部分信息来源互联网，并不意味着本站赞同其观点或者证实其内容的真实性，如涉及版权等问题，请立即联系客服进行更改或删除，保证您的合法权益。转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。也可以邮件至 sblig@126.com
