用户界面组件

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

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

无限滚动

覆盖

显示叠加/ 模式 / 警报 / 对话框 / 灯箱 / 弹出窗口

  • 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 元素作为内容的支持

通知

烤面包机/小吃店 — 使用无模式临时小弹出窗口通知用户

工具提示

菜单

菜单/侧边栏

固定页眉/向上滚动页眉/粘性元素

制表符

装载 机

加载器/微调器/进度条 — 让用户知道正在加载某些内容

旋转 木马

按钮

崩溃

图表

以图表/图形/示意图显示数据

显示树数据结构

  • react-complex-tree - demo - docs - 无攻击的可访问树组件,具有多选,拖放和搜索功能
  • react-treebeard - React Tree View Component。数据驱动、快速、高效、可定制。
  • react-treeview - 使用 React 制作的简单、轻便、灵活的树视图。

用户界面导航

导航视图的方法

自定义滚动条

音频/视频

  • 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条形码阅读器来读取条形码。

地图

时间 / 日期 / 年龄

显示时间/日期/年龄

照片/图像

显示图像/照片

图标

显示图标/图标集/表情符号

  • iconify-react - 来自50多个图标集的40k多个图标,包括所有流行的图标和表情符号集。
  • react-icons - 使用 ES6 导入的流行图标包的 svg react 图标。
  • react-open-doodles - 真棒免费插图作为 react 组件。
  • react-icomoon - 使用 react-icomoon,您可以轻松使用在 icomoon 中选择或创建的图标。
  • tabler-icons-react - 一组超过450个免费的MIT许可的高质量SVG图标。

分页器

显示要分页的控制元素

降价查看器

显示解析的标记源

帆布

使用 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 贡献图的可自定义版本。

杂项

表单组件

让用户输入数据

日期/时间选取器

日期选取器/ 时间选取器 / 日期时间选取器 / 日期范围选取器

表情符号选取器

  • interweave-emoji-picker - 一种基于 React 的表情符号拾取器,由 Interweave 和 Emojibase 提供支持。

输入类型

屏蔽输入,专用输入;电子邮件/电话号码/信用卡/等

自动完成

自动建议/自动完成/键入

选择

颜色选取器

  • coloreact - 一个用于 React 的微小颜色选择器。
  • react-color - 是 React 应用程序的一个微小的颜色选择器小部件组件。
  • react-colorful - 一个微小的(2,5 KB),无依赖性,快速且易于访问的颜色选择器组件。
  • 反应输入颜色 - 使用 hsv 颜色选取器的反应输入颜色分量。

切换

滑 块

单选按钮

类型选择

让用户在键入时选择某些内容(例如标签)

标签输入

允许用户在单个输入中添加多个标签

自动调整输入大小/文本区域

  • react-input-autosize - 自动调整 React 输入字段的大小。
  • react-autowidth-input - 高度可配置和可扩展的自动调整大小的输入字段,用钩子构建。
  • react-textarea-autosize - react 的