那些React环境中常用的第三方库,大前端必备!

3,056 阅读5分钟

组件库

包名作用
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-uiJetBrains Web UI 组件的集合
bfd-ui企业级 React 组件库
react-bootstrapbootstrap UI库,基于react的版本
react-weuiweui UI库,基于react的版本
zarm基于 React、React-Native 的移动端UI组件库

富文本

包名作用
amis-editorAMis 可视化编辑工具
braft-editor美观易用的React富文本编辑器,基于draft-js开发
braft-utilsbraft-editor实用工具包
react-live用于实时编辑React组件
component-playground用于渲染具有可编辑源和实时预览的 React 组件的组件
draft-js用于构建高度定制化非开箱即用的富文本编辑器的React框架
gg-editor基于 G6 和 React 的可视化图形编辑器
react-ace代码编辑器
react-code-view可编辑并实时渲染markdown文件的组件
react-codemirrorCodemirror Component for React.js,富文本编辑器
react-json-viewJSON查看器
react-quill富文本编辑器
react-simple-code-editor带有语法高亮显示的简单简洁的代码编辑器
slate高度可定制的富文本编辑器
slate-reactReact组件以渲染Slate编辑器

媒体

包名作用
griffith基于 React 的 Web 视频播放器
react-audio-playerHTML5音频标签上的简单React包装器
video-react使用React库为HTML5世界构建的网络视频播放器

动画处理

包名作用
react-motionreact 动画解决方案
react-transition-group当React组件进入或离开DOM时执行动画的一种简单方法

网站交互

包名作用
chart-race-reactReact 的无缝条形图竞赛组件
react-tagsinputreact 可输入标签控件 tags input
react-tag-input一个非常简单的标签组件,用于您的React项目
react-tabsreact tab切换组件
react-table使用hooks构建table表格组件
formik在React中轻松构建表单
rc-formreact表单验证组件
react-hook-formReact Hooks用于表单验证(Web + React Native)
react-input-autosize让input能随你的文本内容自动变化
react-textarea-autosizereact 让textarea可以随内容变化大小
prism-react-renderer将突出显示的 Prism 输出渲染到 React(+ 主题化和供应商 Prism)
react-highlight-words文字高亮组件
qrcode.react一个react组件用于生成二维码
react-qrbtf艺术二维码生成器
react-beautiful-dnd使用React轻松美观地拖放或拖拽列表
react-dndreact拖拽和放入组件表
react-dnd-html5-backend官方支持的React DnD的HTML5后端
react-draggablereact可拖动或拖拽组件
react-sortable-hoc高阶组件,可将任何列表变成动画,可访问且易于触摸的可排序列表
react-rnd可调整大小和可拖动的 React 组件
react-resizablereact 可调整大小组件
react-filepondfilepond的React版本组件,用于文件分片上传
react-color来自 Sketch、Photoshop、Chrome、Github、Twitter 等的颜色选择器
react-copy-to-clipboard复制到剪贴板的React组件
react-helmetHTML页面头部文档标签管理组件
react-document-titleReact 的声明性、嵌套、有状态、同构 document.title
react-text-loop使标题中的单词动画化
react-infinite-scrollerES6 中 React 的无限滚动组件
react-list多功能的无限滚动 React 组件
react-scrollReact滚动组件
react-virtualizedreact 虚拟滚动组件
react-windowReact组件可有效呈现大型列表和表格数据,虚拟滚动
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-componentreact异步加载组件
react-lazy-load-image-component图片懒加载组件
react-lazyload延迟加载您的组件、图像或任何对性能很重要的东西
react-loadable用于加载具有动态导入的组件的高阶组件
polished用于编写JavaScript样式的轻量级工具集
classnames一个简单的javascript实用工具,可有条件地将classNames连接在一起
clsx微型实用程序,用于有条件地构造className字符串
styled-components在组件中更好的设置CSS样式
html-react-parserHTML 到 React 解析器
jsx-transformJSX语法转换器
react-jsx-parser一个可以解析 JSX 并输出渲染的 React 组件的 React 组件
prop-types运行时类型检查React道具和类似对象
react-activationReal <KeepAlive /> for React
react-keep-alive维护组件状态并避免重复重新渲染的组件
react-domreact dom渲染库
react-routerreact 路由导航核心库
react-router-configReact Router的静态路由配置帮助器
react-router-domreact 路由导航库
react-router-transition为 react-router 构建的动画过滤转换,由 react-motion 提供支持
react-height测量组件高度
react-intlformatjs是一组库,可帮助您在任何项目中设置国际化,无论它是否为React

状态管理

包名作用
constateReact Context + State
connected-react-routerReact Router v4 的 Redux 绑定
redux状态发布订阅库
react-reduxreact 状态管理器
redux-immutable用于创建与 Immutable.js 状态一起使用的 Redux combineReducers 的等效函数
redux-loggerredux 开发环境日志记录中间件
redux-persistredux持久化存储
redux-sagaredux中间件,集中处理异步逻辑
redux-thunkredux中间件,处理异步逻辑
reselectredux中间处理函数,解决组件每次更新都重新计算
mobx简单,可扩展的状态管理
mobx-reactmobx 状态管理器