hello,这里是记录自己常用的 react 插件库
使用 antd
yarn add antd react-app-rewired customize-cra babel-plugin-import创建 config-overriders.js
const { override, fixBabelImports } = require("customize-cra");
module.exports = override(
fixBabelImports("import", {
libraryName: "antd",
libraryDirectory: "es",
style: "css",
})
);修改 package.json
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
}模态框组件, 样式简单，需要自定义
yarn add react-modalyarn add react-number-format提升用户输入 文本/数字 时的体验
yarn add react-responsive可以在js中编写media媒体查询代码
例如:
hook
import React from 'react'
import { useMediaQuery } from 'react-responsive'
const Example = () => {
const isDesktopOrLaptop = useMediaQuery({
query: '(min-width: 1224px)'
})
const isBigScreen = useMediaQuery({ query: '(min-width: 1824px)' })
const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' })
const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' })
return <div>
<h1>Device Test!</h1>
{isDesktopOrLaptop && <p>You are a desktop or laptop</p>}
{isBigScreen && <p>You have a huge screen</p>}
{isTabletOrMobile && <p>You are a tablet or mobile phone</p>}
<p>Your are in {isPortrait ? 'portrait' : 'landscape'} orientation</p>
{isRetina && <p>You are retina</p>}
</div>
}components
import MediaQuery from 'react-responsive'
const Example = () => (
<div>
<h1>Device Test!</h1>
<MediaQuery minWidth={1224}>
<p>You are a desktop or laptop</p>
<MediaQuery minWidth={1824}>
<p>You also have a huge screen</p>
</MediaQuery>
</MediaQuery>
<MediaQuery minResolution="2dppx">
{/* You can also use a function (render prop) as a child */}
{(matches) =>
matches
? <p>You are retina</p>
: <p>You are not retina</p>
}
</MediaQuery>
</div>
)瀑布流图片组件
yarn add react-grid-gallery虚拟列表组件
yarn add react-virtuoso圆形数字输入组件
yarn add react-circular-inputselect下拉组件
yarn add react-selectreact 状态管理工具
yarn add little-state-machinereact 开发VR/AR
yarn add @react-three/xrreact日历组件
yarn add react-day-pickerfavicon 图片和title监听替换
yarn add react-use-please-stay滑动item组件，很流畅
yarn add react-swipeable-views
### 2022-09-01 qrcode.react
二维码生成插件
```cmd
yarn add qrcode.react
yup 数据校验插件
yarn add yupreact form 表单处理组件可以配合yup 进行输入验证
yarn add react-hook-formyarn add @hookform/resolvers yup评分插件 ⭐️⭐️⭐️⭐️⭐️
yarn add react-rating谷歌第三方登录 这个插件可以获取id_token
yarn add gapi-scripttwitter第三方登录，这是个nodejs插件
yarn add twittersigninfacebook第三方登录插件
yarn add react-facebook-login谷歌第三方登录插件
yarn add react-oauthrc-tab 从antd中抽离出来的经典tab组件
yarn add rc-tabs将vscode编辑器内置到网页中的插件
yarn add monaco-react轻量级的react剪切板插件
yarn add use-clipboard-copy创建电子表格的组件
yarn add react-datasheet错误边界捕获组件
yarn add react-error-boundary时间旅行组件 时间轴，带轮播和扩展文本
yarn add react-chronoreact switch组件 开关组件
yarn add react-switch兼容移动端table组件
yarn add react-super-responsive-table
可自定义的通知组件
yarn add react-hot-toast经典的select组件
yarn add rc-select监听何时点击组件外部的组件
yarn add react-click-away-listener带模糊搜索和定制过滤，自动补全的搜索组件
yarn add react-search-autocompletereact中的websocket插件
yarn add react-use-websocket样式很好看的通知组件
yarn add react-toastify数字变换的显示组件
yarn add react-countupchrome的时间调试工具
antd中抽离的图像组件
yarn add rc-image图片裁剪组件
yarn add react-easy-crop时间处理组件
yarn add react-timeago传入任意格式的时间,会与当前时间对比后返回 例如 3 天前 等时间格式.
react 滑动条，接到需求需要做一个双向滑动条的筛选，体验不错的滑动插件。
yarn add react-range验证码输入插件
yarn add react-pin-field文本折叠插件
yarn add react-collapsible悬浮插件、比较原始，自定义比较好
yarn add react-stick圆角插件，设计的很好看
yarn add react-smooth-corners接口请求插件，省心
yarn add react-query图片缩放插件
yarn add react-medium-image-zoom日期选择插件
yarn add react-datepicker页面手势插件：点击、拖拽、滑动、双指缩放、双指旋转等。
yarn add any-touch很好看的页面加载动画插件
yarn add @steveeeie/react-page-transition敏捷开发样式的插件。非常快！ css-in-js库中的经典插件
yarn add styled-components好用的 react 动画组件
yarn add react-spring简易表格组件
yarn add react-gridsheetcode: https://codesandbox.io/s/react-gridsheet-with-formula-forked-27ztur?file=/src/App.tsx
轻量化的轮播图组件，可定制，支持 SSR
yarn add react-simply-carouselcode: https://github.com/WuMing1998/react-plugin/blob/main/src/pages/CarouselPage/index.tsx
图片拖拽上传插件
yarn add react-dropzonecode: https://github.com/WuMing1998/react-plugin/blob/main/src/pages/Dropzone/index.tsx
react 多行文本处理的 hook
yarn add use-clamp-textcode: https://github.com/WuMing1998/react-plugin/blob/main/src/components/ClampText/index.tsx
react 动画插件，可以比较自由的定制自己的动画
yarn add react-transition-groupcode: https://github.com/WuMing1998/react-plugin/blob/main/src/components/Transition/index.tsx
图片双指缩放插件
yarn add react-quick-pinch-zoomcode: https://github.com/WuMing1998/react-plugin/blob/main/src/components/QuickPinch/index.tsx
react 骨架屏插件
yarn add react-loading-skeletoncode: https://github.com/WuMing1998/react-plugin/blob/main/src/components/Popper/index.tsx
消息提示库
yarn add react-popper @popperjs/corecode: https://github.com/WuMing1998/react-plugin/blob/main/src/components/Skeleton/index.tsx
移动端适配解决方案之一
yarn add react-media@nextconst.ts
export const GLOBAL_MEDIA_QUERIES = {
small: "(max-width: 599px)",
medium: "(min-width: 600px) and (max-width: 1199px)",
large: "(min-width: 1200px)",
} as const;PMedia.tsx
import { useMedia } from "react-media";
import { GLOBAL_MEDIA_QUERIES } from "../const";
const PMedia = () => {
const matches = useMedia({ queries: GLOBAL_MEDIA_QUERIES });
const getNowMedia = () => {
if (matches.large) {
return "large";
} else if (matches.medium) {
return "medium";
} else if (matches.small) {
return "small";
}
};
return <>now media? {getNowMedia()}</>;
};
export default PMedia;