Skip to content

naxida-eth/react-plugin

Repository files navigation

关于

hello,这里是记录自己常用的 react 插件库

UI

使用 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",
}

2022-10-28 react-modal

模态框组件, 样式简单,需要自定义

yarn add react-modal

react-modal

wiki

2022-10-21 react-number-format

yarn add react-number-format

react-number-format

wiki

提升用户输入 文本/数字 时的体验

2022-10-09 react-responsive

yarn add react-responsive

react-responsive

home

可以在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>
  )

2022-10-08 react-grid-gallery

瀑布流图片组件

yarn add react-grid-gallery

react-grid-gallery

demo

2022-09-30 react-virtuoso

虚拟列表组件

yarn add react-virtuoso

react-virtuoso

home

2022-09-27 react-circular-input

圆形数字输入组件

yarn add react-circular-input

react-circular-input

home

demo

2022-09-23 react-select

select下拉组件

yarn add react-select

react-select

home

2022-09-20 little-state-machine

react 状态管理工具

yarn add little-state-machine

little-state-machine

demo

2022-09-16 @react-three/xr

react 开发VR/AR

yarn add @react-three/xr

@react-three/xr

2022-09-13 react-day-picker

react日历组件

yarn add react-day-picker

react-day-picker

2022-09-05 react-use-please-stay

favicon 图片和title监听替换

yarn add react-use-please-stay

react-use-please-stay

2022-09-02 react-swipeable-views

滑动item组件,很流畅

yarn add react-swipeable-views

react-swipeable-views

demo



### 2022-09-01 qrcode.react

二维码生成插件

```cmd  
yarn add qrcode.react

qrcode.react

2022-08-30 yup

yup 数据校验插件

yarn add yup

yup

api

2022-08-30 react-hook-form

react form 表单处理组件可以配合yup 进行输入验证

yarn add react-hook-form

react-hook-form

api

yarn add @hookform/resolvers yup

与yup配合

2022-08-18 react-rating

评分插件 ⭐️⭐️⭐️⭐️⭐️

yarn add react-rating

react-rating

demo

2022-08-17 gapi-script

谷歌第三方登录 这个插件可以获取id_token

yarn add gapi-script

md

2022-08-16 twittersignin

twitter第三方登录,这是个nodejs插件

yarn add twittersignin

twittersignin

2022-08-12 react-facebook-login

facebook第三方登录插件

yarn add react-facebook-login

react-facebook-login

2022-08-12 react-oauth

谷歌第三方登录插件

yarn add react-oauth

react-oauth

demo

2022-08-10 rc-tabs

rc-tab 从antd中抽离出来的经典tab组件

yarn add rc-tabs

rc-tabs

demo

2022-08-09 monaco-react

将vscode编辑器内置到网页中的插件

yarn add monaco-react

monaco-react

demo

2022-08-08 use-clipboard-copy

轻量级的react剪切板插件

yarn add use-clipboard-copy

use-clipboard-copy

2022-08-05 react-datasheet

创建电子表格的组件

yarn add react-datasheet

react-datasheet

demo

2022-08-04 react-error-boundary

错误边界捕获组件

yarn add react-error-boundary

react-error-boundary

2022-08-03 react-chrono

时间旅行组件 时间轴,带轮播和扩展文本

yarn add react-chrono

react-chrono

2022-07-27 react-switch

react switch组件 开关组件

yarn add react-switch

react-switch

demo

2022-07-26 react-super-responsive-table

兼容移动端table组件

yarn add react-super-responsive-table

react-super-responsive-table

demo

2022-07-25 react-hot-toast

可自定义的通知组件

yarn add react-hot-toast

react-hot-toast

demo

2022-07-19 rc-select

经典的select组件

yarn add rc-select

react-component/select

2022-07-18 react-click-away-listener

监听何时点击组件外部的组件

yarn add react-click-away-listener

react-click-away-listener

2022-07-14 react-search-autocomplete

带模糊搜索和定制过滤,自动补全的搜索组件

yarn add react-search-autocomplete

react-search-autocomplete

demo

2022-07-13 react-use-websocket

react中的websocket插件

yarn add react-use-websocket

react-use-websocket

demo

2022-07-12 react-toastify

样式很好看的通知组件

yarn add react-toastify

react-toastify

demo

2022-07-11 react-countup

数字变换的显示组件

yarn add react-countup

react-countup

2022-07-11 reactime

chrome的时间调试工具

reactime

2022-07-07 rc-image

antd中抽离的图像组件

yarn add rc-image

rc-image

api

2022-07-05 react-easy-crop

图片裁剪组件

yarn add react-easy-crop

react-easy-crop

demo

2022-07-04 react-timeago

时间处理组件

yarn add react-timeago

传入任意格式的时间,会与当前时间对比后返回 例如 3 天前 等时间格式.

react-timeago

2022-06-28 react-range

react 滑动条,接到需求需要做一个双向滑动条的筛选,体验不错的滑动插件。

yarn add react-range

react-range

2022-06-21 react-pin-field

验证码输入插件

yarn add react-pin-field

react-pin-field

2022-06-16 react-collapsible

文本折叠插件

yarn add react-collapsible

react-collapsible

2022-06-15 react-stick

悬浮插件、比较原始,自定义比较好

yarn add react-stick

react-stick

demo

2022-06-15 react-smooth-corners

圆角插件,设计的很好看

yarn add react-smooth-corners

react-smooth-corners

demo

2022-06-07 react-query

接口请求插件,省心

yarn add react-query

react-query

api

2022-06-06 react-medium-image-zoom

图片缩放插件

yarn add react-medium-image-zoom

react-medium-image-zoom

code

2022-06-01 react-datepicker

日期选择插件

yarn add react-datepicker

react-datepicker

code

2022-06-01 any-touch

页面手势插件:点击、拖拽、滑动、双指缩放、双指旋转等。

yarn add any-touch

any-touch

2022-05-24 react-page-transition

很好看的页面加载动画插件

yarn add @steveeeie/react-page-transition

react-page-transition

code

2022-05-24 styled-components

敏捷开发样式的插件。非常快! css-in-js库中的经典插件

yarn add styled-components

react-spring

api

2022-05-20 react-spring

好用的 react 动画组件

yarn add react-spring

react-spring

api

2022-05-19 react-gridsheet

简易表格组件

yarn add react-gridsheet

react-gridsheet

code: https://codesandbox.io/s/react-gridsheet-with-formula-forked-27ztur?file=/src/App.tsx

2022-05-16 react-simply-carousel

轻量化的轮播图组件,可定制,支持 SSR

yarn add react-simply-carousel

react-simply-carousel

code: https://github.com/WuMing1998/react-plugin/blob/main/src/pages/CarouselPage/index.tsx

2022-05-12 react-dropzone

图片拖拽上传插件

yarn add react-dropzone

react-dropzone

code: https://github.com/WuMing1998/react-plugin/blob/main/src/pages/Dropzone/index.tsx

2022-05-09 use-clamp-text

react 多行文本处理的 hook

yarn add use-clamp-text

use-clamp-text

code: https://github.com/WuMing1998/react-plugin/blob/main/src/components/ClampText/index.tsx

2022-05-05 react-transition-group

react 动画插件,可以比较自由的定制自己的动画

yarn add react-transition-group

react-transition-group

api

code: https://github.com/WuMing1998/react-plugin/blob/main/src/components/Transition/index.tsx

2022-05-04 react-quick-pinch-zoom

图片双指缩放插件

yarn add react-quick-pinch-zoom

react-quick-pinch-zoom

api

code: https://github.com/WuMing1998/react-plugin/blob/main/src/components/QuickPinch/index.tsx

2022-04-28 react-loading-skeleton

react 骨架屏插件

yarn add react-loading-skeleton

react-loading-skeleton

code: https://github.com/WuMing1998/react-plugin/blob/main/src/components/Popper/index.tsx

2022-04-27 react-popper

消息提示库

yarn add react-popper @popperjs/core

react-popper wiki

code: https://github.com/WuMing1998/react-plugin/blob/main/src/components/Skeleton/index.tsx

2022-04-25 react-media

移动端适配解决方案之一

yarn add react-media@next

react-media

const.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;

About

记录react的插件

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published