新手上路
前天 08:27
主楼
UI 组件
可编辑数据网格/电子表格
- AG Grid- 支持 JavaScript / React / AngularJS / Web Components 的高级数据网格/数据表。
- fortune-sheet- 一个在线电子表格组件,提供类似 Excel 的现成功能。
- gigatables-react- 排序、分页/无限滚动、全局/列搜索、AJAX CRUD 等。
- Handsontable- 带有类似电子表格 UI 的数据网格,支持 React、Angular、TypeScript 和 JavaScript。
- jqwidgets-react-grid- 过滤、分页、分组、导出到 Excel、PDF、CRUD 等。
- MUI X Data grid- 快速可定制的数据网格,具有高级功能,适用于高级用户和复杂用例。
- react-data-grid- 类 Excel 的网格。
- ReactGrid- 为您的应用添加类似电子表格的行为
- revo-grid- 用于 React / AngularJS / Vue / Web Components 的强大数据网格,具有高级定制功能。
- SheetXL– 高性能电子表格网格。TypeScript, ESM, Node/浏览器, Excel 兼容函数。
- SVAR React DataGrid- 支持单元格内编辑、树形数据、上下文菜单、虚拟滚动等功能的 React DataGrid。
表格
- ka-table- 可定制的表格组件,支持排序、筛选、分组、虚拟化、编辑等功能。
- mantine-datatable- Mantine UI 应用程序的轻量级表格组件,具有大量功能。
- material-table- 基于 Material UI 构建,支持:分组、树形数据、可展开行、导出、行内编辑
- mui-datatables- 基于 Material UI 构建。支持搜索、样式定制、筛选、列的调整/隐藏、导出、打印、行选择/展开。
- react-data-table- 可访问、响应式、主题化、声明式配置的表格,支持排序、可选行、可展开行、分页
- TanStack Table- 用于构建强大表格和 datagrids 的 Headless UI
- react-table-library- React Table Library -- 一个近乎无头部的表格库 -- 用于构建更好的表格。
- rsuite-table- 支持虚拟化的表格组件。
- DevExtreme React Grid- 高性能的插件式数据网格,适用于 Bootstrap 和 Material Design。
- Smart React Grid- 快速且功能完备的 Material Design 数据网格。
- simple-table- 轻量级、快速且功能丰富。支持排序/筛选、虚拟化、树形数据、嵌套表头、固定列、自定义样式等。
- KendoReact Grid- 功能强大的数据网格组件,提供 100 多项即用型功能,如分页、排序、导出到 Excel 等。
- Material-React-Table- TanStack React Table V8 的 Material UI V5 完整实现,完全使用 TypeScript 编写。
无限滚动
- @egjs/react-infinitegrid- npm - 一个用于根据各种布局类型无限排列卡片元素的模块。
- react-lazyload- 在性能重要的地方懒加载你的组件、图片或其他任何内容。
- react-list- 一个通用的无限滚动 React 组件。
- @af-utils/virtual- 渲染大型可滚动列表和网格。
- react-window- 用于高效渲染大型列表和表格数据的 React 组件
- virtua- 一个零配置、快速且体积小(~3kB)的虚拟列表组件,适用于 React、Vue 和 Solid。
叠加层
显示叠加层 / 模态框 / 警报 / 对话框 / 弹出灯箱 / 弹窗- react-aria-modal- 一个完全可访问且灵活的 React 弹窗,遵循 WAI-ARIA 编写实践。
- react-modal- React 的可访问弹窗对话框组件。
- @paratco/async-modal- React 的简单异步弹窗处理器。
- reoverlay- 管理弹窗的缺失解决方案。
- sweetalert2- 一个美观、响应式、高度可定制且支持无障碍(WAI-ARIA)的 JavaScript 弹出框替代方案。零依赖。
- sweetalert2-react-content- 官方 SweetAlert2 增强器,支持将 React 元素作为内容
通知
Toaster / snackbar — 使用无模式的临时小弹出框通知用户- react-notifications-component- 高度可定制且易于使用的通知组件。
- notistack- 高度可定制的通知小面板(吐司),可以相互堆叠。
- react-local-toast- 显示与特定组件相关联的反馈,而不是全局吐司。
- react-toast- 简约的吐司通知。
- 🚀 react-toastify- 目前最好的选择。支持 Hooks,不使用 refs。
- react-confirm-lite- 是一个轻量级的、基于 Promise 的 React 确认对话框,内置 Tailwind CSS 支持。它设计得和 react-toastify 一样简单易用,同时完全可定制。
- reapop- 一个 React & Redux 通知系统。
- react-hot-toast- React 的酷炫通知。轻量级、可定制,默认美观。
- Sonner- 一个为 React 设计的主观式提示组件。
Tooltip
- react-tooltip- React 提示组件。
菜单
菜单 / 侧边栏- hamburger-react- 用于 React 的动画汉堡菜单图标。
- react-burger-menu- 带有特效和样式的离屏侧边栏。
- react-offcanvas- React 的离屏菜单。
- react-planet- 创建类似行星的圆形菜单。
- mantine-contextmenu- 用于基于 Mantine UI 构建的应用程序的上下文菜单钩子/组件。
Sticky
固定头部/滚动到顶部头部/粘性元素- react-headroom- 在需要之前隐藏你的头部。
- react-stickynode- 一个高性能且全面的 React 粘性组件。
Tabs
- react-tabs- React 标签组件。
- react-tabtab- React,标签。
载入器
载入器 / 旋转器 / 进度条 — 让用户知道有内容正在加载- react-loader-spinner- 用于异步操作的 react-spinner 集合。
- react-redux-loading-bar- 用于 Redux 和 React 的简单载入条。
- react-spinners-css- 惊人的 React 旋转器组件集合。
- react-spinners- react 的一组加载动画组件。
- react-content-loader- 基于 SVG 的组件,可轻松创建占位符加载效果(如 Facebook 的卡片加载)。
验证码
- react-simple-captcha- npm - React Simple Captcha 是一个功能强大、高度可定制且易于使用的 React JS 验证码库。
- procaptcha- 注重隐私的免费 CAPTCHA
轮播图
- @egjs/react-flicking- npm - 这是一个可靠、灵活且可扩展的轮播图组件。
- react-awesome-slider- 全屏,3D 动画,60fps 媒体和内容滑块/轮播。
- pure-react-carousel- 从头开始构建,且不带有强烈的个人观点。
- react-id-swiper- 一个将 idangerous Swiper 作为 ReactJs 组件使用的库
- react-instagram-zoom-slider- 一个受 Instagram 启发的具有捏合缩放功能的滑块组件。
- react-responsive-carousel- React.js 响应式轮播图(支持滑动)。
- react-slick- React 轮播组件。
- keen-slider- 高性能轮播/滑块组件,支持原生触摸/滑动行为。
- swiper- 最现代的免费移动触摸滑块,具有硬件加速的过渡效果和出色的原生行为。
按钮
- react-awesome-button- 具有加载进度和社交分享操作的 3D 动画 60fps 按钮。
- reactive-button- 带有进度指示器的精美动画按钮组件。
折叠
- react-accessible-accordion- React 的可用性可折叠组件。
- react-collapse- 使用 react-motion 的折叠动画组件包装器。
- react-tabbordion- 用于创建可折叠组件和选项卡的通用、语义化和仅 CSS 组件。
图表
显示图表/图形/图表中的数据- essential js 2 charts- 为 react 提供美观且交互式的图表 & 图形。
- EazyChart- 轻松将数据转换为有意义的图表
- echarts for react- 美丽 Apache Echarts 的包装器
- jscharting-react– React 图表组件,提供完整的图表类型和引人入胜的数据可视化,使用JSCharting。
- react-chartist- Chartist.js 的 React 组件。
- react-charty- 小而强大的交互式数据可视化,具有多种图表类型、动画、缩放和主题功能。
- react-chartjs-2- 使用 Chart.js 2.0 的常见 React 图表组件。
- react-d3-components- React 的 D3 组件。
- react-google-charts- React-google-charts React 组件。
- react-highcharts- React-highcharts。
- react-sparklines- 美观且表达力强的 Sparklines React 组件。
- react-timeseries-charts- 声明式时间序列图表。
- react-vis- 基于 React 和 d3 的数据可视化库。
- recharts- 使用 React 和 D3 重新定义的图表库。
- rumble-charts- 用于构建可组合和灵活图表的 React 组件。
- victory- React 的数据可视化工具。
- semiotic- Semiotic 是一个用于 React 的数据可视化框架。
- SVAR React Gantt- 可定制、交互式甘特图组件。
- DevExtreme React Chart- 高性能的基于插件的图表,适用于 Bootstrap 和 Material Design。
- Smart React Chart- 功能完整的图表库。
- react-muze- muze的 React 封装(一个免费的数据可视化库,用于在浏览器中创建探索性数据可视化,使用 WebAssembly)
- Flowchart React- React.js 的流程图和流程图设计器。
- react-dashboard- 同构仪表板。
命令面板
树
显示树形数据结构- json-edit-react- 高度可配置的 JSON/Object 树形查看器和编辑器
- react-arborist- 功能全面的树形视图:无头模式、虚拟化、多选、拖放、键盘导航、搜索
- react-complex-tree- 中立的可访问树形组件,支持多选、拖放和搜索
- he-tree-react- 树形控件,可定制 UI,扁平数据,树形数据,拖拽排序,放置占位符,可折叠,复选框,虚拟化。
UI 导航
视图导航方式- react-scroll- React 滚动组件。
- react-swipeable-views- 一个用于绑定标签和可滑动视图的 React 组件。
自定义滚动条
- rc-scrollbars- 具备 flex 选项和 60FPS 的可自定义滚动条
- react-custom-scroll- 通过原生操作系统滚动行为轻松自定义浏览器滚动条。
- react-shadow-scroll- 当存在滚动时,自定义图片并插入阴影的组件。
音频/视频
- react-dailymotion- 用于 React 的 Dailymotion 播放器组件。
- react-player- 用于播放多种 URL 的 React 组件,包括 YouTube。
- react-soundplayer- 使用 React 创建自定义 SoundCloud 播放器。
- react-youtube- 基于 React.js 的 YouTube 播放器组件。
- video-react- 使用 React 库为 HTML5 世界构建的 Web 视频播放器。
- material-ui-audio-player- material ui 设计的音频播放器。
- react-vision-camera- 基于 getUserMedia 的 React 摄像头组件。我们可以使用此组件进行计算机视觉任务,如条形码扫描、文本识别等。
- react-barcode-qrcode-scanner- React 条形码和二维码扫描组件。它使用 react-vision-camera 访问摄像头,并使用 Dynamsoft Barcode Reader 读取条形码。
地图
- google-map-react- 通用谷歌地图 React 组件,允许在谷歌地图上渲染 React 组件。
- mapkit- 使用 MapKit JS 集成 Apple Maps 的库,支持标注、覆盖层和搜索。
- pigeon-maps- 无需外部依赖的 ReactJS 地图。
- react-geosuggest- 基于 Google Maps Places API 的 React 自动建议组件。
- react-leaflet- 用于 Leaflet 地图的 React 组件。
- react-map-gl- MapboxGL-js 和叠加 API 的 React 封装。
- react-svg-map- 一套用于显示交互式 SVG 地图的组件。
时间 / 日期 / 年龄
Display time / date / age- react-timeago- 一个简单的 ReactJs 时间组件。
- timeago-react- 使用时间 ago 语句格式化日期。例如:'3 小时前'。
- react-google-flight-datepicker- 使用 ReactJS 实现的 Google 航班日期选择器。
照片 / 图片
显示图片/照片- lightGallery- 功能全面的 lightbox 画廊组件。
- react-compare-image- 使用滑块比较两张图片的 React 组件。
- react-image-gallery- 响应式图片画廊、轮播、图片滑块 React 组件。
- yet-another-react-lightbox- React lightbox 组件。
- react-intense- 一个用于近距离查看大图的 React 组件。
- react-photo-album- 响应式 React 照片画廊。
- react-svg-pan-zoom- 一个为 SVG 添加平移和缩放功能的 React 组件。
- react-particle-image- 将图像渲染为交互式粒子。
- react-imgix- 快速、响应式地添加图片作为图像、图片或背景!
- @frameright/react-image-display-control- 为智能响应式图片定义缩放区域。
- zoom-image- 一个小巧但功能强大的、与框架无关的库,用于在网页上缩放图片。
- react-infinite-gallery– 用于 React 应用的无限滚动图片画廊组件。
图标
显示图标 / 图标集 / 表情符号_- iconify-react- 超过 40k 个图标,来自 50 多个图标集,包括所有流行的图标和表情符号集。
- react-icons- 使用 ES6 导入的流行图标包的 SVG React 图标。
- react-open-doodles- 令人惊叹的免费插图,可作为 React 组件使用。
- react-icomoon- 使用 react-icomoon,您可以轻松使用在 icomoon 中选择或创建的图标。
- tabler-icons-react- 一套超过 450 个免费 MIT 许可的高质量 SVG 图标。
- Lucide- 由社区制作的精美且一致的图标工具包。开源项目,Feather Icons 的分支。
分页器
显示用于分页的控制元素- react-paginate- 一个创建分页的 ReactJS 组件。
- react-laravel-paginex- 可定制的 Laravel 分页组件(基于 ReactJS)。
- paginated- React render props & custom hook to build pagination.
- react-steps- Responsive React Stepper.
Markdown Viewer
Display parsed markdown source- react-markdown- 将 Markdown 渲染为 React 组件。
Canvas
使用 Canvas 或 SVG 绘制草图输入- react-konva- React Konva 是一个 JavaScript 库,用于使用 Konva 框架绑定绘制复杂的 canvas 图形。
- react-sketch- 基于 React 应用的 Sketch 工具,由 FabricJS 支持
- react-sketch-canvas- 使用 SVG 作为画布的 React 自由手绘矢量绘图工具。接受鼠标、触摸和图形数位板的输入
- react-heat-map- 基于 SVG 构建的轻量级日历热力图 React 组件,GitHub 贡献图的定制版本。
截图
- html2canvas- 使用 Javascript 对网页的任何部分进行截图。
其他
- puck- React 的自托管可视化编辑器
- react-advanced-news-ticker- 一个灵活且带动画效果的垂直新闻滚动组件
- react-avatar-generator- 允许用户创建随机的万花筒,用作头像。
- react-awesome-query-builder- 基于表单字段的可视化查询构建器,支持 SQL、MongoDB 和 JSON 导出
- react-blur- 用于模糊背景的 React 组件。
- react-demo-tab- 一个 React 组件,可轻松创建其他组件的演示。
- fastcomments-react- FastComments 组件,用于在页面或 SPA 中嵌入实时评论线程。
- react-pdf-viewer- 用于查看 PDF 文档的 React 组件。
- react-simple-chatbot- 用于创建对话聊天的简单聊天机器人组件。
- react-file-reader-input- 用于文件读取控制、样式和抽象的文件输入组件。
- react-filter-control- 用于在 UI 中构建筛选标准的 React 筛选器组件。
- react-headings- 自动递增您的 HTML 标题(h1、h2 等),以提高可访问性和 SEO,无论您的组件结构如何,同时您完全控制渲染内容。
- react-joyride- 为您的 ReactJS 应用创建向导和引导式游览。现在支持独立的工具提示!
- react-mouse-select- 允许通过移动鼠标选择 DOM 元素的组件。
- react-resizable-and-movable- React 的可调整大小和可移动组件。
- react-resizable-box- React 的可调整大小组件。 #reactjs。
- react-searchbox-awesome- 极简主义搜索框。
- react-split-pane- React 分割面板组件。
- react-swipe-to-delete-ios- 以 iOS 的方式删除列表中的项目。
- react-swipeable-list- 可配置的组件,用于渲染带有可滑动项目的列表。
- typography- 用于构建具有精美排版网站的强大工具包。
- react-pulse-text- 允许您为另一个组件的任何属性动画化文本。
- captcha-image- 允许您生成随机验证码图片,并提供选项。
- react-pdf- 让您在 React 应用中轻松显示 PDF 文件,就像显示图片一样简单。
- react-customizable-chat-bot- 在几分钟内构建符合您品牌需求的聊天机器人。
- @restpace/schema-form- 从 JSON Schema 自动轻松构建复杂表单。
- react-darkreader- 一个受 darkreader 启发的 React Hook,用于为您的网站添加暗黑/夜间模式。
- react-apple-signin-auth- 使用官方 Apple JS SDK 为 React 提供的 Apple 登录。
- react-mrz-scanner- 一个 React 组件,用于扫描护照、签证卡等上的 MRZ。它基于 Dynamsoft 标签识别器。
表单组件
让用户输入数据日期/时间选择器
日期选择器 / 时间选择器 / 日期时间选择器 / 日期范围选择器- date-range-picker- 一个支持日期、范围和范围选择的日历组件。
- react-big-calendar- 类似 Gcal/outlook 的日历组件。
- react-datepicker- React 的简单且可复用的日期选择器组件。
- react-day-picker- React 的灵活日期选择器。
- react-flatpickr- React 的 Flatpickr 组件。
- react-simple-timefield- 简单的时间输入字段。
- react-timezone-select- 动态、简洁的时区选择。基于 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- 一个基于 React 的 Emoji 选择器,由 Interweave 和 Emojibase 支持。
输入类型
掩码输入,特殊输入;电子邮件 / 电话号码 / 信用卡 / 等.- react-credit-cards- 为您的支付表单提供美观的信用卡。
- react-payment-inputs- 一个零依赖的容器,用于帮助处理支付卡输入字段。
- react-input-mask- 另一个用于输入掩码的 react 组件。
- @lunasec/react-sdk- 安全、加固的表单组件,可自动加密/令牌化所有数据。
- react-numpad- 可扩展的数字键盘控件,用于数字、日期和时间。
- react-multi-email- 随着用户输入,格式化多个电子邮件。
自动补全
自动建议 / 自动补全 / 前缀补全- react-autosuggest- 符合 WAI-ARIA 标准的 React 自动建议组件。
- react-typeahead- 基于纯 React 的 typeahead 和 typeahead-tokenizer。
Select
- react-aria-menubutton- 一个完全可访问、易于主题化、由 React 驱动的菜单按钮。
- react-functional-select- 微型尺寸和微优化的 React.js 选择组件。
- react-mobile-picker- 一个类似 iOS 的选择框组件。
- react-select- 一个用 React JS 构建的选择控件。
- react-column-select- 一个为 react 构建的列选择组件。
- react-select-search- 一个轻量级的选择组件,适用于 React。
颜色选择器
- coloreact- 一个用于 React 的微小颜色选择器。
- react-color- 一个用于 React 应用的微小颜色选择器组件。
- react-colorful- 一个微小(2.5 KB)、无依赖、快速且可访问的颜色选择器组件。
- react-input-color- 带有 HSV 颜色选择器的 React 输入颜色组件。
切换
- @anatoliygatt/heart-switch- 一个完全可定制且可访问的心形切换开关组件。
- 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 的 Tokeninput 组件。
- tagify- demo & docs - 轻量级、高效的标签输入组件。
自动尺寸输入 / 文本区域
- react-input-autosize- React 的自动调整尺寸输入字段。
- react-autowidth-input- 基于 hooks 构建的高度可配置和可扩展的自动尺寸输入字段。
- react-textarea-autosize- 用于 React 的 <textarea /> 组件,可根据内容增长。
星级评分
- react-rating- 零依赖、高度可定制的评分组件。
- react-awesome-stars-rating- 具有可访问性的星级评分组件。
- react-star-rating-input- 用于输入 0-5(或更多)星级的 React.js 组件。
拖放
- react-beautiful-dnd- React 中的美观且可访问的列表拖放组件。
- react-dnd- React 的拖放功能。
- react-drag-sizing- "拖动以调整大小"(调整大小)作为 React 组件。
- react-draggable- React 可拖动组件。
- react-dragula- 拖放如此简单以至于令人痛苦。
- react-dropzone- 基于 React.js 的简单 HTML5 拖放区域。
- react-movable- 可访问且极简(压缩后小于 4KB)的库,用于列表和表格中的垂直拖放。
- react-sortable-pane- React 的排序和可调整大小面板组件。
- neodrag- 用于拖动的多框架库。选择你的框架,拖动 API 行为将保持一致。
可排序列表
让用户在列表上定义一个顺序- react-anything-sortable- 支持触摸操作和 IE8 兼容性的任意子元素排序。
- sortablejs- 可通过拖放重新排序的列表,包括列表内部和列表之间。
富文本编辑器
- alloyeditor- 基于 CKEditor 的所见即所得编辑器,UI 完全重写。
- ckeditor4-react- 一个官方的 CKEditor 4 富文本编辑器封装。
- ckeditor5-react- 一个官方的 CKEditor 5 富文本编辑器包装器。
- edtr-io- 支持插件的所见即所得在线网页编辑器。
- megadraft- 基于 draft.js 构建的富文本编辑器。
- react-ace- Ace(高级代码编辑器)包装器。
- react-codemirror- React 的 CodeMirror 组件。
- react-contenteditable- 可编辑内容的 React 组件。
- react-draft-wysiwyg- 基于 DraftJS 构建的所见即所得编辑器。
- react-editor- 可插入图片和 HTML 的简单富文本编辑器。
- react-medium-editor- medium-editor 封装。
- react-monacoeditor- React 的 Monaco Editor 组件。
- react-simple-code-editor- 简单无额外功能的代码编辑器,支持语法高亮。
- react-quill- Quill 封装。
- react-trumbowyg- Trumbowyg封装。
- remirror- React 的 ProseMirror 工具包。
- slate- 完全可定制的富文本编辑器构建框架。
- smartblock- 基于 ProseMirror 的基于块的所见即所得编辑器。
- tiptap- Web 工匠的无头编辑器框架。
Markdown Editor
- react-simplemde-editor- EasyMDE(最新 SimpleMDE 分支)的 React 组件封装。
- react-markdown-editor- 使用 React/Reflux 的 Markdown 编辑器。
- react-md-editor- 带预览功能的简单 Markdown 编辑器,使用 React.js 和 TypeScript 实现。
图像编辑
图像处理- react-avatar-editor- 类 Facebook 的,头像/个人照片组件。
- react-avatar-generator- 为用户头像生成有趣的万花筒效果。
- react-easy-crop- 用于通过简单交互裁剪/旋转图片/视频的组件。支持触摸操作。
- react-image-crop- React 的响应式图片裁剪工具。
- react-image-cropper- 图片裁剪器。
- react-advanced-cropper- 用于创建符合您网站设计的裁剪器的 React 裁剪库。
- react-mobile-cropper- 一个高度受流行 Android 裁剪工具启发的即用型图片裁剪库。基于 react-advanced-cropper。
表单组件集合
- formsy-material-ui- Material UI 表单组件的 Formsy 兼容包装器。
- formsy-react-components- 用于 formsy-react 表单的一组 React JS 组件。
- react-input-enhancements- 一套用于输入控制的增强功能。
- react-widgets- 一套精制、可扩展且易于访问的输入控件。
其他
- @anatoliygatt/numeric-stepper- 一个完全可定制且易于访问的数字步进组件。
- interweave- 一个用于安全渲染 HTML、过滤属性、使用匹配器自动包装文本、渲染表情字符等功能的 React 库。
- react-designer- 易于配置、轻量级、可在 React 组件中编辑的矢量图形。
- react-upload-gallery- 用于上传图片画廊的 React 组件。支持拖放、排序、自定义。
语法高亮
- react-syntax-highlighter- 使用内联样式,基于 Prismjs 或 Highlightjs AST 的语法高亮组件。
UI 布局
用于布局应用程序 UI 的组件- autoresponsive-react- 自动响应式网格布局库。
- hedron- 一个简洁的 flexbox 网格系统,由 styled-components 驱动。
- m-react-splitters- TypeScript 编写的分割器组件。
- muuri-react- 响应式、可排序、可筛选和可拖动的网格布局。
- react-grid-layout- 一个具有响应式断点的可拖动和可调整大小的网格布局,适用于 React。
- react-layman- 动态瓦片布局管理器,带标签页
- react-masonry-component- @desandro 的 Masonry 封装器。
- react-reflex- 用于高级 React 网页应用的 Flex 布局容器组件。
- react-spaces- 可嵌套、可锚定、可调整大小、可滚动的组件。
- react-stonecutter- 动画网格布局组件。
- react-colrow- 响应式网格布局组件。基于 CSS flexbox。支持分数宽度、自动增长。
- react-schematic- 使用样式化的示意图构建响应式布局,无需任何主题配置的开销。
UI 动画
动画过渡- data-driven-motion- 轻松动画化你的数据。
- react-animatable- 使用 Web Animations API 的动画库。
- react-anime- 超级简单的动画库。
- react-flip-move- 使用 FLIP 技术在 DOM 变化之间(例如列表重新排序)实现轻松动画。
- react-gsap-enhancer- 结合 React 和 GSAP 的全部功能。
- react-tsparticles- 一个轻量级组件,用于轻松创建交互式粒子动画。
- react-motion- 一个弹簧,解决您的动画问题。
- react-mt-svg-lines- 用于在 SVG 中动画化线条笔画的包装器。
- react-router-transition- 为 react-router 构建的过渡效果,由 react-motion 提供支持。
- react-spring- 基于弹簧物理动画的动画库。
- react-ts-typewriter- 易于使用且可定制的打字机效果,适用于任何文本。
- framer-motion- 一个动画和手势库。
- react-spark-scroll- 用于 react 的基于滚动的动作和动画。
- react-track- 跟踪 DOM 元素的位置。创建酷炫的动画。
- react-transitive-number- 对数字字符串应用过渡效果,类似于旧的 Groupon 计时器。
- react-web-animation- Web Animations API 的 React 组件 -
- auto-size-transition- 一个根据内部子组件大小动态缩放的组件
- react-particles-bg- 粒子背景
- gooey-react- React 的 gooey 效果,用于形状 blobbing / metaballs。
- react-voodoo- demo/samples - 增量动画引擎,支持复杂的安卓/iOS 风格动画,SSR 渲染滑块,预测惯性,多点触控等
视差滚动
- simple-parallax-js- 使用 React 和 JavaScript 在图像上实现视差效果的简便方法
- react-parallax-tilt- 轻松为组件应用视差倾斜悬停效果
UI 框架
响应式
组件集 + 响应式布局系统_- ant-design- 来自中国的 UI 设计语言。提供独立的 组件。
- atlaskit- Atlassian 官方 UI 库,包含从 badge_ 到 _tree table 的组件。
- base web- Base Web 是一个用于启动、演进和统一网络产品的基石。
- carbon- 由 IBM 构建的设计系统。
- cdbreact- 用于构建移动优先、响应式网站和 Web 应用的优雅 UI 工具包库和可重用组件。
- chakra-ui- 用于 React 应用的简单、模块化且可访问的 UI 组件。
- ChatUI- 对话式 UI 的 UI 设计语言和 React 库。
- CoreUI for React- 开源 UI 组件库。
- evergreen- Segment 的 Evergreen React UI 框架。
- fluentui- 用于创建美观、跨平台应用程序的 UX 框架,可共享代码、设计和交互行为。
- gestalt- 支持 Pinterest 设计语言的组件集。
- grommet- 企业应用程序最先进的 UX 框架。
- kokonut-ui- 免费现代且可定制的 UI 组件。
- Mantine- 一个功能齐全的库,包含 100 多个钩子和组件,支持原生暗黑主题
- orbit- 用于构建旅游相关项目的组件
- flowbite-react- 基于 React、Tailwind CSS 和 Flowbite 的开源 UI 组件库
- primereact- 一个完整的 UI 框架,包含 50 多个组件,支持材料设计、Bootstrap 和自定义主题
- radix-ui- 用于构建高质量设计系统和 Web 应用的无样式、可访问组件。
- react-bootstrap- 使用 React 构建的 Bootstrap 组件。
- react-foundation- 基于 Foundation 的 React 组件。
- reakit- 用于构建可访问的丰富 Web 应用的工具包。
- searchkit- React UI 组件 / 小部件。使用 Elasticsearch 构建出色搜索体验的最简单方式。
- semantic-ui-react- 官方 Semantic-UI-React 集成。
- semi-design- 现代、全面、灵活的设计系统。
- shadcn/ui- 可以直接复制粘贴到您应用程序中的精美设计的组件。
- shineout- 中文友好的组件集:表单元素、导航、表格、树、树形选择下拉菜单等。
- Tremor- 用于构建图表和仪表板的开放源代码组件。
- untitled-ui-react- 使用 React Aria 和 Tailwind CSS 精心制作的组件集合。
Material Design
- 🚀 Material UI- 完整的组件套件。构建自己的设计系统,或从 Material Design 开始。
- 自动完成- 可访问的自动完成、组合框、多选功能
- Material Icons- 超过 1,000 个 SVG 材质图标。
- Modal- 可访问的模态对话框组件。
- Slider- 可访问的滑块组件。
- 表格- 带有排序、选择、分页和虚拟化的表格。
- 树形视图- React 的可用树形视图组件。
- react-essence- Essence - 基础材料设计框架。
- react-materialize- React 的材料设计,由 materializecss 提供支持。
- react-toolbox- 一套实现 Google Material Design 的 React 组件。
- mdbootstrap- React Bootstrap with Material Design
移动端
- antd-mobile- 来自中国的可配置移动 UI。
- Ionic React- Ionic Framework:使用单一代码库轻松构建 Android、桌面和渐进式 Web 应用。
- OnsenUI- 移动应用框架,支持 Material 和扁平(iOS)设计风格。基于 Web Components。
组件集合
- blueprint- 用于构建复杂、数据密集型桌面(非移动)应用程序的 UI 工具包。
- dataminr-react-components- 可重用的 React 组件和实用函数集合。
- shards-react- docs/demo - 一个美观且现代的 React 设计系统。免费增值。
- aframe-react- 使用 A-Frame 和 React 构建虚拟现实体验。
- react-admin- 在 REST 和 GraphQL 服务之上构建管理用户界面。
- refine- 瞬间构建数据密集型应用程序。它配备了 Ant Design System,一个企业级 UI 工具包。
- matrix-card- 生成矩阵雨风格卡片的最为简单的组件。
- rsuite- 用于“企业系统产品”的一套组件
- lens-ui- 一套专注于简洁的组件。
- Tailwindadmin- 一系列可直接集成到您的 React/Next.js 项目中的 ShadCN UI 组件集合。
UI 工具
报告器
报告计算后的样式可见性报告器
报告组件变为可见/隐藏时的情况- react-intersection-observer- Intersection Observer API 的 React 实现。
- react-visibility-sensor- 传感器组件。
- react-waypoint- 一个 React 组件,用于在滚动到元素时执行函数。
测量报告器
确定并报告元素的测量值- react-component-queries- 根据元素的宽度和/或高度为您的组件提供属性。
- react-container-dimensions- 检测元素调整大小的包装组件。
- react-dimensions- 用于获取容器尺寸的 React 高阶组件。
- react-height- 用于确定和报告子元素高度的组件包装器。
- react-measure- 计算 React 组件的测量值。
- react-sizeme- 使您的 React 组件感知其宽度和高度。
设备输入
将用户输入转换为操作键盘事件
- react-hotkeys- React 的声明式热键和焦点区域管理。
- react-key-handler- 用于处理键盘事件的 React 组件。
- react-keydown- React 组件的轻量级按键按下封装。
- react-shortcuts- 从一个地方管理键盘快捷键。
- useKeyCapture- 一个自定义钩子,用于简化目标/全局的按键监听器。
- react-keyboard-navigator- 一套 React 组件和钩子,通过键盘选择兄弟组件。
滚动事件
- react-scroll-components- 一套响应页面滚动的组件。
触摸滑动
- react-swipe- 将 Swipe.js 作为 React 组件使用。
鼠标事件
- react-hook-mighty-mouse- 追踪选定元素上鼠标事件的钩子。
Meta Tags
设置元标签,<title>,<head> 的子元素- react-helmet-async- React 16+及友好的线程安全 Helmet
- react-helmet- React 的文档头部管理器。
Portal
在任意的 DOM 节点渲染元素- react-layer-stack- 简单但普遍强大且无偏见的 React 层级系统。
- react-portal- 用于将模态框、灯箱、加载条等组件传输到 document.body 的 React 组件。
测试用户行为
A/B 测试,实验,...- react-experiments- 用于实现 UI 实验的 React 组件。
代码设计
辅助代码设计的库数据存储
数据流 / 数据管理 / 数据存储 / 组件状态 / 数据流- baobab-react- Baobab 的 React 集成。
- cerebral- 带有自带的调试器的状态控制器。
- effector-react- effector 的 React 绑定,一个高效的多存储状态管理器。
- 防火- 纯 JS,零依赖,CRDT 数据库 - 在浏览器中运行,并连接到任何云或后端
- RxDB- 一个为 JavaScript 应用程序设计的快速、本地优先、响应式数据库
- fluxible- 一个可插拔的容器,用于通用的 flux 应用程序。
- kea- React 应用的高层架构。
- react-i13n- 一种高效、可扩展和可插拔的方法,用于为您的 React 应用程序添加功能。
- react-redux- 官方 React Redux 绑定。
- redux-batched-actions- 一个 Reducer + 动作,用于将多个动作合并为单个订阅者通知。
- redux- 用于 JavaScript 应用的可预测状态容器。
- reselect- Redux 的选择器库。
- resourcerer- 用于 REST API 的声明式数据获取框架。
- synergies- 一个高性能的分布式上下文状态库,通过协同原子上下文片段来创建可重用的 React 状态逻辑。
- zustand- 一种基于简化 flux 原理的无冗余状态管理解决方案,提供无需模板的 hook API。
- teaful- 轻量级、易用且强大的 React 状态管理
表单逻辑
- data-driven-forms- 一种声明式构建具有所有功能的表单的方法。
- formik- 无痛构建表单,并轻松支持验证。
- formsy-react- React JS 的表单输入构建器和验证器。
- Phormal- 文档 & 演示 - 响应式、多语言的表单,内置验证,支持暗黑模式和从右到左的语言。
- react-hook-form- 无需烦恼的 React 表单验证钩子。
- react-jsonschema-form- 一个用于从 JSONSchema 构建 Web 表单的 React 组件。
- react-client-validation- React 的简单且超级轻量级的验证。
- react-final-form- 基于订阅的表单状态管理。
- react-formawesome- 用于创建强大表单的复杂库。
- surveyjs- 高级调查和表单库
- Formily- 高性能、可扩展且支持 TypeScript
- hook-form-react- 一种轻量级、无依赖的 React 表单验证解决方案。
路由
- react-router-component- React 的声明式路由组件。
- react-router-scroll- React Router 滚动管理。
- react-router- React 的完整路由库。
- redux-first-history- Redux First History - Redux 历史绑定支持 react-router - @reach/router - wouter
- universal-router- 一个适用于同构 JavaScript 网页应用的简单中间件式路由器。
- wouter- 一个极简主义友好的 ~1.3KB 路由库。除了钩子之外别无其他。
- tanstack-router- 带有内置缓存和 URL 状态管理的类型安全路由器
从服务器获取的属性
组件属性通过网络异步获取- react-refetch- 一种简单、声明式和可组合的方式,用于为 React 组件获取数据。
- redux-connect- 为 react-router 提供解决异步属性的装饰器。
- axios-react- React 的 HTTP 客户端组件。
与服务器通信
- apollo-client- 适用于任何 GraphQL 服务器和 UI 框架的简单缓存客户端。
- react-relay- Relay 是一个用于构建数据驱动型 React 应用的 JavaScript 框架。
- query- 强大的异步状态管理、服务器状态工具以及适用于 TS/JS、React、Solid、Svelte 和 Vue 的数据获取。
CSS / 样式
- aesthetic- 一个强大的类型安全、框架无关的 CSS-in-JS 库,用于组件样式化,无论是普通的对象、导入样式表,还是简单地引用外部类名。
- aphrodite- 它是内联样式,但它们是有效的!
- inline-style-prefixer- 内联样式对象的运行时 Autoprefixer。
- @classmatejs/react- 一个类似于 styled components 的语法,并结合了 cva 变体的糖的类名聚焦组件构建器。
- react-container-query- 模块化响应式组件。
- react-responsive- 用于响应式设计的 react 媒体查询。
- reactponsive- 响应式组件和钩子。
- styled-components- 组件时代的视觉基础元素。
- stitches- 零近运行时、SSR、多变量支持的 CSS-in-JS。
HTML 模板
- jsx-control-statements- React JSX 更整洁的 If 和 For 语句。
同构应用
- hypernova- 用于服务器端渲染您 JavaScript 视图的服务。
- isomorphic-style-loader- Webpack 的同构 CSS 样式加载器。
- react-server- 具备服务器渲染功能的 React 框架,页面加载速度极快。
- rill- 通用网络应用程序框架。
- webpack-isomorphic-tools- 为您的 Webpack 构建的 Web 应用程序提供服务器端渲染(例如 React)。
模板
脚手架 / 启动套件 / Yeoman 生成器 / 技术栈集合 / 种子- create-react-app- 无需构建配置即可创建 React 应用。
- crisp-react- 在 TypeScript 中实现 Express 集成,支持多个 SPAs 并避免常见陷阱。
- cra-template-redux-auth-starter- 为 CRA 准备的 Redux 认证启动模板。
- electron-react-boilerplate- 在桌面应用程序上进行实时编辑开发。
- elegant- 一个简单的 React 框架,用于使用 Next.js、Tailwind CSS 和 Markdown 加载快速构建美观且表达力强的 Web 应用程序。
- extensive-react-boilerplate- 带有 Next.js、认证(登录、注册、重置密码、确认电子邮件、刷新令牌)、Material UI、React Hook Form、I18N、文件上传(支持本地和 Amazon S3 驱动程序)、测试、CI 的模板。
- generator-starhackit- 全栈启动套件。
- nwb- React 应用程序和组件以及 npm 模块的 CLI 工具和 devDependency。
- nx- 新一代构建系统,具有一流的单一仓库支持以及强大的集成功能。
- PBandJ- 无需配置的可重用组件框架。
- react-hot-boilerplate- 为您的下一个 ReactJS 项目提供的最小化实时编辑模板。
- rockpack- 在 5 分钟内创建具有 SSR、打包、代码检查和测试的 React 应用的简单解决方案。
- create-react-dependency- 无需构建配置即可创建 React 依赖项。
- phoenix- 一个简单的模板,帮助您使用服务器端渲染和本地化支持制作 React 应用程序。
- react-enterprise-starter-kit- 高度可扩展且性能卓越的 React 企业级应用启动套件,具有非常易于维护的代码库。
- Tailwindadmin- 基于 React 和 Tailwind CSS 构建的免费 Shadcn 仪表板模板,支持多框架
其他
- react-inlinesvg- ReactJS 的 SVG 加载组件。
- react-godfather- 一种新的编写函数组件的方式,无需使用 Hooks。
- react-vvm- React 中的一种新的 MVVM 方法,以实现关注点分离,减少样板代码,并自动优化可扩展的 UI 逻辑。
- react-call- 调用你的 React 组件。
- redux-auth-patch- 为 react + redux 提供的完整 token 认证系统,支持同构渲染。
- redux-search- Redux 客户端搜索的绑定。
- tcomb-react- PropTypes 的替代语法。
- react-universal-hooks- :tada: 支持在所有地方使用 react hooks(函数组件或类组件)。
实用工具
- qrcode.react- 用于 React 的<QRCode/>组件。
- <qr-code>– 无依赖、可定制、可动画化、基于 SVG 的 <qr-code> 元素。
- react-children-utilities- React.Children 的扩展工具。
- react-media- React 的 CSS 媒体查询组件。
- react-middle-ellipsis- 在中间截断长字符串而不是在末尾。
- react-translate-component- 多语言/本地化文本内容。
i18n
国际化 / L10n / 本地化 / 翻译- react-i18next- 为 react 做出的正确国际化。使用 i18next i18n 生态系统。
- react-intl- 用于国际化 React 应用的库。
- react-localized- 基于 gettext 格式的 React 组件国际化库。
- react-translate-maker- 适用于 React 的通用国际化(i18n)开源库。
- react-intl-universal- 用于国际化 React 应用的库。不仅适用于 React.Component,也适用于纯 JavaScript。
- @tolgee/react- – 基于网络的本地化工具,允许用户直接在开发的 React 应用中翻译
- js-lingui- – 可读的、自动化的、优化的(5 kb)JavaScript 国际化。
框架绑定 / 集成
- 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 到 Famo.us 的桥梁。
- react-localstorage- Facebook 的 React 简单组件化 localstorage 实现。
- react-lottie-player- 声明式 lottie 动画播放器。
- react-on-rails- 集成 React + Webpack + Rails 构建 Universal(同构)应用。
- react-three-renderer- 使用 React 渲染到 three.js 画布。
- react-threejs- React 与 Three.js 之间最简单的绑定。
- reactfire- 用于轻松集成 Firebase 的 ReactJS 混合。
- reactive-elements- 允许将 React.js 组件用作 HTML 元素(Web 组件)。
- react-unity-webgl- 使用内置事件系统实现 Unity 的双向通信集成。
与第三方服务的集成
- react-ga- React Google Analytics 模块。
- react-google-analytics- Google 分析组件。
- react-google-autocomplete- Google Places API 组件和钩子。
- react-recaptcha- Google 的 react.js reCAPTCHA。
- react-stripe-checkout- 将 stripe 的 checkout.js 作为 React 组件加载。使用 React 进行结账的最简单方式。
- redux-segment- 用于 Redux 的 Segment.io 分析集成。
- react-slack-notification- 直接将消息和错误日志发送到 Slack 频道。
- react-firebase-hooks- 用于在您的应用程序中集成 Firebase 的钩子。
性能
UI
- inferno- 一个极其快速、类似 React 的 JavaScript 库,用于构建现代用户界面。
- react-fastclick- React 的快速触摸事件。
- react-static-container- 高效渲染静态内容。
检查
- react-perf-tool- 调试您的 React 应用性能。
- react-render-visualizer- ReactJS 的渲染可视化工具。
懒加载
- react-infinite-grid- 一个渲染元素网格的 React 组件。
- react-infinite- 基于 UITableView 的浏览器端高效滚动容器。
- react-lazy-load- 一个 React 组件,当子元素进入视口时渲染它们。
- react-lazyload- 懒加载您的组件、图片或任何影响性能的内容。
- react-virtualized- 用于高效渲染大型列表和表格数据的 React 组件。
应用大小
- babel-plugin-transform-react-remove-prop-types- 移除不必要的 React propTypes。
- react-lite- 一个针对小脚本大小进行优化的 React 实现。
服务器端渲染
开发工具
测试
- enzyme- 用于 React 的 JavaScript 测试工具
- jest-cli- 简单易用的 JavaScript 测试工具。
- react-unit- ReactJS 轻量级单元测试库。
- redux-test-recorder- 一个 Redux 中间件,通过 UI 交互自动生成 reducer 的测试。
- rut- 使用 react-test-renderer 使 React 测试变得简单。支持 DOM 和自定义渲染器。
- unexpected-react- 用于 unexpected 插件,以启用测试完整的 React 虚拟 DOM,以及浅渲染器。
- playwright支持现代 Web 应用的可靠端到端测试。
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 监控器。
- redux-devtools-log-monitor- Redux DevTools 的默认监控器,具有树形视图。
- redux-devtools- 用于 Redux 的 DevTools,支持热重载、操作回放和可定制 UI。
- remote-redux-devtools- 远程 Redux DevTools。
检查
- fluxguard- 监控生产环境变更,突出显示所有 DOM + 设计变更。
- react-inspector- 将浏览器开发者工具的强大功能直接集成到您的 React 应用中。
- reactotron- 一个用于检查您的 React JS 和 React Native 应用的 CLI 和 OS X 应用程序。
- Tail Lens- 浏览器中的 Tailwind 编辑器:检查、编辑、预览、复制。
杂项
- component-controls- 一个下一代工具,用于创建极速的文档网站。
- cosmos-js- 用于设计真正封装的 React 组件的 DX 工具。
- react-demo-tab-cli- 用于创建 React 组件演示的 CLI 工具。
- react-styleguidist- React 风格指南生成器。
- standard-react- JavaScript 标准风格指南。
- Plasmic- 用于可视化构建 React 组件的强大设计工具。
- SimpleLocalize- 用于在 React 项目中查找 i18n 键的开源 CLI 工具。
- react-device-frameset- React 设备框架组件。
杂项
- DataFormsJS JSX Loader- 小型 JavaScript 编译器,用于快速将 JSX 直接转换为 JS 在网页上。
- html-to-react-components- 将带注释的 HTML 部分提取为独立的 React 组件模块。
- htmltojsx- 使用 React 的强大功能自动 AJAX 化普通 HTML。它很神奇!
- jsonx- React JSON 语法。
- mozaik- Mozaïk 是一个基于 nodejs / react / d3 / stylus 的工具,可以轻松制作美观的仪表板。
- react-blessed- blessed 的 react 渲染器。
- jsondiffpatch-react- JSON 差异比较。
- iron-session- 安全、无状态、基于 cookie 的会话库。
静态网站生成器
- gatsby- 使用 React.js 将纯文本转换为动态博客和网站。
云解决方案
数据库
- BCMS- 基于 API 的开源、可自托管的 Gatsby、Nuxt 和 Next 的内容管理系统。
- crisp-bigquery- 使用 TypeScript 的完整栈 Google BigQuery。
- react-server-routing-example- 使用 AWS DynamoDB 的通用客户端/服务器路由和数据。