React Components
Source: https://github.com/brillout/awesome-react-components at
66b2758c4808
License: CC0-1.0
Read the English original
This edition is an AI-assisted translation.
绝对棒极了 React 组件库( L)
Section titled “绝对棒极了 React 组件库( L)”这是AWESOME组件列表. 不,这不是一个完整的列表 每一个 React 太阳下的组成部分。 “棒极了”是什么意思? 这个嘛:
- 它解决了一个真正的问题
- 它这样做的方式是… 独一无二的,… … (而且这不是超级流行和众所周知的… )
- 它有最近一个 code 承诺!
寻找一个真正惊人的项目。 并寻找快速维护者的评论和评论,在 (italic parens) 之后的一些注释列表。
维护者 :
- @petebray, author of Fluxguard — monitor PROD website changes.
- @brillout, author of Vike — a fast Vite-based React framework that is flexible, lean, community-driven and dependable.
请审查一下我们 提供指南。我们通过 ** 要求所有公关从列表中删除一个或一个以上的非赞美条目来更新此列表**。 如果您也在删除新资源, 请只公开一个新的资源 。
UI 构成部分
Section titled “UI 构成部分”可编辑的数据网格/电子表格
Section titled “可编辑的数据网格/电子表格”- AG Grid - 支持高级数据网格/ 数据表 Javascript / React / AngularJS /Web组件.
- fortune-sheet - 在线预览表组件,提供与Excel一样的外置功能.
- gigatables-react - 排序、页码/无限卷轴、全球/栏码搜索、 AJAX CROUD,还有更多。
- Handsontable - demo - docs - 类似电子表格的数据网格 UI 支助 React, Angular, TypeScript 和 JavaScript.
- jqwidgets-react-grid - 过滤、 铺设、 组合、 导出到 Excel, PDF, CRUD 以及更多。
- MUI X Data grid - demo/docs - 为电力用户和复杂使用案例提供先进功能的快速和可定制的数据网。
- react-data-grid - Excel类网格.
- ReactGrid - demo/docs - 在应用程序中添加类似电子表格的行为
- revo-grid - demo/docs - 动力全数据网 React / AngularJS / Vue / 具有高级定制的Web组件.
- SheetXL – A high-performance spreadsheet grid. TypeScript, ESM, Node/browser, Excel-compatible functions.
- SVAR React DataGrid - demo - docs - React DataGrid拥有细胞内编辑,树数据,上下文菜单,虚拟滚动等功能.
-
mantine-datatable - demo/docs - 曼汀的轻量级表格组件 UI 应用程序, 有很多特性
-
material-table - demo/docs - 盖上 Material UI,加:分组、树数据、可扩展行、导出、内线编辑
-
mui-datatables - 内建于 Material UI。搜索、造型、过滤、调整大小/隐藏列,导出、打印、选择/扩展列。
-
react-data-table - demo/docs - 易于使用、反应灵敏、易用、可申报、可配置的表格,包括排序、可选行、可扩展行、页码
-
TanStack Table - demo - 无头 UI 用于构建强大的表格和数据网格
-
react-table-library - demo - React 表格库 — — 一个几乎无头的表格库 — — 用于构建更好的表格。
-
rsuite-table - demo/docs - 支持虚拟化的表格组件。
-
DevExtreme React Grid - 基于高性能插件的数据网格 Bootstrap 和 Material Design.
-
Smart React Grid - 快速和特性完整数据网格 Material Design.
-
simple-table - demo - docs - 轻量级 快速 富有特色 排序/过滤,虚拟化,树数据,巢头,固定柱,定制造型等.
-
KendoReact Grid - 强大的数据网组件具有100+的即时使用功能,如呼号,排序,导出到Excel,等等.
-
Material-React-Table - 一个全功能 Material UI V5 TanStack的实施 React 表V8,从下到下 TypeScript
- @egjs/react-infinitegrid - npm - demo - 一个模块,用于根据各种布局类型,无限地安排包括内容的卡片元素。
- react-lazyload - 轻装你的组件,图像 或其他任何的,在性能重要的地方。
- react-list - 多功能无限卷轴 React 组件。
- @af-utils/virtual - demo/docs - 调整大可滚动列表和网格。
- react-window - demo - React 高效提供大清单和表格数据的组成部分
- virtua - demo - 用于零配置、快速和小(~3kB)虚拟列表组件 React, Vue 和固体。
Display 覆盖 / 模式 / 提醒 / 对话框 / 灯箱 / 弹出
- react-aria-modal - 完全无障碍和灵活 React 所建模式 WAI-ARIA 作者实践.
- react-modal - 可访问模式对话框组件 React.
- @paratco/async-modal - 简单的同源模式处理器 React.
- reoverlay - demo - 缺乏管理模式的解决方案。
- sweetalert2 - demo/docs - 美丽、反应灵敏、高度定制和方便(WAI-ARIA替换 JavaScript弹出盒 零依存处.
- sweetalert2-react-content - 官方 SweetAlert2 添加支持的增强器 React 作为内容的元素
Toaster / 小吃栏 — 用模特儿临时弹出通知用户
- react-notifications-component - demo - 通知中高度定制和易于使用的内容。
- notistack - demo - docs - 高度定制的可相互堆叠的通知小吃栏
- react-local-toast - demo - docs - 显示与特定组成部分相联系的反馈,而不是全应用的土司。
- react-toast - demo - docs - 最低限度的吐司通知。
- 🚀 react-toastify - demo - 最好现在就去 钩子支持. 没有裁判。
- react-confirm-lite - demo - 一个轻量级的基于承诺的确认对话框,用于 React 内置 Tailwind CSS 支助。 它的设计很简单 react- 保存,同时保持完全定制。
- reapop - 页:1 React & Redux 通知系统。
- react-hot-toast - demo - 吸烟热通知 React轻量级、定制和美丽
- Sonner - 有意见的敬酒部分 React.
- react-tooltip - React 工具提示组件。
菜单/边栏( M)
- hamburger-react - demo/docs - 汉堡菜单动画图标 React.
- react-burger-menu - 一个有效果和风格的离坎瓦斯边栏.
- react-offcanvas - 屏幕外菜单 React.
- react-planet - demo - 创建类似行星的圆形菜单。
- mantine-contextmenu - demo/docs - 与曼汀一起构建的应用程序的背景菜单钩/组件 UI.
Fixed headers / 滚动页眉 / 粘贴元素
- react-headroom - 把头藏起来,直到你需要它。
- react-stickynode - 表演者和全面性 React 粘着
- react-tabs - React 选项卡组件。
- react-tabtab - React,标签。
Loaders / 旋转器 / 进度栏 — 让用户知道正在装入的东西
- react-loader-spinner - 收集数组 react- 合成操作用的螺旋桨
- react-redux-loading-bar - 简单装入栏 Redux 和 React.
- react-spinners-css - 令人惊讶的收藏 react 旋转器组件。
- react-spinners - 装入旋转器组件的集合 react.
- react-content-loader - SVG-Powered组件可以方便地创建占位符加载(如Facebook的卡加载).
- react-simple-captcha - npm - demo - React 简单的Captcha是一个非常强大的,高度定制的,容易使用Captcha用于 React 联合来文。
- procaptcha - demo - docs - 隐私专注自由CAPTCHA
- @egjs/react-flicking - npm - demo - 这是可靠、灵活和可扩展的旋转木马。
- react-awesome-slider - demo - 全页,3D动画,60fps介质和内容滑块/木马.
- pure-react-carousel - 从零开始建造,没有很高的见解.
- react-id-swiper - 使用危险刷子作为工具的库 ReactJs 组件
- react-instagram-zoom-slider - demo - 由Instagram启发的滑动器组件,可压缩能力。
- react-responsive-carousel - React.js 反应卡卢塞尔(与斯威普).
- react-slick - React 旋转木马组件。
- keen-slider - demo - 表演木马/滑板 native 触/擦行为.
- swiper - demo - docs - 最现代化的免费移动触摸滑动器,有硬件加速过渡和惊人 native 行为
- react-awesome-button - demo - 3D动画60fps按钮,带有负载进度和社会共享动作.
- reactive-button - demo - docs - 一个漂亮的动画按钮组件,带有进度指示器。
- react-accessible-accordion - 无障碍协议组件 React.
- react-collapse - 用于崩溃动画的元件包 react- 动作
- react-tabbordion - demo - 通用、语义和 CSS- 仅用于创建Antions和Tabs的组件。
图表中的数据( D)
- essential js 2 charts - 美丽的交互式图表和图表 react.
- EazyChart - demo - docs - 将数据容易转化为有意义的图表
- echarts for react - 环绕美丽的 Apache Echarts
- jscharting-react – React chart component offering a complete set of chart types and engaging data visualizations with JSCharting.
- react-chartist - React 图文.js的组件。
- react-charty - demo - 小型但强大的交互式数据,即有多种图表类型、动画、缩放和主题。
- react-chartjs-2 - 常见 react 使用图.js2.0绘制组件图。
- react-d3-components - D3 组件 React.
- react-google-charts - React- 谷歌图 React 组件。
- react-highcharts - React-高图
- react-sparklines - 美丽和表现的火花线 React 组件。
- react-timeseries-charts - 申报时间序列图.
- react-vis - 基于 React 和d3类。
- recharts - 重新定义图表库 React 页:1
- rumble-charts - React 用于构建可堆肥和灵活的图表的组件。
- victory - 数据为: React.
- semiotic - Semiotic是一个数据可视化框架,用于 React.
- SVAR React Gantt - demo - docs - 自定义、互动的甘特图组件
- DevExtreme React Chart - 基于高性能插件的图表 Bootstrap 和 Material Design.
- Smart React Chart - 特色完整图文库.
- react-muze - React 包装 muze(免费数据可视化库,用于在浏览器中创建探索性数据可视化,使用WebAssembly).
- Flowchart React - 流程图和流程图设计器 React.js.
- react-dashboard - 变形板。
显示树数据结构( D)
- json-edit-react - demo - JSON/对象树查看器和编辑器
- react-arborist - demo - 完整的树形视图:无头、虚拟化、多选择、拖放、键盘导航、搜索
- react-complex-tree - demo - docs - 带有多选择、拖放和搜索的不可访问树构件
- he-tree-react - demo - docs - 树木,可定制 UI、平面数据、树数据、拖放和占位符。
导航视图( W)
- react-scroll - React 滚动组件 。
- react-swipeable-views - 页:1 React 绑定标签和可擦拭视图的组件。
自定义滚动栏
Section titled “自定义滚动栏”- rc-scrollbars - demo - 有弹性选项的自定义滚动条和60 FPS
- react-custom-scroll - demo - 方便自定义浏览器滚动条 native OS滚动行为.
- react-shadow-scroll - 自定义图像并在滚动存在时插入阴影的组件。
音频/ 视频
Section titled “音频/ 视频”- react-dailymotion - 每日运动播放器组件 React.
- react-player - 页:1 react 用于播放各种URL的组件,包括YouTube。
- react-soundplayer - 创建自定义的 SoundCloud 播放器 React.
- react-youtube - React.js 有动力的YouTube播放器组件.
- video-react - 为 HTML5 世界所建的网络视频播放器 React 图书馆。
- material-ui-audio-player - 音频播放器 material ui design.
- react-vision-camera - 相机组件 React 使用“用户媒体”。 我们可以使用这个组件来完成计算机视觉任务,如条码扫描,文本识别等.
- react-barcode-qrcode-scanner - 条码和 QR code 扫描器组件 React它使用 react- 视觉-摄像头可以访问相机,而Dynamsoft Barcode Reader可以读取条码.
- google-map-react - 通用谷歌地图 react 组件,允许渲染 react 的组件。
- mapkit - 使用 MapKit JS 整合 Apple Maps 的图书馆, 并附有说明, 覆盖和搜索 。
- pigeon-maps - demo - ReactJS 无外部依赖的地图 。
- react-geosuggest - 页:1 React Google Maps Places API 自动推荐。
- react-leaflet - React Leaflet地图的组件。
- react-map-gl - 页:1 React MapboxGL-js和覆盖API的包装器.
- react-svg-map - demo - 一组显示交互式SVG地图的组件。
时间/ 日期/ 年龄
Section titled “时间/ 日期/ 年龄”播放时间/ 日期/ 年龄( D)
- react-timeago - 一个简单的时间调用组件 ReactJs.
- timeago-react - 格式日期为
*** time ago语句。 如:“三小时前”. - react-google-flight-datepicker - Google 飞行日期选择器已安装 ReactJS.
图片/ 图像
Section titled “图片/ 图像”播放图像/ 照片( D)
- lightGallery - demo - docs ——全功能灯盒廊构件.
- react-compare-image - demo - React 组件可以使用滑动器比较两个图像。
- react-image-gallery - 反应图像画廊、旋转木马、图像滑动器 react 组件。
- yet-another-react-lightbox - demo - docs - React 光盒组件。
- react-intense - 页:1 React 用于关闭大型图像的组件。
- react-photo-album - demo - docs - 反应 React 图片馆.
- react-svg-pan-zoom - 页:1 React 在 SVG 中添加泛和缩放特性的组件。
- react-particle-image - demo - 图像作为交互式粒子。
- react-imgix - 添加快速,反应迅速的图像作为图像,图片,或背景!
- @frameright/react-image-display-control - 定义智能响应图像的缩放区域 。
- zoom-image - demo - docs - 一个微小但强大的框架不可知图书馆,以放大网络上的图像
- react-infinite-gallery – Infinite-scroll image gallery component for React apps.
播放图标/ 图标设置/ emojis
- iconify-react - 50+图标集的40k以上图标,包括所有流行的图标和emoji集.
- react-icons - 视频 react 图标。
- react-open-doodles - 很棒的免费插图 react 组件。
- react-icomoon - 与 react- icomoon 您可以轻松使用您在 icomoon 中选择或创建的图标 。
- tabler-icons-react - 一套超过450个免费的麻省理工学院许可的高质量SVG图标.
- Lucide - 社区制作的美丽与一致的图标工具包. 开源项目和一叉 Feather 图标.
显示要粘贴的控制元素( D)
- react-paginate - 页:1 ReactJS 创建页码的组件。
- react-laravel-paginex - 使用 Laravel 插座 ReactJS (习惯).
- paginated - React 制作道具和自定义钩子来构建 pagination 。
- react-steps - Demo - 反应 React 脚踏车。
Markdown 查看器
Section titled “Markdown 查看器”播放解析标记源( D)
- react-markdown - 渲染器 Markdown 作为 React 组件。
使用 Canvas 或 SVG 输入的 Sketch
- react-konva - React Konva 是一个 JavaScript 用于绘制与 Konva 框架绑定的复杂画布图形。
- react-sketch - 一个用于 React 基于应用程序, 由 FabricJS 备份
- react-sketch-canvas - Demo 自由手向量绘图工具 React 使用 SVG 作为画布 。 接受鼠标、触摸和图形平板的输入
- react-heat-map - 轻量级日历加热图 react 基于 SVG 的组件, 自定义版本 GitHub贡献图.
- html2canvas - 使用 Javascript.
- puck - demo - 自备的视觉编辑器 React
- react-advanced-news-ticker - demo - 灵活和动画的垂直新闻制表器组件
- react-avatar-generator - 允许用户创建随机的caleidoscows,用作异形.
- react-awesome-query-builder - demo - 窗体字段的视觉查询构建器, SQL、 MongoDB 和 JSON 导出
- react-blur - React 用于模糊背景的组件。
- react-demo-tab - demo - 一个 React 组件以方便创建其他组件的演示。
- fastcomments-react - demo - 在页面或SPA上嵌入在线评论线索的快速评论组件.
- react-pdf-viewer - docs - 一个 React 视图 a PDF 文档。
- react-simple-chatbot - demo - 一个简单的聊天员组件来创建聊天。
- react-file-reader-input - 用于文件读取风格和抽象化控制的文件输入组件.
- react-filter-control - 这个 React 用于构建过滤标准的过滤器组件 UI.
- react-headings - 自动递增 HTML 标题(h1,h2等),用于改进无障碍和SEO,无论你的组件结构如何,同时保持对所提供内容的充分控制.
- react-joyride - 为您创建漫游和导游 ReactJS 应用程序。 现在有独立的工具提示!
- react-mouse-select - Demo 一个允许选择的组件 DOM 移动鼠标时的元素
- react-resizable-and-movable - 可调整和可移动组件 React.
- react-resizable-box - 可调用组件 React. #reactjs.
- react-searchbox-awesome - demo - 最小化的搜索箱。
- react-split-pane - React 分页组件。
- react-swipe-to-delete-ios - demo - 以iOS的方式删除列表中的一个项目。
- react-swipeable-list - demo - 可配置组件,使清单与可刷件结合。
- typography - 一个强大的工具箱,用于建设具有美丽打字功能的网站.
- react-pulse-text - demo/docs - 允许您激活其他组件的任何属性的文本。
- captcha-image - 允许您生成带有选项的随机卡布查图像。
- react-pdf - 在您中显示 PDF React 应用起来就像图像一样简单
- react-customizable-chat-bot - Demo - 在几分钟内按你的品牌需求 自行搭建聊天机
- @restpace/schema-form - Demo - 从JSON Schema自动建立复杂的形式。
- react-darkreader - 页:1 React 为您网站添加黑暗/ 夜间模式而设的钩子 。
- react-apple-signin-auth - 苹果签名 React 使用官方苹果JS SDK.
- react-mrz-scanner - 页:1 React 用于扫描护照、签证卡等MRZ的组件。 它基于Dynamsoft Label识别器.
让用户输入数据
日期/时间 计时器
Section titled “日期/时间 计时器”日期采摘/时间采摘/日期采摘
- date-range-picker - demo - 支持日期、范围和范围选择的日历组件。
- react-big-calendar - Gcal/ 外观类似日历组件 。
- react-datepicker - 简单且可重用的日期拾元件 React.
- react-day-picker - 弹性日期拾取器 React.
- react-flatpickr - 平调器 React.
- react-simple-timefield - demo - 简单的时间输入字段。
- react-timezone-select - demo - 动态,简洁的时区选择。 依据
react-select. - DevExtreme React Scheduler - 基于高性能插件的调度器/日历 Material Design.
- jQWidgets Scheduler - 特性完成日程安排库 。
- react-calendar - 您的终极日历 React 应用
- react-date-picker - 帮你挑枣子 React 应用
- schedule-x - Material design 事件日历和取日期组件。 演示网站: https://schedule-x.dev/
- interweave-emoji-picker - 页:1 React 由Interweave和Emojibase提供动力。
Masked 输入, 专用输入; 电子邮件 / 电话号码 / 信用卡 / 等等
- react-credit-cards - 漂亮的信用卡 你的支付表。
- react-payment-inputs - demo - 一个零依赖性容器,以帮助支付卡输入字段。
- react-input-mask - demo - 还有另一个 react 用于输入遮盖的组件。
- @lunasec/react-sdk - docs - 自动加密/调试所有数据的安全、硬化形式组件。
- react-numpad - demo - 对数字、日期和时间进行广泛的数字垫控制。
- react-multi-email - demo - 将多个电子邮件格式化为用户类型。
自动推荐/ 自动完成/ 键入前端( A)
- react-autosuggest - WAI-ARIA 达标 React 自动推荐组件。
- react-typeahead - 纯 react- 基于打字机和打字机。
- react-aria-menubutton - 一个完全无障碍,容易的主题, React- 动力菜单按钮。
- react-functional-select - demo - 微型尺寸和微型优化选定组件,用于 React.js.
- react-mobile-picker - demo - iOS像选中的框组件。
- react-select - 使用和用于 React 联合来文。
- react-column-select - 为 react.
- react-select-search - demo - 轻量级选定组件,用于 React
- coloreact - 一个很小的采色器 React.
- react-color - 是一个很小的采色器部件组件,用于 React 应用程序。
- react-colorful - 一个微小(2,5 KB),无依赖性,快速和方便的采色器组件.
- react-input-color - React 带有 hsv 颜色选择器的输入颜色组件。
- @anatoliygatt/heart-switch - demo - 完全可主题和可获取的心形切换组件。
- react-ios-switch - React 切换组件。
- react-toggle - 一个优雅、可访问的切换组件 React还有一个被颂扬的复选框
- ui-switch - 最完整的 toggle 组件
- react-slider - 滑动组件用于 React.
- react-radio-group - 更好的无线电按钮。
让用户在打字时选择某种内容( 如标签)
- react-autocomplete-input - 自动完成输入字段 React.
- react-mentions - 在文本区里提到人
- rich-textarea - 一个文本区域,用于对文本进行色彩化、突出化、装饰和自动完成。
让用户在一个输入中添加多个标记
- react-tag-input - 一个非常简单的标记组件 React 项目。
- react-tagsinput - 很简单 react 用于输入标记的组件。
- react-tokeninput - 输入组件 React.
- tagify - demo & docs - 轻量级、高效的Tags输入组件。
自动大小输入/ 文本区域
Section titled “自动大小输入/ 文本区域”- react-input-autosize - 自动重排输入字段 React.
- react-autowidth-input - 高度可配置和可扩展性 自动大小的输入字段用钩子构建 。
- react-textarea-autosize - < 文本区域/ & gt; 组件 React 随内容而增长。
- react-rating - demo - 零依赖性,高度定制的评级部分。
- react-awesome-stars-rating - demo - 明星评分部分与无障碍。
- react-star-rating-input - React.js 用于输入0-5(或更多)恒星的组件。
拖放( D)
Section titled “拖放( D)”- react-beautiful-dnd - 漂亮且可访问的拖放列表 React
- react-dnd - 拖放为 React.
- react-drag-sizing - (缩放) React 构成部分。
- react-draggable - React 可拖动组件 。
- react-dragula - 拖拖拉拉的太简单了,很痛
- react-dropzone - 简单的 HTML5 拖放区 React.js.
- react-movable - 用于列表和表格的垂直拖放的可访问和最小化(<4kB gzipped)库。
- react-sortable-pane - 可排序和可调整的面板组件 React.
- neodrag - 用于拖曳的多框架库 。 选择您的框架,拖动 API 行为将保持不变 。
让用户定义列表中的顺序
- react-anything-sortable - 排序任何带有触摸支持和IE8兼容性的孩子.
- sortablejs - 列表以拖放方式在列表内和列表之间重排顺序.
丰富的文本编辑器
Section titled “丰富的文本编辑器”- alloyeditor - WYSIWYG 编辑器基于 CKEditor 并完全重写 UI.
- ckeditor4-react - 官方CKEditor 4富文本编辑器包装.
- ckeditor5-react - 官方CKEditor 5富文本编辑包.
- draft-js - 页:1 React 用于构建文本编辑器的框架。
- edtr-io - demo - docs ——WYSIWYG内置网络编辑器,带有插件.
- megadraft - rich Text编辑器建在草稿.js上.
- react-ace - Ace (高级) Code 编辑) 包装器.
- react-codemirror - demo - 用于 React.
- react-contenteditable - React 可编辑内容的隐藏组件。
- react-draft-wysiwyg - WYSIWYG 编辑器基于 DraftJS.
- react-editor - 简单的富文本编辑器,可以插入图像和 HTML.
- react-medium-editor - 中编译包.
- react-monacoeditor - 摩纳哥编辑部分 React.
- react-simple-code-editor - 简单无螺旋 code 带有语法加亮的编辑器
- react-quill - 奎尔包装。
- react-trumbowyg - Trumbowyg 包装
- remirror - demo - docs - 用于 React.
- slate - demo - docs - 一个完全定制的框架,用于建立丰富的文本编辑器。
- smartblock - demo - docs - Block基于WYSIWYG编辑器基于ProseMirror.
- tiptap - demo - docs - 网络工匠的无头编辑框架。
Markdown 编辑器
Section titled “Markdown 编辑器”- react-simplemde-editor - React 组件包装 EasyMDE (the most fresh SimpleMDE fork).
- react-markdown-editor - 页:1 markdown 使用 React倒车
- react-md-editor - 很简单 markdown 预览编辑器, 已执行 React.js 和 TypeScript.
图像操作( I)
- react-avatar-editor - 脸书类,异形 / profile 图片组件.
- react-avatar-generator - 为用户avatars生成有趣的caleidoscope.
- react-easy-crop - 易于相互作用的作物/旋转图像/视频组件。 触摸亲切.
- react-image-crop - 一个响应图像裁剪工具 React.
- react-image-cropper - 图像收割机.
- react-advanced-cropper - 页:1 react 裁剪程序库创建完全适合您网站的裁剪程序 design.
- react-mobile-cropper - 一个现成的图像剪辑库 深受Android裁缝的启发 依据
react-advanced-cropper.
窗体组件收藏
Section titled “窗体组件收藏”- formsy-material-ui - 用于格式兼容包 Material UI 窗体组件。
- formsy-react-components - 一组 React 用于形式上的联署材料react 表单。
- react-input-enhancements - 输入控制的一组增强功能.
- react-widgets - 一种 à la carte 成套抛光、 可扩展和可获取的输入 。
- @anatoliygatt/numeric-stepper - demo - 完全可主题和可获取的数字阶梯组件。
- interweave - React 用于安全渲染的库 HTML,过滤属性,自动包装文本与匹配者, 使emoji字符, 以及更多。
- react-designer - 易于配置、轻量级、可编辑的矢量图形 react 组件。
- react-upload-gallery - React 用于上传图像图片库。 拖放、 可排序、 自定义 。
语法突出显示
Section titled “语法突出显示”- react-syntax-highlighter - 语法加亮组件,使用内线样式使用Prismjs或Highlightjs AST。
配置应用程序的 UI 组件
- autoresponsive-react - 自动响应网格布局库.
- hedron - 一个无螺旋的弹性箱网格系统,由风格组件供电.
- m-react-splitters - 拆分组件, 以 TypeScript.
- muuri-react - demo - docs - 反应、可分类、可过滤和可拖动的网格布局。
- react-grid-layout - 具有响应性断点的可拖动和可调整网格布局,用于 React.
- react-layman - demo - 有标签的动态平板布局管理器
- react-masonry-component - @desandro的梅森瑞的包装工。
- react-reflex - 高级弹性布局容器组件 React 网络应用.
- react-spaces - demo/docs - 耐稳定锚定、可调整、可滚动的组件。
- react-stonecutter - 动画网格布局组件.
- react-colrow - 响应网格布局组件. 依据 css 变形箱。 支持分数宽度, 自动增长 。
- react-schematic - demo - 使用样式示意图构建响应性布局,而不附带任何主题配置
动物过渡
- data-driven-motion - 轻松地激活你的数据
- react-animatable - 使用Web动画API的动画库.
- react-anime - 一个超简单的动画库.
- react-flip-move - 无力动画之间 DOM 使用FLIP技术进行更改(如列表重排).
- react-gsap-enhancer - 完全使用 React 和GSAP一起来。
- react-tsparticles - 轻量级组件, 方便创建交互式粒子动画
- react-motion - 解决你动画问题的泉水
- react-mt-svg-lines - SVGs的线条中风动画
- react-router-transition - 为下列项目建造的过渡 react- 路由器,电源 react- 动作
- react-spring - 一个基于春季物理的动画库.
- react-ts-typewriter - demo - 任何文字易于使用和自定义的打字机效果。
- framer-motion - 动画和手势库.
- react-spark-scroll - 基于滚动的动作和动画 react.
- react-track - 跟踪位置 DOM 要素。 创建酷似动画.
- react-transitive-number - 将转换效果应用到数字字符串,一个旧的 Groupon 计时器 。
- react-web-animation - React 用于 Web 动画 API 的组件 -.
- auto-size-transition - 根据儿童内部规模动态衡量的构成部分
- react-particles-bg - 文章背景.
- gooey-react - demo/docs - 古伊效应 React,用于形状抽血/元球.
- react-voodoo - demo/samples - 添加动画引擎,允许复杂和类似机器人/iOs的动画,在SSR上渲染滑块,预测惯性,多触摸等
- simple-parallax-js - demo - 最容易获得副电压效应的方法 React 和 JavaScript 图像
- react-parallax-tilt - demo - 很容易地对部件施加斜拉轴倾斜悬浮效应。
一组组件+应答布局系统
- ant-design - demo/docs - 一个 UI Design 中国语言学. 个人 components 可用。
- atlaskit - 阿特拉斯西亚官员 UI 库,包含从 badge 到 tree table 的组件。
- base web - Base Web是启动、发展和统一网络产品的基础。
- carbon - demo/docs - 一个 design IBM公司建造的系统。
- cdbreact - demo - docs - 聪明 UI Kit 库和可重复使用的组件,用于建设移动第一,反应灵敏的网站和网络应用.
- chakra-ui - demo/docs - 简单、模块化和无障碍 UI 您的组件 React 申请.
- ChatUI - demo/docs - 那个 UI design 语言和 React 对话框库 UI
- CoreUI for React - demo/docs - 开放源码 UI 组件库。
- evergreen - demo/docs - 常绿 React UI 按部门分列的框架。
- fluentui - 创建美丽跨平台共享应用程序的 UX 框架 code, design和互动行为
- gestalt - demo/docs - 一套支持Pinterest的组件 design 语言。
- grommet - 企业应用最先进的UX框架.
- kokonut-ui - 自由现代和自定义 UI 组件。
- Mantine - demo/docs - 一个装有100+钩子和组件的全功能库 native 暗色主题支持
- orbit - 建设旅行项目的组成部分。
- flowbite-react - 开源 UI 基于 React, Tailwind CSS,还有Flowbite。
- primereact - 完整 UI 包含50+部分的框架 material, bootstrap 和自定义主题。
- radix-ui - 用于建造高质量建筑的无型、无障碍组件 design 系统与网络应用.
- react-bootstrap - Bootstrap 组件 React.
- react-foundation - 基础为 React 组件。
- reakit - demo/docs 构建可访问的丰富网络应用程序的工具包
- searchkit - React UI 组件/部件。 与Elasticsearch一起建立伟大的搜索体验最简单的方法.
- semantic-ui-react - 官方语义UI-React 融入社会。
- semi-design - demo/docs - 现代、全面、灵活 design 系统。
- shadcn/ui - demo - docs - 设计精美的组件,可以复制和粘贴到应用程序中.
- shineout - demo ——方便中文的一组组件:形式元素,导航,桌,树,树选择下拉等.
- Tremor - demo - docs - 建立图表和仪表板的开源组件。
- untitled-ui-react - demo - 精巧设计的组件集 React Aria 和 Tailwind CSS.
Material Design
Section titled “Material Design”- 🚀 Material UI - 全套组件 自己盖 design 系统,或从 Material Design.
- Autocomplete - 可用自动完成、 组合框、 多选择
- Material Icons - 1 000+ SVG 组合 material 图标。
- Modal - 可访问模式对话框组件 。
- Slider - 可访问滑动器组件 。
- Table - 表格中包含排序、选择、页化、虚拟化。
- Tree View - 可访问树视图组件 React.
- react-essence - Essence - 基本知识 Material Design 框架。
- react-materialize - Material design (单位:千美元) react由变形体驱动
- react-toolbox - 一组 React 执行 Google 组件 Material Design.
- mdbootstrap - React Bootstrap 与 Material Design
- antd-mobile - 可配置移动 UI 来自中国。
- Ionic React - Ionic 框架: 容易构建 Android、桌面和进步网络应用程序 code 基础。
- OnsenUI - demo/docs - 移动应用程序框架 Material 和平面设计。 基于Web组件.
- blueprint - demo - docs - UI 用于构建复杂、数据密集的桌面(非移动)应用程序网络界面的工具包。
- dataminr-react-components - 可重复使用的收集 React 部件和公用事业职能。
- shards-react - docs/demo - 一个美丽和现代的 React design 系统。 费利米恩
- aframe-react - A-Frame 虚拟现实体验 React.
- react-admin - 在 REST 和 GraphQL 服务上建立管理员用户体验。
- refine - demo - docs - 在短时间内建立数据密集型应用程序。 它和蚂蚁一起飞船 Design 系统,企业一级 UI 工具包。
- matrix-card - demo - 生成矩阵雨式卡片的最简单可能的组件。
- rsuite - demo/docs ——“企业系统产品”组件套装.
- lens-ui - docs - 以简单为主的部件。
- Tailwindadmin - docs - 现成沙德CN集 UI 您可以直接插入到您的组件中 React/Next.js 项目。
UI 公用事业
Section titled “UI 公用事业”报表计算样式( R)
可见度记录器
Section titled “可见度记录器”当一个组件可见/隐藏时报告
- react-intersection-observer - React 执行部门间观察员API。
- react-visibility-sensor - 感应元件.
- react-waypoint - 页:1 React 组件,用于在向元素滚动时执行函数。
确定并报告元素的测量
- react-component-queries - 根据其宽度和/或高度向组件提供道具。
- react-container-dimensions - 检测元素大小调整的折叠器组件 。
- react-dimensions - React 获得容器尺寸的更高级组件。
- react-height - 用于确定和报告儿童元素高度的元件包。
- react-measure - 计算测量a React 组件。
- react-sizeme - 让你 React 了解它们的宽度和高度
将用户输入输入到动作中( T)
- react-hotkeys - 宣布热点和重点领域管理 React.
- react-key-handler - React 用于处理键盘事件的组件。
- react-keydown - 轻量级键盘 React 组件。
- react-shortcuts - 从一个地方管理键盘快捷键 。
- useKeyCapture - 一个自定义的钩子来方便目标/全局的按键收听者.
- react-keyboard-navigator - 一组 React 通过键盘选择兄弟式组件的组件和钩子。
- react-scroll-components - 一组组件 react 到页滚动。
- react-swipe - swipe.js as a React 组件。
- react-hook-mighty-mouse - demo - 用钩子跟踪选定元素上的鼠标事件。
设置元标记( S),
- react-helmet-async - 安全带头盔 React 16岁以上和朋友
- react-helmet - 文档主管管理器 React.
任意设置元素( R) DOM 节点
- react-layer-stack - 简单但无处不在的强大和不可知的分层系统 React.
- react-portal - React 用于运输模式、灯箱、装入条的组件。
测试用户行为
Section titled “测试用户行为”A/B试验,实验,
- react-experiments - React 执行部分 UI 实验
Code Design
Section titled “Code Design”帮助创建( L) code 设计
数据流/数据管理/数据存储/组件状态/数据流
- baobab-react - React 为Baobab融入社会。
- cerebral - 拥有自己的调试器的状态控制器 。
- effector-react - React 对效果器绑定,有效的多存储状态管理器.
- fireproof - demo - docs 纯JS,零依赖性,CRDT数据库 - 在浏览器中运行并连接到任何云端或后端
- RxDB - demo - docs 快速、本地第一、反应性数据库 JavaScript 应用程序
- fluxible - 通用通量应用的可插件容器.
- kea - 高级架构 React 应用程序。
- react-i13n - 一种表演者、可伸缩和可插件的方法,用于对您的 React 应用。
- react-redux - 官方 React 约束 Redux.
- redux-batched-actions - 减少者+减少单一用户通知下的行动。
- redux - 可预测的状态容器 JavaScript 应用程序。
- reselect - 选择库 Redux.
- resourcerer - REST API 声明数据对比框架
- synergies - docs 用于创建可重复使用的表演和分布式上下文状态库 React 通过协同atomar上下文块实现状态逻辑。
- zustand - docs - 快速熊骨状态管理解决方案,采用简化的通量原理和无锅炉板的悬钩。
- teaful - 轻而易举 强大 React 国家管理
- data-driven-forms - 一种具有各种功能的构建表格的宣示方式.
- formik - 构建没有眼泪的形态,支持轻松验证.
- formsy-react - 窗体输入构建器和验证器 React 联合来文。
- Phormal - Docs & Demos ——反应性,多语种形式与内置验证,支持暗模式和右向左语言.
- react-hook-form - React 用于形式验证的钩子,不用麻烦.
- react-jsonschema-form - 页:1 React 用于从 JSONSchema 构建 Web 表格的组件。
- react-client-validation - 简单和超轻量级验证 React.
- react-final-form - 以订阅为基础的国家管理
- react-formawesome - 复杂的库 用于创建真棒的表格。
- surveyjs - 高级调查和表格库
- Formily - 高性能,可扩展, Typescript 亲切
- hook-form-react - docs - 轻量级、无依赖性的解决办法 React 用于形式验证的钩子.
- react-router-component - 声明路由器组件 React.
- react-router-scroll - React 路由器滚动管理.
- react-router - 一个完整的路由库,用于 React.
- redux-first-history - Redux 第一历史 - Redux 历史绑定支持 react- router - @ reach/ router - wouter
- universal-router - 同位素的简单中间软件类路由器 JavaScript 网易应用.
- wouter - 最小化方便~1.3KB路由库. 除了钩子别无他法.
- tanstack-router - 带有内置缓存的型号安全路由器( I) URL 国家管理
服务器的软件
Section titled “服务器的软件”通过网络同步获取的组件属性
- react-refetch - 一种简单、可声明和可比较的方法,用于获取数据 React 组件。
- redux-connect - 提供解析 Aync 道具的装饰器 react- 卢特
- axios-react - HTTP 客户端组件 React.
与服务器的通信
Section titled “与服务器的通信”- apollo-client - 一个简单的缓存客户端,用于任何 GraphQL 服务器和 UI 框架。
- react-relay - 中继是一个 JavaScript 数据驱动框架 React 应用。
- query - docs 强大的同步状态管理、服务器状态公用事业和为TS/JS采集数据, React,固态,斯维尔特和 Vue.
CSS 样式
Section titled “CSS 样式”- aesthetic - 一个强大的类型安全,框架不可知论, CSS- 在 JS 库中用于样式组件, 无论是普通对象, 导入样式表, 还是简单地引用外部类名 。
- aphrodite - 它的QQ39;是内在风格,但它们工作!
- inline-style-prefixer - 内置样式对象的运行时自动前置器。
- @classmatejs/react - 一个类名聚焦组件构建器,其语法类似风格组件和cva变体的糖.
- react-container-query - 模块响应组件.
- react-responsive - 媒体查询 react 响应 design.
- reactponsive - 应变元和钩.
- styled-components - 构件时代的视觉原始人.
- stitches - CSS-JS有近零的运行时间,SSR,多变的支持.
HTML 模板
Section titled “HTML 模板”- jsx-control-statements - 如果和为 React 联合来文十。
- hypernova - 服务器端渲染您的服务 JavaScript 视图。
- isomorphic-style-loader - 异态 CSS Webpack 的样式加载器。
- react-server - React 框架,其中服务器渲染用于快速的页面负荷。
- rill - 通用网络应用框架.
- webpack-isomorphic-tools - 用于您 Webpack 构建的应用程序的服务器端渲染(例如. React).
脚手架/ 启动套件 / Yeoman 生成器 / 堆叠组合 / 种子
- create-react-app - 创建 React 没有构建配置的应用程序 。
- crisp-react - 快速整合 TypeScript 支持多个SPA和避免陷阱。
- cra-template-redux-auth-starter - 页:1 Redux CRA的启动器锅炉板
- electron-react-boilerplate - 在桌面app上实时编辑开发.
- elegant - docs - demo - 很简单 React 快速构建美丽和表现的网络应用程序的框架 Next.js, Tailwind CSS,以及 Markdown 装填。
- extensive-react-boilerplate - 与 Next.js, Auth(签名、签名、重置密码、确认电子邮件、刷新托肯), Material UI, React 钩形 I18N,文件上传(支持本地和亚马逊S3驱动程序),Tests,CI.
- generator-starhackit - 装满的启动器
- nwb - CLI 工具和依赖性 React 应用 & amp; 组件和 npm 模块。
- nx - 下一代构建系统,拥有一流的单雷波支持和强大的集成.
- PBandJ - 0-Config 重用组件框架.
- react-hot-boilerplate - 最小的活版锅炉板给你的下一个 ReactJS 项目。
- rockpack - 创建的简单解决方案 React 在5分钟内进行测试。
- create-react-dependency - 创建 react 没有构建配置的依赖性 。
- phoenix - 一个简单的锅炉板 帮助你做你的 react 与服务器侧面渲染和本地化支持的应用程序。
- react-enterprise-starter-kit - 高度可伸缩性与表演性 真棒 React 用于企业应用程序的启动器 Kit,它有一个非常容易维护的代码库.
- Tailwindadmin - 免费Shadcn Dashboard 模板构建于 React 和 Tailwind CSS 包含多个框架支持
- react-inlinesvg - SVG 装载器组件 ReactJS.
- react-godfather - 一个新的写功能组件的方法,没有胡克.
- react-vvm - MVVM的新方法 React,以强制清洁地分离关切,减少锅炉板,以及自动重新调整优化可伸缩性 UI 逻辑
- react-call - 打电话给你 React 组件。
- redux-auth-patch - 完整代号认证系统 react + redux 支持异态渲染。
- redux-search - Redux 绑定客户端搜索。
- tcomb-react - PropTypes的替代语法.
- react-universal-hooks - : tada: 支持 react 到处都是钩子(功能或类组件).
- qrcode.react - 用于 < QRCode/ > 组件 React.
<qr-code>– A no-dependencies, customizable, animate-able, SVG-based<qr-code>element.- react-children-utilities - 扩展功率 React孩子们
- react-media - 页:1 CSS 媒体查询组件 React.
- react-middle-ellipsis - demo - 中间断断长弦而不是尾声
- react-translate-component - 多语种/本地化文本内容.
国际化/L10n/本地化/翻译 .
- react-i18next - 国际化 react 做得对 使用 i18next i18n 生态系统。
- react-intl - 国际化 React 应用程序。
- react-localized - 国际化 React 基于
gettext格式。 - react-translate-maker - 普遍国际化i18n开源库 React.
- react-intl-universal - demo 国际化 React 应用程序。 不仅如此 React同时也是Vanilla JS的成员。
- @tolgee/react - docs - 基于网络的本地化工具,使用户能够直接在互联网上翻译 React 他们开发的应用程序
- js-lingui - docs - 可读、自动化和优化的(5kb)国际化 JavaScript.
框架约束/整合
Section titled “框架约束/整合”- backbone-react-component - 一点薄胶,可以自动插入你的背骨模型.
- elm-react-component - 页:1 React 将 Elm 模块装入 React 应用。
- gl-react - OpenGL / WebGL 绑定 React 在图像和内容上执行复杂的效果。
- react-backbone - 后骨意识混合器 react 还有很多
- react-d3-library - 用于使用 D3 的开源库 React.
- react-elm-components - 写入 React (原始内容存档于2019-06-31). Parties in Elm.
- react-famous - React 桥到Famo.us。
- react-localstorage - Facebook%%%39的简单组件本地存储执行;s React.
- react-lottie-player - demo - 宣布乐天动画播放器。
- react-on-rails - 一体化 React + Webpack + Rails 用于构建通用(Isomorphic)Apps.
- react-three-renderer - 使用 3.j 画布 React.
- react-threejs - 最简单的绑定 React 3.js (T) (T)
- reactfire - ReactJS 混合以方便火基地集成。
- reactive-elements - 允许使用 React.js 组件为 HTML 元素(网络组件)。
- react-unity-webgl - 利用内置事件系统与双向通信进行统一互通.
与第三方服务一体化
Section titled “与第三方服务一体化”- react-ga - React 谷歌分析模块.
- react-google-analytics - 谷歌分析组件.
- react-google-autocomplete - Google Places API组件和钩子.
- react-recaptcha - 页:1 react.js (原始内容存档于2018-09-21). ReCAPTCHA for Google.
- react-stripe-checkout - 装入条纹QQQ39;s 取出.js 作为 a react 组件。 最方便使用退出的方法 React.
- redux-segment - 组合分析 redux.
- react-slack-notification - 直接向Slack频道发送消息和错误日志.
- react-firebase-hooks - 钩子将火基地整合到您的应用程序中。
- inferno - 一个极快的, React- 喜欢 JavaScript 用于构建现代用户界面的库。
- react-fastclick - 快速触摸活动 React.
- react-static-container - 有效渲染静态内容.
- react-perf-tool - 调试您的性能 React 应用。
- react-render-visualizer - 透视器 ReactJS.
- react-infinite-grid - 页:1 React 构成元素网格的组件。
- react-infinite - 基于UITableView的浏览器准备高效滚动容器.
- react-lazy-load - React 使儿童进入景点时成为元素的组件。
- react-lazyload - 懒装你的组件,图像或任何东西 都很重要的性能。
- react-virtualized - React 用于有效提供大清单和表格式数据的组件。
应用程序大小
Section titled “应用程序大小”- babel-plugin-transform-react-remove-prop-types - 删除不必要的 React 丙丁类
- react-lite - 执行 React 用于小脚本大小的优化。
服务器系统渲染
Section titled “服务器系统渲染”- iSSR - 最容易移动你的方式 React 应用到 Server-Side 渲染 。 处理侧面效果并同步状态 。
- react-esi - 一个通过曝光来提升SSD性能的库 React 作为边边的组件包括(ESI)碎片
Dev 工具
Section titled “Dev 工具”- enzyme - JavaScript 测试公用事业 React.
- jest-cli - 无痛 JavaScript 测试
- react-unit - 轻量级单元测试库 ReactJS.
- redux-test-recorder - 页:1 redux 通过中间软件自动生成还原器测试 ui 互动。
- rut - React 测试变得简单
react-test-renderer支持 DOM 和定制的制造者。 - unexpected-react - 用于测试全数的意外插件 React 虚拟 DOM和浅的渲染器。
- playwright enables reliable end-to-end testing for modern web apps.
- redux-devtools-chart-monitor - 图表显示器 Redux 德弗图斯.
- redux-devtools-dock-monitor - 大型可移动码头 Redux DevTools 监视器。
- redux-devtools-filterable-log-monitor - 可过滤树视图显示器 Redux 德弗图斯.
- redux-devtools-inspector - 又一个 Redux DevTools 监视器.
- redux-devtools-log-monitor - 默认显示器 Redux 带树景的DevTools.
- redux-devtools - 用于 Redux 带有热重装、动作重放和自定义 UI.
- remote-redux-devtools - Redux DevTools远程。
- fluxguard - PROD 变革监测 DOM + design 变化。
- react-inspector - 浏览器 DevTools 检查器在您内部的力量 React 应用
- reactotron - 检查您的 CLI 和 OS X 应用程序 React JS和 React Native 应用程序。
- Tail Lens - Tailwind 浏览器中的编辑器 : 检查,编辑,预览,复制.
- component-controls - demo - docs - 下一代工具,以创建快速文件网站。
- cosmos-js - DX 用于真正封装的设计工具 React 组件。
- react-demo-tab-cli - 用于创建演示的 CLI 工具 react 组件。
- react-styleguidist - React 样式引导生成器。
- standard-react - JavaScript 标准样式指南.
- Plasmic - 强大 design 用于构建您的工具 React 图像组件。
- SimpleLocalize - 用于查找的开源 CLI 工具 i18n 键在 React 项目。
- react-device-frameset - React 设备帧集组件。
- DataFormsJS JSX Loader - 小点 JavaScript 在网页上直接将JSX转换为JS的快速编译器.
- html-to-react-components - 摘录 HTML 输入 React 作为单独的模块。
- htmltojsx - 自动 AJAXify 平原 HTML 拥有权力 React这是魔法!
- jsonx - React JSON语法.
- mozaik - Mozaïk是一个基于节点/的工具. react /d3 /stylus来方便地制造美丽的仪表板.
- react-blessed - 页:1 react 造物主赐福。
- jsondiffpatch-react - JSON diffing. (英语).
- iron-session - 安全、无国籍和基于饼干的会话库。
静态网站生成器
Section titled “静态网站生成器”- gatsby - 使用 React.js.
- BCMS - 基于API,开源,可自我托管的内容管理系统用于Gatsby,Nuxt和Next.
- crisp-bigquery - 将 Google 大查询与 Express 完全堆栈 TypeScript.
- react-server-routing-example - 通用客户端/服务器路由和数据与AWS DynamoDB.
HagiCode
HagiCode 是面向项目开发的 AI 编码工作台:丰富、便捷的界面交互让规划、Agent 执行与项目工作更容易上手和跟进,带来更投入的开发体验。
丰富、便捷的界面交互,让规划、Agent 执行与项目工作更容易上手和跟进。
- 智能OpenSpec 工作流把意图转化为从提案、设计、任务到交付的可执行路径。
- 高效多 Agent 并行推进调研、实现与审阅,并支持多仓库变更和你熟悉的 Agent CLI。
- 有趣丰富、便捷的界面交互让规划、Agent 执行与项目工作更容易上手和跟进,带来更投入的开发体验。
下载 Windows 版
分享 HagiCode
让想法变成真正交付的软件。
HagiCode 是面向项目开发的 AI 编码工作台:用 OpenSpec 工作流规划变更,多 Agent 并行执行,再由 Hero Scenario 让进度一目了然,把想法变成真正交付的软件。
- 智能
- OpenSpec 工作流把意图变成从提案到交付的可执行路径。
- 高效
- 多 Agent 并行推进调研、实现与审阅。
- 有趣
- 丰富、便捷的界面交互,让规划、Agent 执行和项目工作更容易跟进。
© 2026 HagiCode | Powered By hagilight-starlight@0.21.0 | Branch: main | Commit: 745b50b | Built:

