您的当前位置:首页>全部文章>文章详情

【React】16 个实用的 React 库

CrazyPanda发表于:2024-04-01 15:35:18浏览:297次TAG:

Web开发中,经常会需要使用第三方库来提高开发效率。

今天给大家分享16个非常实用的React第三方库,使用好这些库你可以更轻松、更快速的开发项目,让我们一起看看吧!

1.react-hook-form

1.png

React-hook-form 是一个用于构建 Web 应用程序的表单库。它支持多种表单类型,包括输入框、下拉框、单选框、多选框等。它还提供了一些自定义选项,可以自定义表单的外观和行为。

官方地址:https://react-hook-form.com/

2.recharts

1.png

Recharts 是一个用于构建 Web 应用程序的图表库。它是基于 React 和 D3 的,提供了一些简单易用的 API,可以轻松地实现各种类型的图表。Recharts 支持多种图表类型,包括线图、柱状图、饼图、雷达图等。

官方地址:https://recharts.org/

3.react-big-calendar

1.png

React-big-calendar 是一个用于构建 Web 应用程序的日历库。 React-big-calendar 支持多种日历类型,包括月视图、周视图、日视图等。 React-big-calendar 还支持多种平台,包括 Web、React Native 等。React-big-calendar 的一个优点是它的灵活性,可以根据需要自定义日历的各个方面,包括事件的显示方式、时间的格式、时区等。

官方地址:https://jquense.github.io/react-big-calendar/examples/index.html?path=/story/about-big-calendar--page

4.react-beautiful-dnd

1.png

React-beautiful-dnd 是一个用于构建 Web 应用程序的拖放库。 React-beautiful-dnd 支持多种拖放类型,包括列表、网格、树形结构等。

官方地址:https://react-beautiful-dnd.netlify.app

5.react-table

1.png

React-table 是一个用于构建 Web 应用程序的表格库。 React-table 支持多种表格类型,包括排序、筛选、分页等。

React-table 的一个优点是它的灵活性,可以根据需要自定义表格的各个方面,包括列的宽度、排序规则、筛选条件等。

官方地址:https://tanstack.com/table/v8/docs/adapters/react-table

6.react-joyride

1.png

React-joyride 是一个用于构建 Web 应用程序的用户引导库。React-joyride 支持多种引导类型,包括步骤、提示、高亮等。它还提供了一些自定义选项,可以自定义引导的外观和行为。React-joyride 还支持多种平台,包括 Web、React Native 等。

官方地址:https://react-joyride.com/

7.react-advanced-cropper

1.png

React-advanced-cropper 是一个用于构建 Web 应用程序的图片裁剪库。它提供了一些高级的裁剪功能,包括旋转、缩放、裁剪、翻转等。React-advanced-cropper 还支持多种裁剪模式,包括自由裁剪、固定比例裁剪、固定尺寸裁剪等。

官方地址:https://advanced-cropper.github.io/react-advanced-cropper/#mobile-cropper

8.react-colorful

1.png

React-colorful 是一个用于构建 Web 应用程序的颜色选择器库。它提供了一些简单易用的 API,可以轻松地实现颜色选择器的功能。React-colorful 支持多种颜色格式,包括 RGB、HSL、HSV、HEX 等。它还提供了一些自定义选项,可以自定义颜色选择器的外观和行为。

官方地址:https://omgovich.github.io/react-colorful/

9.react-spring

1.png

React-spring 是一个用于构建高性能、交互式 Web 应用程序的动画库。它使用了 Spring 动画库的物理模型,可以实现流畅的动画效果。React-spring 可以用于创建各种类型的动画,包括过渡、滚动、拖拽等。它提供了一些简单易用的 API,可以轻松地实现复杂的动画效果。React-spring 还支持多种平台,包括 Web、React Native 等。

官方地址:https://www.react-spring.dev

10.react-tsparticles

1.png

