60+ 实用 React 工具库,助力你高效开发!(下)

简介: 最近看到一些实用的React工具库,总结了一下分享给大家,避免重复造轮子。希望对你有所帮助~

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。

npm地址:www.npmjs.com/package/rea…

相关文章
|
3月前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
2月前
|
JavaScript 前端开发 算法
js开发:请解释什么是虚拟DOM(virtual DOM),以及它在React中的应用。
虚拟DOM是React等前端框架的关键技术,它以轻量级JavaScript对象树形式抽象表示实际DOM。当状态改变,React不直接操作DOM,而是先构建新虚拟DOM树。通过高效diff算法比较新旧树,找到最小变更集,仅更新必要部分,提高DOM操作效率,降低性能损耗。虚拟DOM的抽象特性还支持跨平台应用,如React Native。总之,虚拟DOM优化了状态变化时的DOM更新,提升性能和用户体验。
30 0
|
4月前
|
缓存 前端开发 JavaScript
【第58期】React 开发者的 Awesome 库
【第58期】React 开发者的 Awesome 库
61 1
|
4月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
42 0
|
6天前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
13天前
|
存储 人工智能 开发框架
【AI大模型应用开发】【AutoGPT系列】0. AutoGPT概念及原理介绍 - Agent开发框架及ReAct方法
【AI大模型应用开发】【AutoGPT系列】0. AutoGPT概念及原理介绍 - Agent开发框架及ReAct方法
17 0
|
16天前
|
前端开发 API 开发者
React这些新特性在开发效率上有哪些改进
【4月更文挑战第18天】React 18 提升开发效率,引入新Root API `createRoot`优化挂载,支持渐进式升级,减少迁移成本。新增性能工具如Profiler API和Concurrent Mode,自动化批处理提高性能,减少重渲染。服务器组件优化加载速度,减轻客户端负担。开发者可更高效构建和优化React应用。
|
24天前
|
前端开发 JavaScript
深入了解 React 中的 Ref:不是魔法,是超级工具
深入了解 React 中的 Ref:不是魔法,是超级工具
|
28天前
|
前端开发 JavaScript
React生命周期方法在实际开发中的应用场景有哪些?
【4月更文挑战第6天】 React 生命周期方法应用于数据获取、订阅管理、渲染逻辑处理、用户交互响应、性能优化、资源清理、强制更新、错误处理、动画实现、代码分割、服务端渲染、路由处理、依赖注入和集成第三方库。它们帮助控制组件行为和性能,但现代开发推荐使用Hooks替代部分生命周期方法。
|
1月前
|
JSON API 网络架构
FastAPI+React全栈开发13 FastAPI概述
FastAPI是一个高性能的Python Web框架,以其快速编码和代码清洁性著称,减少了开发者错误。它基于Starlette(一个ASGI框架)和Pydantic(用于数据验证)。Starlette提供了WebSocket支持、中间件等功能,而Pydantic利用Python类型提示在运行时进行数据验证。类型提示允许在编译时检查变量类型,提高开发效率。FastAPI通过Pydantic创建数据模型,确保数据结构的正确性。FastAPI还支持异步I/O,利用Python 3.6+的async/await关键词和ASGI,提高性能。此外,
37 0