├── renovate.json ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── config.yml │ └── add-react-component.yml ├── check_for_changes.sh ├── workflows │ ├── push.yml │ └── issues.yml └── add_component.mjs ├── .gitignore ├── package.json └── README.md /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 | "extends": [ 4 | "config:base" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | ko_fi: jaywcjlove 2 | buy_me_a_coffee: jaywcjlove 3 | custom: ["https://www.paypal.me/kennyiseeyou", "https://jaywcjlove.github.io/#/sponsor"] 4 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: 😍 官网预览 4 | url: https://jaywcjlove.github.io/react-components-awesome 5 | about: 在线预览官网! -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | build 2 | esm 3 | cjs 4 | coverage 5 | node_modules 6 | npm-debug.log* 7 | package-lock.json 8 | .eslintcache 9 | .DS_Store 10 | .cache 11 | .vscode 12 | 13 | *.lerna_backup 14 | *.log 15 | *.bak 16 | *.tem 17 | *.temp 18 | #.swp 19 | *.*~ 20 | ~*.* 21 | -------------------------------------------------------------------------------- /.github/check_for_changes.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | diff --brief README.md README-backup.md >/dev/null 4 | CONTAINS_CHANGES=$? 5 | 6 | if [ $CONTAINS_CHANGES -eq 1 ]; then 7 | echo "changes=true" >> $GITHUB_OUTPUT 8 | else 9 | echo "changes=false" >> $GITHUB_OUTPUT 10 | fi -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-components-awesome", 3 | "version": "1.0.0", 4 | "type": "module", 5 | "author": "jaywcjlove", 6 | "license": "MIT", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/jaywcjlove/react-components-awesome.git" 10 | }, 11 | "dependencies": { 12 | "@actions/core": "^1.10.0", 13 | "@types/node": "^20.2.4", 14 | "@types/validate-npm-package-name": "^4.0.0", 15 | "fs-extra": "^11.1.1", 16 | "validate-npm-package-name": "^5.0.0" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.github/workflows/push.yml: -------------------------------------------------------------------------------- 1 | name: Deploy Website 2 | 3 | on: push 4 | 5 | jobs: 6 | build-deploy: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - uses: actions/checkout@v4 10 | - uses: actions/setup-node@v4 11 | with: 12 | node-version: 20 13 | registry-url: 'https://registry.npmjs.org' 14 | 15 | - run: npm install idoc@1 -g 16 | - run: idoc -s "React Components Awesome" 17 | 18 | - name: Deploy Website 19 | uses: peaceiris/actions-gh-pages@v4 20 | with: 21 | user_name: 'github-actions[bot]' 22 | user_email: 'github-actions[bot]@users.noreply.github.com' 23 | commit_message: ${{ github.event.head_commit.message }} 24 | github_token: ${{ secrets.GITHUB_TOKEN }} 25 | publish_dir: ./dist -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/add-react-component.yml: -------------------------------------------------------------------------------- 1 | name: "添加 React 组件" 2 | description: "添加一个 React 组件" 3 | title: 'Add ' 4 | 5 | body: 6 | - type: markdown 7 | attributes: 8 | value: | 9 | 🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧 10 | 注意：在这里分享组件按照要求提交，自动生成 PR，否则会被关闭。 11 | 🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧 12 | 13 | 14 | - type: input 15 | attributes: 16 | label: Github 仓库地址 17 | description: 提供文档网站地址 18 | placeholder: ex. https://github.com/uiwjs/react-codemirror 19 | validations: 20 | required: true 21 | 22 | - type: input 23 | attributes: 24 | label: NPM 包名称 25 | description: 提供 npm 安装包名称 26 | placeholder: "@uiw/react-codemirror" 27 | validations: 28 | required: true 29 | 30 | - type: input 31 | attributes: 32 | label: 组件说明项目 33 | description: 您可以在这里简明扼要的语言描述一下 React 组件。 34 | placeholder: 描述一下 React 组件 35 | validations: 36 | required: true 37 | 38 | - type: dropdown 39 | validations: 40 | required: true 41 | attributes: 42 | label: 选择一个分类 43 | options: 44 | - 表格 45 | - 无限滚动 46 | - 叠加 47 | - 通知 48 | - 工具提示 49 | - 菜单 50 | - Sticky 51 | - 选项卡 52 | - 加载 53 | - Carousel 54 | - 按钮 55 | - Collapse 56 | - 图表 57 | - 命令面板 58 | - 树 59 | - 用户界面导航 60 | - 自定义滚动条 61 | - 音频视频 62 | - 地图 63 | - 时间/日期/年龄 64 | - 照片/图像 65 | - 编辑器 66 | - 图标 67 | - 分页器 68 | - Markdown 预览 69 | - 画布 70 | - UI 动画 71 | - 各种各样的 72 | -------------------------------------------------------------------------------- /.github/workflows/issues.yml: -------------------------------------------------------------------------------- 1 | name: Automatic Pull Request 2 | 3 | on: 4 | issues: 5 | types: [opened, reopened] 6 | 7 | jobs: 8 | build-deploy: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v4 12 | - uses: actions/setup-node@v4 13 | with: 14 | node-version: 20 15 | registry-url: 'https://registry.npmjs.org' 16 | 17 | - run: npm install 18 | - run: cp README.md README-backup.md 19 | 20 | - name: Add React Component to README.md 21 | run: node .github/add_component.mjs 22 | env: 23 | ISSUE_BODY: ${{ github.event.issue.body }} 24 | 25 | - name: Check for Changes 26 | run: bash .github/check_for_changes.sh 27 | id: check 28 | 29 | - run: echo ${{ steps.check.outputs.changes }} 30 | - name: Create Pull Request 31 | id: cpr 32 | if: steps.check.outputs.changes == 'true' 33 | uses: peter-evans/create-pull-request@v5 34 | with: 35 | token: ${{ secrets.GITHUB_TOKEN }} 36 | add-paths: | 37 | README.md 38 | commit-message: ${{ github.event.issue.title }} 39 | title: ${{ github.event.issue.title }} 40 | branch: spi-auto-${{ github.event.issue.number }} 41 | delete-branch: true 42 | committer: GitHub 43 | author: GitHub 44 | body: | 45 | Closes #${{ github.event.issue.number }} 46 | 47 | ## Original Message 48 | 49 | ${{ github.event.issue.body }} 50 | 51 | - name: Update Issue (Success) 52 | if: steps.check.outputs.changes == 'true' 53 | uses: actions/github-script@v6 54 | with: 55 | github-token: ${{ secrets.GITHUB_TOKEN }} 56 | script: | 57 | github.rest.issues.createComment({ 58 | issue_number: context.issue.number, 59 | owner: context.repo.owner, 60 | repo: context.repo.repo, 61 | body: 'Thank you! We will approve and add these packages with #${{ steps.cpr.outputs.pull-request-number }}.' 62 | }) 63 | 64 | - name: Update Issue (Failure) 65 | if: ${{ failure() || steps.check.outputs.changes != 'true' }} 66 | uses: actions/github-script@v6 67 | with: 68 | github-token: ${{ secrets.GITHUB_TOKEN }} 69 | script: | 70 | github.rest.issues.createComment({ 71 | issue_number: context.issue.number, 72 | owner: context.repo.owner, 73 | repo: context.repo.repo, 74 | body: 'Oh no! We were unable to detect any valid packages in your submission. If you submitted the wrong URL and would like to update it, please [open a new issue](https://github.com/jaywcjlove/react-components-awesome/issues/new/choose).\n\n>Validate Error: ${{ steps.validate.outputs.validateError || 'None' }}' 75 | }) -------------------------------------------------------------------------------- /.github/add_component.mjs: -------------------------------------------------------------------------------- 1 | #!/bin/bash node 2 | import { setFailed, setOutput, getInput, info, startGroup, endGroup } from '@actions/core'; 3 | import validate from 'validate-npm-package-name'; 4 | import fs from 'fs-extra'; 5 | 6 | function getGithubOrg(url) { 7 | const regex = /https:\/\/github\.com\/([^\/]+)\/([^\/]+)/; 8 | const match = url.match(regex); 9 | const org = match[1]; 10 | const repo = match[2]; 11 | return { org, repo } 12 | } 13 | 14 | function modifyContent(start, end, fileContent, data, npmname) { 15 | // 判断是否重复 16 | const regex = new RegExp(`-\\s\\[${npmname}\\]\\(`, 'm') 17 | if (!regex.test(fileContent)) { 18 | // 插入数据 19 | const startIndex = fileContent.indexOf(start) + start.length; 20 | const endIndex = fileContent.indexOf(end); 21 | const newData = `${data}\n`; 22 | if (endIndex < 0) { 23 | setFailed(`Misclassification: \x1b[31;1m ${npmname}\x1b[0m`); 24 | } 25 | const newContent = fileContent.slice(0, endIndex) + newData + fileContent.slice(endIndex); 26 | return newContent 27 | } else { 28 | setFailed(`component duplication: \x1b[31;1m ${npmname} ${end}\x1b[0m`); 29 | } 30 | } 31 | 32 | // process.env.ISSUE_BODY = `### Github 仓库地址 33 | 34 | // https://github.com/rsuite/rsuite-table 35 | 36 | // ### NPM 包名称 37 | 38 | // rsuite-table 39 | 40 | // ### 组件说明项目 41 | 42 | // 一个 React 表格组件 43 | 44 | // ### 选择一个分类 45 | 46 | // 表格` 47 | 48 | const issueBody = process.env.ISSUE_BODY; 49 | 50 | if (!issueBody || issueBody.length === 0) { 51 | setFailed('Issue Body is empty.'); 52 | } 53 | 54 | startGroup(`\x1b[32;1m Issue Body\x1b[0m content: `); 55 | info(`${issueBody}`); 56 | endGroup(); 57 | 58 | const data = issueBody.split('### ').filter(Boolean); 59 | const githubUrlRegex = /^(https?:\/\/)?(www\.)?github\.com\/[a-zA-Z0-9._-]+\/[a-zA-Z0-9._-]+(\/)?$/; 60 | const githubUrl = data[0].split('\n').filter(Boolean)[1]; 61 | if (githubUrlRegex.test(githubUrl)) { 62 | info(`GitHub URL: \x1b[32;1m${githubUrl}\x1b[0m`); 63 | } else { 64 | setFailed(`不是 GitHub 地址: \x1b[32;1m${githubUrl}\x1b[0m`); 65 | } 66 | 67 | ;(async () => { 68 | const npmname = data[1].split('\n').filter(Boolean)[1]?.trim(); 69 | const validateNpm = validate(npmname || ''); 70 | 71 | const description = data[2].split('\n').filter(Boolean)[1]; 72 | if (description.length > 100 && description.length < 10) { 73 | setFailed('Description length cannot exceed 100 characters and cannot be less than 10 characters'); 74 | } 75 | 76 | if (validateNpm.validForNewPackages && validateNpm.validForOldPackages) { 77 | info(`Correct npm name: \x1b[32;1m ${npmname}\x1b[0m`); 78 | } else { 79 | setFailed(`Wrong npm name: \x1b[31;1m ${npmname}\x1b[0m`); 80 | setFailed(`Wrong npm name: \x1b[31;1m ${validateNpm.errors.join('\n\n')}\x1b[0m`); 81 | } 82 | 83 | const category = data[3].split('\n').filter(Boolean)[1]?.trim(); 84 | 85 | const content = await fs.readFile('./README.md', 'utf8'); 86 | const githubOrg = getGithubOrg(githubUrl).org 87 | const githubRepo = getGithubOrg(githubUrl).repo 88 | // const insertData = '- [@uiw/react-markdown-preview](https://npmjs.com/package/@uiw/react-markdown-preview) xxxx ![]'; 89 | const insertData = `- [${npmname}](https://npmjs.com/package/${npmname}) ${description} [![Open-Source Software][OSS Icon]](${githubUrl})`; 90 | const mContent = modifyContent(``, ``, content, insertData, npmname); 91 | if (!mContent) { 92 | setFailed(`Failed to modify content \x1b[31;1m ${npmname}\x1b[0m`); 93 | } 94 | await fs.writeFile('./README.md', mContent, 'utf8'); 95 | info(`Successfully written ./README.md file`); 96 | 97 | startGroup(`\x1b[32;1m File ./README.md \x1b[0m content: `); 98 | info(`${mContent}`); 99 | endGroup(); 100 | return mContent 101 | })(); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | React Components Awesome 2 | === 3 | 4 | 搜集优秀的 React 组件，通过创建 [issue](https://github.com/jaywcjlove/react-components-awesome/issues/new/choose) 自动创建 PR 提交合并。 5 | 6 | ### 表格 7 | 8 | 9 | - [@fortune-sheet/react](https://npmjs.com/package/@fortune-sheet/react) 一个在线电子表格组件，提供与 Excel 一样的开箱即用功能 [![Open-Source Software][OSS Icon]](https://github.com/ruilisi/fortune-sheet) 10 | - [@mui/material](https://npmjs.com/package/@mui/material) 快速且可自定义的数据网格，为高级用户和复杂用例提供高级功能 [![Open-Source Software][OSS Icon]](https://github.com/mui/mui-x) 11 | - [@revolist/revogrid-react](https://npmjs.com/package/@revolist/revogrid-react) 具有高级定制功能的 React / AngularJS / Vue / Web 组件的强大数据网格 [![Open-Source Software][OSS Icon]](https://github.com/revolist/revogrid) 12 | - [@silevis/reactgrid](https://npmjs.com/package/@silevis/reactgrid) 向您的应用添加类似电子表格的行为 [![Open-Source Software][OSS Icon]](https://github.com/silevis/reactgrid) 13 | - [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) 14 | - [react-data-grid](https://npmjs.com/package/react-data-grid) 类似 Excel 的网格 [![Open-Source Software][OSS Icon]](https://github.com/adazzle/react-data-grid) 15 | - [rsuite-table](https://npmjs.com/package/rsuite-table) 一个 React 表格组件 [![Open-Source Software][OSS Icon]](https://github.com/rsuite/rsuite-table) 16 | 17 | 18 | ### 无限滚动 19 | 20 | 21 | - [@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) 22 | - [react-lazyload](https://npmjs.com/package/react-lazyload) 延迟加载您的组件、图像或任何其他性能重要的东西 [![Open-Source Software][OSS Icon]](https://github.com/twobin/react-lazyload) 23 | - [react-list](https://npmjs.com/package/react-list) 多功能无限滚动 React 组件 [![Open-Source Software][OSS Icon]](https://github.com/orgsync/react-list) 24 | - [react-window](https://npmjs.com/package/react-window) React 组件，用于高效呈现大型列表和表格数据 [![Open-Source Software][OSS Icon]](https://github.com/bvaughn/react-window) 25 | - [virtua](https://npmjs.com/package/virtua) 简单、快速、小巧、灵活的虚拟滚动条 [![Open-Source Software][OSS Icon]](https://github.com/inokawa/virtua) 26 | 27 | 28 | ### 叠加 29 | 30 | 31 | - [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) 32 | - [react-modal](https://npmjs.com/package/react-modal) React 的可访问模式对话框组件 [![Open-Source Software][OSS Icon]](https://github.com/reactjs/react-modal) 33 | - [reoverlay](https://npmjs.com/package/reoverlay) 缺少管理模式的解决方案 [![Open-Source Software][OSS Icon]](https://github.com/hiradary/reoverlay) 34 | - [sweetalert2](https://npmjs.com/package/sweetalert2) 一个美观、响应迅速、高度可定制和可访问的 (WAI-ARIA) 替代 JavaScript 的弹出框，零依赖 [![Open-Source Software][OSS Icon]](https://github.com/sweetalert2/sweetalert2) 35 | - [sweetalert2-react-content](https://npmjs.com/package/sweetalert2-react-content) 官方 SweetAlert2 增强器添加了对 React 元素作为内容的支持 [![Open-Source Software][OSS Icon]](https://github.com/sweetalert2/sweetalert2-react-content) 36 | 37 | 38 | ### 通知 39 | 40 | _用一个无模式的临时小弹出窗口通知用户_ 41 | 42 | 43 | - [react-notifications-component](https://npmjs.com/package/react-notifications-component) 高度可定制且易于使用的通知组件 [![Open-Source Software][OSS Icon]](https://github.com/teodosii/react-notifications-component) 44 | - [notistack](https://npmjs.com/package/notistack) 高度可定制的通知快餐栏（吐司），可以相互堆叠 [![Open-Source Software][OSS Icon]](https://github.com/iamhosseindhv/notistack) 45 | - [react-local-toast](https://npmjs.com/package/react-local-toast) 显示链接到特定组件的反馈而不是应用程序范围的 toasts [![Open-Source Software][OSS Icon]](https://github.com/OlegWock/react-local-toast) 46 | - [react-toast](https://npmjs.com/package/react-toast) 最少的 toast 通知 [![Open-Source Software][OSS Icon]](https://github.com/moharnadreza/react-toast) 47 | - [react-toastify](https://npmjs.com/package/react-toastify) 目前最好的选择 Hook 支持 [![Open-Source Software][OSS Icon]](https://github.com/fkhadra/react-toastify) 48 | - [reapop](https://npmjs.com/package/reapop) - React & Redux 通知系统 [![Open-Source Software][OSS Icon]](https://github.com/LouisBarranqueiro/reapop) 49 | - [react-hot-toast](https://npmjs.com/package/react-hot-toast) React 的吸烟热通知。默认情况下轻巧，可定制且美观 [![Open-Source Software][OSS Icon]](https://github.com/timolins/react-hot-toast) 50 | 51 | 52 | ### 工具提示 53 | 54 | 55 | - [react-tooltip](https://npmjs.com/package/react-tooltip) React 工具提示组件 [![Open-Source Software][OSS Icon]](https://github.com/wwayne/react-tooltip) 56 | 57 | 58 | ### 菜单 59 | 60 | _Menus / sidebars_ 61 | 62 | 63 | - [hamburger-react](https://npmjs.com/package/hamburger-react) React 的动画汉堡菜单图标 [![Open-Source Software][OSS Icon]](https://github.com/luukdv/hamburger-react) 64 | - [react-burger-menu](https://npmjs.com/package/react-burger-menu) 具有效果和样式的非画布侧边栏 [![Open-Source Software][OSS Icon]](https://github.com/negomi/react-burger-menu) 65 | - [react-offcanvas](https://npmjs.com/package/react-offcanvas) React 的非画布菜单 [![Open-Source Software][OSS Icon]](https://github.com/vutran/react-offcanvas) 66 | - [react-planet](https://npmjs.com/package/react-planet) 创建看起来像行星的圆形菜单 [![Open-Source Software][OSS Icon]](https://github.com/innFactory/react-planet) 67 | 68 | 69 | ### Sticky 70 | 71 | 72 | 73 | 74 | ### 选项卡 75 | 76 | 77 | - [react-tabs](https://npmjs.com/package/react-tabs) React 选项卡组件 [![Open-Source Software][OSS Icon]](https://github.com/reactjs/react-tabs) 78 | - [react-tabtab](https://npmjs.com/package/react-tabtab) React 选项卡 [![Open-Source Software][OSS Icon]](https://github.com/ctxhou/react-tabtab) 79 | 80 | 81 | ### 加载 82 | 83 | 84 | - [react-loader-spinner](https://npmjs.com/package/react-loader-spinner) 用于 React 异步操作的旋转器集合集 [![Open-Source Software][OSS Icon]](https://github.com/mhnpd/react-loader-spinner) 85 | - [react-spinners](https://npmjs.com/package/react-spinners) 用于 React 的加载旋转器组件的集合 [![Open-Source Software][OSS Icon]](https://github.com/davidhu2000/react-spinners) 86 | 87 | 88 | ### Carousel 89 | 90 | 91 | - [swiper](https://npmjs.com/package/swiper) 大多数现代移动触摸滑块与硬件加速转换 [![Open-Source Software][OSS Icon]](https://github.com/nolimits4web/Swiper) 92 | - [react-slick](https://npmjs.com/package/react-slick) React 轮播组件 [![Open-Source Software][OSS Icon]](https://github.com/akiran/react-slick) 93 | - [pure-react-carousel](https://npmjs.com/package/pure-react-carousel) 可以由用户组装来创建响应式且符合 aria 的轮播 [![Open-Source Software][OSS Icon]](https://github.com/express-labs/pure-react-carousel) 94 | 95 | 96 | ### 按钮 97 | 98 | 99 | - [reactive-button](https://npmjs.com/package/reactive-button) 带有进度条的3D动画 react 按钮组件。 [![Open-Source Software][OSS Icon]](https://github.com/arifszn/reactive-button) 100 | - [react-awesome-button](https://npmjs.com/package/react-awesome-button) 一个3D UI，进度，社交和分享功能，的按钮组件。 [![Open-Source Software][OSS Icon]](https://github.com/rcaferati/react-awesome-button) 101 | 102 | 103 | ### Collapse 104 | 105 | 106 | - [keen-slider](https://npmjs.com/package/keen-slider) HTML 触摸滑块轮播给您带来最原生的感觉。 [![Open-Source Software][OSS Icon]](https://github.com/rcbyr/keen-slider) 107 | 108 | 109 | ### 图表 110 | 111 | 112 | - [frappe-charts](https://npmjs.com/package/frappe-charts) 简单、灵敏、现代的 SVG 图表，零依赖性 [![Open-Source Software][OSS Icon]](https://github.com/frappe/charts) 113 | - [bizcharts](https://npmjs.com/package/bizcharts) 基于G2和 React 的强大数据可视化库 [![Open-Source Software][OSS Icon]](https://github.com/alibaba/BizCharts) 114 | - [react-vis](https://npmjs.com/package/react-vis) 数据可视化组件 [![Open-Source Software][OSS Icon]](https://github.com/uber/react-vis) 115 | - [@berryv/g2-react](https://npmjs.com/package/@berryv/g2-react) @antv/g2 的轻量级 React 组件 [![Open-Source Software][OSS Icon]](https://github.com/pearmini/g2-react) 116 | - [recharts](https://npmjs.com/package/recharts) 使用 React 和 D3 重新定义图表库 [![Open-Source Software][OSS Icon]](https://github.com/recharts/recharts/) 117 | - [victory](https://npmjs.com/package/victory) 用于构建交互式数据可视化的可组合React组件集合 [![Open-Source Software][OSS Icon]](https://github.com/FormidableLabs/victory) 118 | - [lightweight-charts](https://npmjs.com/package/lightweight-charts) 使用 HTML5 画布制作高效的财务图表(支持 React) [![Open-Source Software][OSS Icon]](https://github.com/tradingview/lightweight-charts) 119 | 120 | 121 | ### 命令面板 122 | 123 | 124 | 125 | 126 | ### 树 127 | 128 | 129 | - [react-arborist](https://npmjs.com/package/react-arborist) React 的完整树视图组件 [![Open-Source Software][OSS Icon]](https://github.com/brimdata/react-arborist) 130 | - [@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) 131 | 132 | 133 | ### 用户界面导航 134 | 135 | 136 | 137 | 138 | ### 自定义滚动条 139 | 140 | 141 | 142 | 143 | ### 音频视频 144 | 145 | 146 | - [react-player](https://npmjs.com/package/react-player) 一个React组件，用于播放各种url，包括文件路径，YouTube, Facebook. [![Open-Source Software][OSS Icon]](https://github.com/CookPete/react-player) 147 | 148 | 149 | ### 地图 150 | 151 | 152 | - [@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) 153 | - [@uiw/react-amap](https://npmjs.com/package/@uiw/react-amap) 基于 React 封装的高德地图组件 [![Open-Source Software][OSS Icon]](https://github.com/uiwjs/react-amap) 154 | - [@vis.gl/react-google-maps](https://npmjs.com/package/@vis.gl/react-google-maps) 用于 Google 地图 JavaScript API 的 React 组件和钩子 [![Open-Source Software][OSS Icon]](https://github.com/visgl/react-google-maps) 155 | 156 | 157 | ### 时间/日期/年龄 158 | 159 | 160 | - [react-day-picker](https://npmjs.com/package/react-day-picker) 一个可自定义的 React 日期选择器组件，具有原生 TypeScript 支持 [![Open-Source Software][OSS Icon]](https://github.com/gpbl/react-day-picker) 161 | 162 | 163 | ### 照片/图像 164 | 165 | 166 | - [react-easy-crop](https://npmjs.com/package/react-easy-crop) 通过简单的交互来裁剪图像/视频 [![Open-Source Software][OSS Icon]](https://github.com/ValentinH/react-easy-crop) 167 | 168 | 169 | ### 编辑器 170 | 171 | 172 | - [editorjs](https://npmjs.com/package/@editorjs/editorjs) 具有简洁 JSON 输出的块式编辑器 [![Open-Source Software][OSS Icon]](https://github.com/codex-team/editor.js) 173 | - [lexical](https://npmjs.com/package/lexical) 一个可扩展的文本编辑器框架，提供出色的可靠性、可访问性和性能 [![Open-Source Software][OSS Icon]](https://github.com/facebook/lexical) 174 | - [prosemirror-view](https://npmjs.com/package/prosemirror-view) ProseMirror WYSIWYM 编辑器 [![Open-Source Software][OSS Icon]](https://github.com/ProseMirror/prosemirror) 175 | - [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) 176 | - [alloyeditor](https://npmjs.com/package/alloyeditor) WYSIWYG编辑器基于CKEditor与完全重写的UI [![Open-Source Software][OSS Icon]](https://github.com/liferay/alloy-editor) 177 | - [react-ace](https://npmjs.com/package/react-ace) Ace（高级代码编辑器）包装器。 [![Open-Source Software][OSS Icon]](https://github.com/securingsincity/react-ace) 178 | - [tiptap](https://github.com/ueberdosis/tiptap) web 工匠的无头编辑器框架 [![Open-Source Software][OSS Icon]](https://github.com/ueberdosis/tiptap) 179 | - [remirror](https://github.com/remirror/remirror) 用于 React 的 ProseMirror 工具包 [![Open-Source Software][OSS Icon]](https://github.com/remirror/remirror) 180 | - [@uiw/react-codemirror](https://npmjs.com/package/@uiw/react-codemirror) CodeMirror 6 的 React 组件 [![Open-Source Software][OSS Icon]](https://github.com/uiwjs/react-codemirror) 181 | 182 | 183 | ### Icons 图标 184 | 185 | 186 | - [emoji-mart](https://npmjs.com/package/emoji-mart) 一个可定制的网页表情符号选择器 [![Open-Source Software][OSS Icon]](https://github.com/missive/emoji-mart) 187 | 188 | 189 | ### Paginator 分页器 190 | 191 | 192 | 193 | 194 | ### Markdown 预览 195 | 196 | 197 | - [@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) 198 | - [react-markdown](https://npmjs.com/package/react-markdown) Markdown component for Reac [![Open-Source Software][OSS Icon]](https://github.com/remarkjs/react-markdown) 199 | 200 | 201 | ### 画布 202 | 203 | _使用 Canvas 或 SVG 绘制草图输入_ 204 | 205 | 206 | - [react-konva](https://npmjs.com/package/react-konva) - 一个 JavaScript 库，用于通过绑定到 Konva 框架来绘制复杂的画布图形 [![Open-Source Software][OSS Icon]](https://github.com/konvajs/react-konva) 207 | - [react-sketch](https://npmjs.com/package/react-sketch) - 基于 React 的应用程序的 Sketch 工具，由 FabricJS 支持 [![Open-Source Software][OSS Icon]](https://github.com/tbolis/react-sketch) 208 | - [react-sketch-canvas](https://npmjs.com/package/react-sketch-canvas) - 使用 SVG 作为画布的 React 手绘矢量绘图工具 [![Open-Source Software][OSS Icon]](https://github.com/vinothpandian/react-sketch-canvas) 209 | - [@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) 210 | - [@uiw/react-signature](https://npmjs.com/package/@uiw/react-signature) 用于 React 的签名板组件 [![Open-Source Software][OSS Icon]](https://github.com/uiwjs/react-signature) 211 | 212 | 213 | ### UI 动画 214 | 215 | 216 | - [framer-motion](https://npmjs.com/package/framer-motion) 动画和手势库 [![Open-Source Software][OSS Icon]](https://github.com/framer/motion) 217 | - [react-spring](https://npmjs.com/package/react-spring) 基于 Spring 物理的 React 动画库 [![Open-Source Software][OSS Icon]](https://github.com/pmndrs/react-spring) 218 | - [@formkit/auto-animate](https://npmjs.com/package/@formkit/auto-animate) 一个零配置，插入式动画实用程序 [![Open-Source Software][OSS Icon]](https://github.com/formkit/auto-animate) 219 | 220 | 221 | ### 各种各样的 222 | 223 | 224 | - [@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) 225 | - [@uiw/react-color](https://npmjs.com/package/@uiw/react-color) 轻量级的 React 颜色选择器组件 [![Open-Source Software][OSS Icon]](https://github.com/uiwjs/react-color) 226 | 227 | 228 | [OSS Icon]: https://jaywcjlove.github.io/sb/ico/min-oss.svg "Open source ui componet on Github" 229 | --------------------------------------------------------------------------------