Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jaywcjlove/react-components-awesome

搜集优秀的 React 组件
https://github.com/jaywcjlove/react-components-awesome

List: react-components-awesome

component react react-component react-components reactjs

Last synced: 11 days ago
JSON representation

搜集优秀的 React 组件

Awesome Lists containing this project

README 

        
React Components Awesome

===



搜集优秀的 React 组件，通过创建 [issue](https://github.com/jaywcjlove/react-components-awesome/issues/new/choose) 自动创建 PR 提交合并。



### 表格



- [@fortune-sheet/react](https://npmjs.com/package/@fortune-sheet/react)  一个在线电子表格组件，提供与 Excel 一样的开箱即用功能 [![Open-Source Software][OSS Icon]](https://github.com/ruilisi/fortune-sheet)

- [@mui/material](https://npmjs.com/package/@mui/material)  快速且可自定义的数据网格，为高级用户和复杂用例提供高级功能 [![Open-Source Software][OSS Icon]](https://github.com/mui/mui-x)

- [@revolist/revogrid-react](https://npmjs.com/package/@revolist/revogrid-react)  具有高级定制功能的 React / AngularJS / Vue / Web 组件的强大数据网格 [![Open-Source Software][OSS Icon]](https://github.com/revolist/revogrid)

- [@silevis/reactgrid](https://npmjs.com/package/@silevis/reactgrid)  向您的应用添加类似电子表格的行为 [![Open-Source Software][OSS Icon]](https://github.com/silevis/reactgrid)

- [ag-grid-react](https://npmjs.com/package/ag-grid-react)  支持 Javascript/React/AngularJS/Web Components 的高级数据网格/数据表 [![Open-Source Software][OSS Icon]](https://github.com/ag-grid/ag-grid)

- [react-data-grid](https://npmjs.com/package/react-data-grid)  类似 Excel 的网格 [![Open-Source Software][OSS Icon]](https://github.com/adazzle/react-data-grid)

- [rsuite-table](https://npmjs.com/package/rsuite-table)  一个 React 表格组件 [![Open-Source Software][OSS Icon]](https://github.com/rsuite/rsuite-table)



### 无限滚动



- [@egjs/react-infinitegrid](https://npmjs.com/package/@egjs/react-infinitegrid)  用于根据各种布局类型无限排列包含内容的卡片元素的模块 [![Open-Source Software][OSS Icon]](https://github.com/naver/egjs-infinitegrid/blob/master/packages/react-infinitegrid)

- [react-lazyload](https://npmjs.com/package/react-lazyload)  延迟加载您的组件、图像或任何其他性能重要的东西 [![Open-Source Software][OSS Icon]](https://github.com/twobin/react-lazyload)

- [react-list](https://npmjs.com/package/react-list)  多功能无限滚动 React 组件 [![Open-Source Software][OSS Icon]](https://github.com/orgsync/react-list)

- [react-window](https://npmjs.com/package/react-window)  React 组件，用于高效呈现大型列表和表格数据 [![Open-Source Software][OSS Icon]](https://github.com/bvaughn/react-window)

- [virtua](https://npmjs.com/package/virtua)  简单、快速、小巧、灵活的虚拟滚动条 [![Open-Source Software][OSS Icon]](https://github.com/inokawa/virtua)



### 叠加



- [react-aria-modal](https://npmjs.com/package/react-aria-modal)  根据 WAI-ARIA 创作实践构建的完全可访问且灵活的 React 模式 [![Open-Source Software][OSS Icon]](https://github.com/davidtheclark/react-aria-modal)

- [react-modal](https://npmjs.com/package/react-modal)  React 的可访问模式对话框组件 [![Open-Source Software][OSS Icon]](https://github.com/reactjs/react-modal)

- [reoverlay](https://npmjs.com/package/reoverlay)  缺少管理模式的解决方案 [![Open-Source Software][OSS Icon]](https://github.com/hiradary/reoverlay)

- [sweetalert2](https://npmjs.com/package/sweetalert2)  一个美观、响应迅速、高度可定制和可访问的 (WAI-ARIA) 替代 JavaScript 的弹出框，零依赖 [![Open-Source Software][OSS Icon]](https://github.com/sweetalert2/sweetalert2)

- [sweetalert2-react-content](https://npmjs.com/package/sweetalert2-react-content)  官方 SweetAlert2 增强器添加了对 React 元素作为内容的支持 [![Open-Source Software][OSS Icon]](https://github.com/sweetalert2/sweetalert2-react-content)



### 通知



_用一个无模式的临时小弹出窗口通知用户_



- [react-notifications-component](https://npmjs.com/package/react-notifications-component)  高度可定制且易于使用的通知组件 [![Open-Source Software][OSS Icon]](https://github.com/teodosii/react-notifications-component)

- [notistack](https://npmjs.com/package/notistack)  高度可定制的通知快餐栏（吐司），可以相互堆叠 [![Open-Source Software][OSS Icon]](https://github.com/iamhosseindhv/notistack)

- [react-local-toast](https://npmjs.com/package/react-local-toast)  显示链接到特定组件的反馈而不是应用程序范围的 toasts [![Open-Source Software][OSS Icon]](https://github.com/OlegWock/react-local-toast)

- [react-toast](https://npmjs.com/package/react-toast)  最少的 toast 通知 [![Open-Source Software][OSS Icon]](https://github.com/moharnadreza/react-toast)

- [react-toastify](https://npmjs.com/package/react-toastify)  目前最好的选择 Hook 支持 [![Open-Source Software][OSS Icon]](https://github.com/fkhadra/react-toastify)

- [reapop](https://npmjs.com/package/reapop)  - React & Redux 通知系统 [![Open-Source Software][OSS Icon]](https://github.com/LouisBarranqueiro/reapop)

- [react-hot-toast](https://npmjs.com/package/react-hot-toast)  React 的吸烟热通知。默认情况下轻巧，可定制且美观 [![Open-Source Software][OSS Icon]](https://github.com/timolins/react-hot-toast)



### 工具提示



- [react-tooltip](https://npmjs.com/package/react-tooltip)  React 工具提示组件 [![Open-Source Software][OSS Icon]](https://github.com/wwayne/react-tooltip)



### 菜单



_Menus / sidebars_



- [hamburger-react](https://npmjs.com/package/hamburger-react)  React 的动画汉堡菜单图标 [![Open-Source Software][OSS Icon]](https://github.com/luukdv/hamburger-react)

- [react-burger-menu](https://npmjs.com/package/react-burger-menu)  具有效果和样式的非画布侧边栏 [![Open-Source Software][OSS Icon]](https://github.com/negomi/react-burger-menu)

- [react-offcanvas](https://npmjs.com/package/react-offcanvas)  React 的非画布菜单 [![Open-Source Software][OSS Icon]](https://github.com/vutran/react-offcanvas)

- [react-planet](https://npmjs.com/package/react-planet)  创建看起来像行星的圆形菜单 [![Open-Source Software][OSS Icon]](https://github.com/innFactory/react-planet)



### Sticky



### 选项卡



- [react-tabs](https://npmjs.com/package/react-tabs)  React 选项卡组件 [![Open-Source Software][OSS Icon]](https://github.com/reactjs/react-tabs)

- [react-tabtab](https://npmjs.com/package/react-tabtab)  React 选项卡 [![Open-Source Software][OSS Icon]](https://github.com/ctxhou/react-tabtab)



### 加载



- [react-loader-spinner](https://npmjs.com/package/react-loader-spinner)  用于 React 异步操作的旋转器集合集 [![Open-Source Software][OSS Icon]](https://github.com/mhnpd/react-loader-spinner)

- [react-spinners](https://npmjs.com/package/react-spinners)  用于 React 的加载旋转器组件的集合 [![Open-Source Software][OSS Icon]](https://github.com/davidhu2000/react-spinners)



### Carousel



- [swiper](https://npmjs.com/package/swiper)  大多数现代移动触摸滑块与硬件加速转换 [![Open-Source Software][OSS Icon]](https://github.com/nolimits4web/Swiper)

- [react-slick](https://npmjs.com/package/react-slick)  React 轮播组件 [![Open-Source Software][OSS Icon]](https://github.com/akiran/react-slick)

- [pure-react-carousel](https://npmjs.com/package/pure-react-carousel)  可以由用户组装来创建响应式且符合 aria 的轮播 [![Open-Source Software][OSS Icon]](https://github.com/express-labs/pure-react-carousel)



### 按钮



- [reactive-button](https://npmjs.com/package/reactive-button)  带有进度条的3D动画 react 按钮组件。 [![Open-Source Software][OSS Icon]](https://github.com/arifszn/reactive-button)

- [react-awesome-button](https://npmjs.com/package/react-awesome-button)  一个3D UI，进度，社交和分享功能，的按钮组件。 [![Open-Source Software][OSS Icon]](https://github.com/rcaferati/react-awesome-button)



### Collapse



- [keen-slider](https://npmjs.com/package/keen-slider)  HTML 触摸滑块轮播给您带来最原生的感觉。 [![Open-Source Software][OSS Icon]](https://github.com/rcbyr/keen-slider)



### 图表



- [frappe-charts](https://npmjs.com/package/frappe-charts)  简单、灵敏、现代的 SVG 图表，零依赖性 [![Open-Source Software][OSS Icon]](https://github.com/frappe/charts)

- [bizcharts](https://npmjs.com/package/bizcharts)  基于G2和 React 的强大数据可视化库  [![Open-Source Software][OSS Icon]](https://github.com/alibaba/BizCharts)

- [react-vis](https://npmjs.com/package/react-vis)  数据可视化组件 [![Open-Source Software][OSS Icon]](https://github.com/uber/react-vis)

- [@berryv/g2-react](https://npmjs.com/package/@berryv/g2-react)  @antv/g2 的轻量级 React 组件 [![Open-Source Software][OSS Icon]](https://github.com/pearmini/g2-react)

- [recharts](https://npmjs.com/package/recharts)  使用 React 和 D3 重新定义图表库 [![Open-Source Software][OSS Icon]](https://github.com/recharts/recharts/)

- [victory](https://npmjs.com/package/victory)  用于构建交互式数据可视化的可组合React组件集合 [![Open-Source Software][OSS Icon]](https://github.com/FormidableLabs/victory)

- [lightweight-charts](https://npmjs.com/package/lightweight-charts)  使用 HTML5 画布制作高效的财务图表(支持 React) [![Open-Source Software][OSS Icon]](https://github.com/tradingview/lightweight-charts)



### 命令面板



### 树



- [react-arborist](https://npmjs.com/package/react-arborist)  React 的完整树视图组件 [![Open-Source Software][OSS Icon]](https://github.com/brimdata/react-arborist)

- [@uiw/react-json-view](https://npmjs.com/package/@uiw/react-json-view)  用于显示和编辑 JS 数组和 JSON 对象的 React 组件 [![Open-Source Software][OSS Icon]](https://github.com/uiwjs/react-json-view)



### 用户界面导航



### 自定义滚动条



### 音频视频



- [react-player](https://npmjs.com/package/react-player)  一个React组件，用于播放各种url，包括文件路径，YouTube, Facebook. [![Open-Source Software][OSS Icon]](https://github.com/CookPete/react-player)



### 地图



- [@uiw/react-baidu-map](https://npmjs.com/package/@uiw/react-baidu-map)  基于 React 封装的百度地图组件 [![Open-Source Software][OSS Icon]](https://github.com/uiwjs/react-baidu-map)

- [@uiw/react-amap](https://npmjs.com/package/@uiw/react-amap)  基于 React 封装的高德地图组件 [![Open-Source Software][OSS Icon]](https://github.com/uiwjs/react-amap)



### 时间/日期/年龄



- [react-day-picker](https://npmjs.com/package/react-day-picker)  一个可自定义的 React 日期选择器组件，具有原生 TypeScript 支持 [![Open-Source Software][OSS Icon]](https://github.com/gpbl/react-day-picker)



### 照片/图像



- [react-easy-crop](https://npmjs.com/package/react-easy-crop)  通过简单的交互来裁剪图像/视频 [![Open-Source Software][OSS Icon]](https://github.com/ValentinH/react-easy-crop)



### 编辑器



- [editorjs](https://npmjs.com/package/@editorjs/editorjs)  具有简洁 JSON 输出的块式编辑器 [![Open-Source Software][OSS Icon]](https://github.com/codex-team/editor.js)

- [lexical](https://npmjs.com/package/lexical)  一个可扩展的文本编辑器框架，提供出色的可靠性、可访问性和性能 [![Open-Source Software][OSS Icon]](https://github.com/facebook/lexical)

- [prosemirror-view](https://npmjs.com/package/prosemirror-view)  ProseMirror WYSIWYM 编辑器 [![Open-Source Software][OSS Icon]](https://github.com/ProseMirror/prosemirror)

- [react-draft-wysiwyg](https://npmjs.com/package/react-draft-wysiwyg)  基于 ReactJS 和 DraftJS 的 Wysiwyg 编辑器。 [![Open-Source Software][OSS Icon]](https://github.com/jpuri/react-draft-wysiwyg)

- [alloyeditor](https://npmjs.com/package/alloyeditor)  WYSIWYG编辑器基于CKEditor与完全重写的UI [![Open-Source Software][OSS Icon]](https://github.com/liferay/alloy-editor)

- [react-ace](https://npmjs.com/package/react-ace)  Ace（高级代码编辑器）包装器。 [![Open-Source Software][OSS Icon]](https://github.com/securingsincity/react-ace)

- [tiptap](https://github.com/ueberdosis/tiptap)  web 工匠的无头编辑器框架 [![Open-Source Software][OSS Icon]](https://github.com/ueberdosis/tiptap)

- [remirror](https://github.com/remirror/remirror)  用于 React 的 ProseMirror 工具包 [![Open-Source Software][OSS Icon]](https://github.com/remirror/remirror)



### Icons 图标



- [emoji-mart](https://npmjs.com/package/emoji-mart)  一个可定制的网页表情符号选择器 [![Open-Source Software][OSS Icon]](https://github.com/missive/emoji-mart)



### Paginator 分页器



### Markdown 预览



- [@uiw/react-markdown-preview](https://npmjs.com/package/@uiw/react-markdown-preview)  在 Web 浏览器中 React 组件预览 Markdown 文本 [![Open-Source Software][OSS Icon]](https://github.com/uiwjs/react-markdown-preview)

- [react-markdown](https://npmjs.com/package/react-markdown)  Markdown component for Reac [![Open-Source Software][OSS Icon]](https://github.com/remarkjs/react-markdown)



### 画布



_使用 Canvas 或 SVG 绘制草图输入_



- [react-konva](https://npmjs.com/package/react-konva)  - 一个 JavaScript 库，用于通过绑定到 Konva 框架来绘制复杂的画布图形 [![Open-Source Software][OSS Icon]](https://github.com/konvajs/react-konva)

- [react-sketch](https://npmjs.com/package/react-sketch)  - 基于 React 的应用程序的 Sketch 工具，由 FabricJS 支持 [![Open-Source Software][OSS Icon]](https://github.com/tbolis/react-sketch)

- [react-sketch-canvas](https://npmjs.com/package/react-sketch-canvas)  - 使用 SVG 作为画布的 React 手绘矢量绘图工具 [![Open-Source Software][OSS Icon]](https://github.com/vinothpandian/react-sketch-canvas)

- [@uiw/react-heat-map](https://npmjs.com/package/@uiw/react-heat-map)  - 基于 SVG 构建的轻量级日历热图反应组件，GitHub 贡献图的可定制版本 [![Open-Source Software][OSS Icon]](https://github.com/uiwjs/react-heat-map)

- [@uiw/react-signature](https://npmjs.com/package/@uiw/react-signature)  用于 React 的签名板组件 [![Open-Source Software][OSS Icon]](https://github.com/uiwjs/react-signature)



### UI 动画



- [framer-motion](https://npmjs.com/package/framer-motion)  动画和手势库 [![Open-Source Software][OSS Icon]](https://github.com/framer/motion)

- [react-spring](https://npmjs.com/package/react-spring)  基于 Spring 物理的 React 动画库 [![Open-Source Software][OSS Icon]](https://github.com/pmndrs/react-spring)

- [@formkit/auto-animate](https://npmjs.com/package/@formkit/auto-animate)  一个零配置，插入式动画实用程序 [![Open-Source Software][OSS Icon]](https://github.com/formkit/auto-animate)



### 各种各样的



- [@git-diff-view/react](https://npmjs.com/package/@git-diff-view/react)  类似 Github 的 Diff View 组件 [![Open-Source Software][OSS Icon]](https://github.com/MrWangJustToDo/git-diff-view)



[OSS Icon]: https://jaywcjlove.github.io/sb/ico/min-oss.svg "Open source ui componet on Github"