React-tsparticles 是一个基于 tsParticles 库的 React 组件,用于在 React 应用中创建粒子效果。tsParticles 是一个用于创建粒子效果的 JavaScript 库,它支持多种粒子类型、颜色、形状、大小、速度、方向等属性的自定义配置,同时也支持多种交互效果,如鼠标悬停、点击、拖拽等。

官方地址:https://particles.js.org/docs/

11.react-popper

1.png

React-popper 是一个基于 Popper.js 的 React 库,用于创建弹出式组件,如下拉菜单、提示框、工具提示等。Popper.js 是一个用于计算弹出式组件位置的库,它可以根据目标元素和弹出式组件的大小、位置、偏移量等信息,计算出最佳的弹出位置,以确保弹出式组件不会超出屏幕边界或被其他元素遮挡。

官方地址:https://popper.js.org/react-popper/

12.react-pdf-viewer

1.png

`react-pdf-viewer` 是一个用于 React 应用程序的 PDF 阅读器组件库。 支持多种功能,例如缩放、旋转、搜索、导航、书签、注释等。

官方地址:https://react-pdf-viewer.dev/

13.react-i18next

1.png

`react-i18next` 是一个用于 React 应用程序的国际化库。它提供了一种简单的方式来实现多语言支持。 使用 `react-i18next`,您可以轻松地将您的应用程序本地化为多种语言 。

官方地址:https://react.i18next.com/

14.react-icons

1.png

非常实用的react 图标库,包含了上万种图标。

官方地址:https://react-icons.github.io/react-icons/

15.audio-player

1.png

Audio Player 提供了一个简单的API,可以让您轻松地在网页上添加音频播放器,并控制音频的播放、暂停、音量等功能。

官方地址:https://audioplayer.madza.dev/

16.Swiper

1.png

React Swiper是一个基于React的轮播组件,它可以让您轻松地创建响应式的、可定制的轮播效果。它是基于Swiper.js构建的,Swiper.js是一个流行的轮播库,它提供了许多功能和选项,例如自动播放、分页器、导航按钮、滑动方向、循环播放等等。

React Swiper提供了一个简单的API,您可以使用它来配置和控制轮播效果。它还提供了许多可定制的选项,例如轮播速度、轮播方向、分页器样式、导航按钮样式等等。您可以使用CSS来自定义轮播的外观和样式。

React Swiper还支持响应式设计,它可以根据屏幕大小和设备类型自动调整轮播效果。这使得它非常适合在移动设备上使用。

官方地址:https://swiperjs.com/get-started

组件库其实我们也可以自己开发,但是会花费很多时间,以上分享的第三方库会帮助我们减少很多开发时间,平时开发一定要使用上。


猜你喜欢

【AntDesignPro】Ant Design Pro学习记录—默认主题配色修改
 版本: Ant Design Pro V5先参考下官网定制主题 - Ant Design再参考这篇文章antd pro 修改全局样式_tankpanv的博客-CSDN博客_antd修改全局样式最后自己实验:第一步,在config.ts文件中配置theme: {     'primary-color': defaultSettings.primaryColor,   },这种配置需
