组件库
| 包名 | 作用 |
|---|---|
| antd | 基于react的UI组件框架 |
| @ant-design/pro-* | antd pro系列高级组件 |
| antd-mobile@next | 基于react的移动端组件框架 |
| umi | 插件化的企业级前端应用框架 |
| @material-ui/core | 进行更快,更简单的移动端Web开发 |
| @chakra-ui/react | 用于 React 应用程序的简单、模块化和可访问的 UI 组件 |
| @douyinfe/semi-ui | 现代、全面、灵活的设计系统和 React UI 库 |
| @jetbrains/ring-ui | JetBrains Web UI 组件的集合 |
| bfd-ui | 企业级 React 组件库 |
| react-bootstrap | bootstrap UI库,基于react的版本 |
| react-weui | weui UI库,基于react的版本 |
| zarm | 基于 React、React-Native 的移动端UI组件库 |
富文本
| 包名 | 作用 |
|---|---|
| amis-editor | AMis 可视化编辑工具 |
| braft-editor | 美观易用的React富文本编辑器,基于draft-js开发 |
| braft-utils | braft-editor实用工具包 |
| react-live | 用于实时编辑React组件 |
| component-playground | 用于渲染具有可编辑源和实时预览的 React 组件的组件 |
| draft-js | 用于构建高度定制化非开箱即用的富文本编辑器的React框架 |
| gg-editor | 基于 G6 和 React 的可视化图形编辑器 |
| react-ace | 代码编辑器 |
| react-code-view | 可编辑并实时渲染markdown文件的组件 |
| react-codemirror | Codemirror Component for React.js,富文本编辑器 |
| react-json-view | JSON查看器 |
| react-quill | 富文本编辑器 |
| react-simple-code-editor | 带有语法高亮显示的简单简洁的代码编辑器 |
| slate | 高度可定制的富文本编辑器 |
| slate-react | React组件以渲染Slate编辑器 |
媒体
| 包名 | 作用 |
|---|---|
| griffith | 基于 React 的 Web 视频播放器 |
| react-audio-player | HTML5音频标签上的简单React包装器 |
| video-react | 使用React库为HTML5世界构建的网络视频播放器 |
动画处理
| 包名 | 作用 |
|---|---|
| react-motion | react 动画解决方案 |
| react-transition-group | 当React组件进入或离开DOM时执行动画的一种简单方法 |
网站交互
| 包名 | 作用 |
|---|---|
| chart-race-react | React 的无缝条形图竞赛组件 |
| react-tagsinput | react 可输入标签控件 tags input |
| react-tag-input | 一个非常简单的标签组件,用于您的React项目 |
| react-tabs | react tab切换组件 |
| react-table | 使用hooks构建table表格组件 |
| formik | 在React中轻松构建表单 |
| rc-form | react表单验证组件 |
| react-hook-form | React Hooks用于表单验证(Web + React Native) |
| react-input-autosize | 让input能随你的文本内容自动变化 |
| react-textarea-autosize | react 让textarea可以随内容变化大小 |
| prism-react-renderer | 将突出显示的 Prism 输出渲染到 React(+ 主题化和供应商 Prism) |
| react-highlight-words | 文字高亮组件 |
| qrcode.react | 一个react组件用于生成二维码 |
| react-qrbtf | 艺术二维码生成器 |
| react-beautiful-dnd | 使用React轻松美观地拖放或拖拽列表 |
| react-dnd | react拖拽和放入组件表 |
| react-dnd-html5-backend | 官方支持的React DnD的HTML5后端 |
| react-draggable | react可拖动或拖拽组件 |
| react-sortable-hoc | 高阶组件,可将任何列表变成动画,可访问且易于触摸的可排序列表 |
| react-rnd | 可调整大小和可拖动的 React 组件 |
| react-resizable | react 可调整大小组件 |
| react-filepond | filepond的React版本组件,用于文件分片上传 |
| react-color | 来自 Sketch、Photoshop、Chrome、Github、Twitter 等的颜色选择器 |
| react-copy-to-clipboard | 复制到剪贴板的React组件 |
| react-helmet | HTML页面头部文档标签管理组件 |
| react-document-title | React 的声明性、嵌套、有状态、同构 document.title |
| react-text-loop | 使标题中的单词动画化 |
| react-infinite-scroller | ES6 中 React 的无限滚动组件 |
| react-list | 多功能的无限滚动 React 组件 |
| react-scroll | React滚动组件 |
| react-virtualized | react 虚拟滚动组件 |
| react-window | React组件可有效呈现大型列表和表格数据,虚拟滚动 |
| react-photo-view | 一款精致的 React 图片预览组件 |
| react-viewer-mobile | 移动端图像查看器 |
| react-zmage | 一个基于 React 的可缩放图片控件 |
| react-sticky | component for awesome React apps |
| react-use-hover | 确定是否将React元素hover |
实用工具
| 包名 | 作用 |
|---|---|
| ahooks | 实用的antd React hooks库 |
| react-use | 实用的React Hooks |
| use-merge-value | 用于合并 props 的 value 和自己的 value 的 hooks |
| react-useportal | 提供了一种一流的方式将子组件渲染到存在于父组件的 DOM 层次结构之外的 DOM 节点 |
| use-debounce | 用于react的去抖动hook |
| use-media | 使用Media React钩子跟踪CSS媒体查询状态 |
| react-query | 在React中获取,缓存和更新异步数据的钩子 |
| use-http | 用于发出同构 http 请求的 React 钩子 |
| swr | 用于远程数据获取的 React Hooks |
| @loadable/component | 推荐的 React 代码拆分库 |
| react-async-component | react异步加载组件 |
| react-lazy-load-image-component | 图片懒加载组件 |
| react-lazyload | 延迟加载您的组件、图像或任何对性能很重要的东西 |
| react-loadable | 用于加载具有动态导入的组件的高阶组件 |
| polished | 用于编写JavaScript样式的轻量级工具集 |
| classnames | 一个简单的javascript实用工具,可有条件地将classNames连接在一起 |
| clsx | 微型实用程序,用于有条件地构造className字符串 |
| styled-components | 在组件中更好的设置CSS样式 |
| html-react-parser | HTML 到 React 解析器 |
| jsx-transform | JSX语法转换器 |
| react-jsx-parser | 一个可以解析 JSX 并输出渲染的 React 组件的 React 组件 |
| prop-types | 运行时类型检查React道具和类似对象 |
| react-activation | Real <KeepAlive /> for React |
| react-keep-alive | 维护组件状态并避免重复重新渲染的组件 |
| react-dom | react dom渲染库 |
| react-router | react 路由导航核心库 |
| react-router-config | React Router的静态路由配置帮助器 |
| react-router-dom | react 路由导航库 |
| react-router-transition | 为 react-router 构建的动画过滤转换,由 react-motion 提供支持 |
| react-height | 测量组件高度 |
| react-intl | formatjs是一组库,可帮助您在任何项目中设置国际化,无论它是否为React |
状态管理
| 包名 | 作用 |
|---|---|
| constate | React Context + State |
| connected-react-router | React Router v4 的 Redux 绑定 |
| redux | 状态发布订阅库 |
| react-redux | react 状态管理器 |
| redux-immutable | 用于创建与 Immutable.js 状态一起使用的 Redux combineReducers 的等效函数 |
| redux-logger | redux 开发环境日志记录中间件 |
| redux-persist | redux持久化存储 |
| redux-saga | redux中间件,集中处理异步逻辑 |
| redux-thunk | redux中间件,处理异步逻辑 |
| reselect | redux中间处理函数,解决组件每次更新都重新计算 |
| mobx | 简单,可扩展的状态管理 |
| mobx-react | mobx 状态管理器 |