5. Sweet Alert
Sweet Alert是一个弹窗组件,包含很多弹窗样式。
官网地址:sweetalert.js.org/
6. draftjs
Draft JS 是一个富文本编辑器库。可以无缝地融入 React 应用程序。
官网地址:draftjs.org/
7. react-slick
React Slick是一个React轮播组件。
官网地址:react-slick.neostack.com/
8. Material-UI
Material-UI是一个简单的、可定制的组件库,用于构建更快、更漂亮、更易使用的 React 应用程序。
官网地址:mui.com/zh/getting-…
9. react-bootstrap
React Bootstrap是一个由 React 构建的 Bootstrap 4 组件。
官网地址:react-bootstrap.github.io/
10. react-custom-scrollbars
react-custom-scrollbars 是一个滚动条组件库,可以在web和移动端流畅的使用滚动条,并且可以完全自己定制
npm地址:www.npmjs.com/package/rea…
11. react-dropdown
react-dropdown 是一个简单的下拉组件,灵感来自于react-select。
npm地址:www.npmjs.com/package/rea…
12. react-horizontal-scrolling-menu
react-horizontal-scrolling-menu 是一个水平滚动菜单组件。
npm地址:www.npmjs.com/package/rea…
13. react-calendar
react-calendar 是一个 React 的日历组件。
npm地址:www.npmjs.com/package/rea…
14. react-datepicker
react-datepicker是一个日期选择组件。
npm地址:www.npmjs.com/package/rea…
15. react-table
react-table 是一个强大的表格组件。
npm地址:www.npmjs.com/package/rea…
16. react-awesome-button
react-awesome-button 是一个按钮组件库。
npm地址:www.npmjs.com/package/rea…
17. react-compound-slider
react-compound-slider 是一个滑块组件。
npm地址:www.npmjs.com/package/rea…
18. react-checkbox-tree
react-checkbox-tree 是一个复选框组件。
npm地址:www.npmjs.com/package/rea…
19. recharts
recharts 是一个React图表库。
npm地址:www.npmjs.com/package/rec…
20. react-modal
react-modal 是一个静态动画库组件库。
npm地址:www.npmjs.com/package/rea…
21. react-responsive-carousel
react-responsive-carousel 是一个响应式的轮播组件库。
npm地址:www.npmjs.com/package/rea…
22. react-image-lightbox
react-image-lightbox 是一个用于显示图片的组件库。
npm地址:www.npmjs.com/package/rea…
23. react-tabs
react-tabs 是一个选项卡组件。
npm地址:www.npmjs.com/package/rea…
24. rebass
Rebass是一个用于构建响应式WEB应用的React UI工具包,它有60多种可定制的基础组件,而且风格样式分离,不需要编写自定义的CSS。
官网地址:rebassjs.org/
25. react-suite
React Suite是一套转为后端打造的企业级UI组件库,它由 HYPERS 前端团队与 UX 团队共同打造,有大量的通用组件和功能,而且支持 Typescript 与 Flow, 支持服务端渲染。
官网地址:rsuitejs.com/
四、动画
1. react-spring
react-spring是基于spring-physics(弹簧物理)的react动画库,动画效果更加流畅、自然。
npm地址:www.npmjs.com/package/rea…
2. react-motion
react-motion是一个强大的react动画库。 npm地址:www.npmjs.com/package/rea…
3. react-transition-group
react-transition-group是一个专为动画设计的库。
npm地址:www.npmjs.com/package/rea…
4. react-spinner
react-spinner用来创建加载组件。
npm地址:www.npmjs.com/package/rea…
五、HTTP
1. Axios
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
npm地址:www.npmjs.com/package/axi…
2. apisauce
apisauce 是一个建立在 axios 之上的 http 客户端。官方介绍:Axios + standardized errors + request/response transforms.
npm地址:www.npmjs.com/package/api…
3. SuperAgent
SuperAgent 是一个轻量的Ajax API,服务器端(Node.js)客户端(浏览器端)均可使用,SuperAgent具有学习曲线低、使用简单、可读性好的特点,可作为客户端请求代理模块使用,当想处理get,post,put,delete,head请求时,可以考虑使用SuperAgent。
npm地址:www.npmjs.com/package/sup…
六、CSS
1. styled-components
styled-components 可以在 JavaScript 代码中使用 CSS 来设置 React 组件的样式。通过这个库可以自定义组件的样式,它会将给定的样式包装成一个组件,可以直接使用这个组件,也不需要组件和样式之间的映射,即创建后就是一个正常的React 组件。
npm地址:www.npmjs.com/package/sty…
2. emotion
emotion是JS库中一种高效灵活的CSS。基于JS库中的许多其他CSS,它允许您使用字符串或对象样式快速设置应用程序样式。它具有可预测的组成,以避免CSS的特殊性问题。
npm地址:www.npmjs.com/package/emo…
七、测试
1. @testing-library/react
React Testing Library 基于DOM Testing Library的基础上添加一些API,主要用于测试React组件。该库在使用过程并不关注组件的内部实现,而是更关注测试。该库基于react-dom和react-dom/test-utils,是以上两者的轻量实现。
npm地址:www.npmjs.com/package/@te…
2. Enzyme
Enzyme 来自 airbnb 公司,是一个用于 React 的 JavaScript 测试工具,方便你判断、操纵和遍历 React Components 输出。
npm地址:www.npmjs.com/package/enz…
八、表单
1. react-hook-form
React Hook Form是一个高性能、灵活、易拓展、易于使用的表单校验库,用于React Web&Native的表单验证。
官网地址:react-hook-form.com/
2. Formik
Formik是由React组件和hooks组成,它内置了表单的state管理操作,无需我们在单独为表单建立state,同时使用了Context,能够让表单组件多层嵌套,不再需要我们一层层传递。
npm地址:www.npmjs.com/package/for…
3. react-use-form-state
react-use-form-state是一个小型 React Hook,它使用原生表单输入元素来简化管理表单的状态。
npm地址:www.npmjs.com/package/rea…
九、自定义Hooks
1. use-clippy
use-clippy 是一个用 TypeScript 实现的自定义 React Hook,可以用于读取和写入用户的剪贴板。
npm地址:www.npmjs.com/package/use…
2. react-window-communication-hook
react-window-communication-hook 可以实现在浏览器上下文(窗口、选项卡、iframes)之间进行通信。
npm地址:www.npmjs.com/package/rea…
3. react-speech-kit
react-speech-kit 是一个用于浏览器内语音识别和语音合成的 React hook。简单来说就是可以将声音识别为文字,将文字合成为语音。
npm地址:www.npmjs.com/package/rea…
4. react-script-hook
react-script-hook是一个用于动态加载(并在加载时通知)外部脚本的钩子。
npm地址:www.npmjs.com/package/rea…
5. use-mouse-action
use-mouse-action 是一个有三个React hook的库,用于侦听元素或 JSX 元素上的鼠标事件。 包括鼠标操作、鼠标按下、鼠标抬起事件。
npm地址:www.npmjs.com/package/use…
6. @rehooks/online-status
@rehooks/online-status 用于检查网络状态以确定用户是否已连接到网络。
npm 地址:www.npmjs.com/package/@re…
7. @rehooks/document-title
@rehooks/document-title 用于更新页面标题(显示在浏览器的选项卡中)。
npm地址:www.npmjs.com/package/@re…
8. useHooks
自定义hook库,包含很多实用的Hooks。
官网地址:usehooks.com/
9. react-hanger
react-hanger是一个自定义React Hooks库,它包含很多实用的自定义hooks。