发表于:2023-11-28 浏览:777 TAG:
【AntDesignPro】L7Plot地理可视化组件的使用
L7Plot介绍L7Plot 基于 L7 实现的开箱即用地理空间数据可视化图表库L7Plot 专注于地理可视化图表。以声明配置式的方式,降低用户使用成本;以常见地理图表分类的方式,降低用户选择成本;内部集成全国行政区域数据,降低用户使用地理数据心智;支持多图层及多图表层叠,方便用户定制复杂的业务场景;L7Plot 专注于地理数据可视化展示,不会涉及数据编辑能力。前言项目需要,使用antdesignpro做前端,并绘制可视化大屏,回执地图组件,于是使用了L7Plot。功能目的绘
发表于:2023-12-14 浏览:657 TAG:
【React】React前端图片裁剪组件
前端图片裁剪组件前端图片裁剪已经是很常见的需求了,在 react 的项目中推荐使用 react-image-crop 库,能勾勒出裁剪区域、宽高比例限制等等,但是还是有很多东西需要我们来做的,比如以下问题:react-image-cropreact-image-crop 的基本使用import ReactCrop from "react-image-crop"; import "react-image-crop/dist/Re
发表于:2024-03-29 浏览:302 TAG:
【AntDesignPro】使用高德地图设置考勤区域
参考高德开放平台https://lbs.amap.com/api/javascript-api-v2/guide/abc/amap-react功能要求:使用AntDesignPro开发系统管理端,考勤模块需要设置APP考勤打卡区域,需要页面显示地图定位并设置考勤范围(地图上画圈),以便APP在画圈范围内打卡使用。1、 准备2、 下载react类组件代码参考官网流程,可正常加载出地图组件,下面是我的页面和组件文件组件文件3、 安装并引入AmAP Loadernpm i @ama
发表于:2023-12-14 浏览:737 TAG:
【AntDesignPro】Ant Design Pro学习记录—ProTable的使用(二)
目录一、列表检索初始值设置二、字段缩略显示一、列表检索初始值设置使用initialValue属性,配置列表检索的初始值const columns: ProColumns<API.RoomItem>[] = [     {      title: '名称',     &nb
发表于:2023-11-28 浏览:700 TAG:
【React】react页面加载远程css和js
在React中,您可以使用componentDidMount生命周期方法来动态加载远程CSS和JavaScript文件。代码如下import React, { Component } from 'react';   class DynamicResources extends Component {   componentDidMount()&nbs
发表于:2024-05-15 浏览:268 TAG:
【React】前端框架 React 学习总结
目录一、React在HTML里的运用二、React框架的常用操作项目打包1、JSX基础语法规则2、state数据的使用3、生命周期4、数据的双向绑定与Ref5、PropTypes验证规则6、React里的插槽7、错误边界8、直接操作refs元素9、高阶组件的运用案例10、性能优化11、Hook生命周期钩子的使用12、React里的计算属性三、组件之间的传值1、父子组件之间传值2、子向父传值3、context实现跨层级通信context hook案例四、网络请求框架使用五、React路由的使用声明
发表于:2023-12-05 浏览:879 TAG: #php
【React】react面试题
React面试题文章目录React面试题一、react特性***React与Vue的区别*******1. Jsx的使用规范*******1.说说对 React 的理解?有哪些特性?DOM2.说说 Real DOM 和 Virtual DOM 的区别?优缺点?*******说说React中的虚拟dom?在虚拟dom计算的时候diff和key之间有什么关系*******3.说说React Jsx转换成真实DOM过程?4.说说你第mvc和mvvm的理解5.说说react中引入css的方式有哪几种?区
发表于:2023-12-05 浏览:1402 TAG:
【React】如何在 React 类中声明常量?
使用 react 开发应用程序时,有必要声明常量来存储在组件或应用程序的整个生命周期中保持不变的值。常量可以帮助提高代码可读性,提供管理共享值的中心位置,并增强可维护性。在本文中,我们将探讨如何在 react 类组件中声明常量。导入 React首先,我们假设您已经设置了 React 环境并且有一个可供使用的类组件。在声明常量之前,请确保您已导入必要的库。这包括导入 React,它是在 React 中构建用户界面的核心库。import React from '
发表于:2024-04-16 浏览:297 TAG:
【AntDesignPro】Ant Design Pro学习记录—ModalForm的使用(二)
 目录一、ModalForm高度设置二、ModalForm点击阴影背景,不隐藏弹框三、ProFormSelect联动四、ProFormText关联赋值一、ModalForm高度设置在modalProps中设置bodyStyle:{height:500,overflowY:'scroll'}编辑效果如下:编辑二、ModalForm点击阴影背景,不隐藏弹框同样在modalProps里面,配置maskClosable: false,就可以实现点击弹框外阴影,不隐藏弹框<
发表于:2023-11-28 浏览:1179 TAG: