@vtils/react
TypeScript icon, indicating that this package has built-in type declarations

2.59.0 • Public • Published

logo

NPM Version Build Status Coverage Status Size Gzip Size License

vtils 在 React 中的应用。

https://fjc0k.github.io/vtils/react

安装

# yarn
yarn add @vtils/react

# or, npm
npm i @vtils/react --save

你也可通过 CDN 安装,然后使用全局变量 vr 访问相关工具:

<script src="https://cdn.jsdelivr.net/npm/@vtils/react@2.59.0/lib/index.umd.min.js" crossorigin="anonymous"></script>

目录

👇 👇 👇 👇
buildFunctionComponentCreator makeProps useEasyValidator useLiveEasyValidator
useLoadMore useScrollLoadMore

列表

buildFunctionComponentCreator

源码 | API | 回目录

构造一个函数组件创建器。

makeProps

源码 | API | 回目录

useEasyValidator

源码 | API | 回目录

数据校验器。

const [name, setName] = useState('')
const [pass, setPass] = useState('')
const ev = useEasyValidator({ name, pass }, [
  {
    key: 'name',
    required: true,
    message: '姓名不能为空',
  },
  {
    key: 'pass',
    test: data => data.pass.length >= 6,
    message: '密码至少应为6位',
  },
])
const handleRegisterClick = useCallback(() => {
  ev.validate().then(res => {
    if (res.valid) {
      console.log(res.data)
    } else {
      console.log(res.firstUnvalidRuleMessage)
    }
  })
}, [])

useLiveEasyValidator

源码 | API | 回目录

实时数据校验器。

const [name, setName] = useState('')
const [pass, setPass] = useState('')
const evResult = useLiveEasyValidator({ name, pass }, [
  {
    key: 'name',
    required: true,
    message: '姓名不能为空',
  },
  {
    key: 'pass',
    test: data => data.pass.length >= 6,
    message: '密码至少应为6位',
  },
])
const button = (
  <Button disabled={!evResult.valid}>
    提交
  </Button>
)

useLoadMore

源码 | API | 回目录

数据加载。

useScrollLoadMore

源码 | API | 回目录

滚动数据加载。

许可

MIT ©️ Jay Fong

Readme

Keywords

Package Sidebar

Install

npm i @vtils/react

Weekly Downloads

0

Version

2.59.0

License

MIT

Unpacked Size

186 kB

Total Files

13

Last publish

Collaborators

  • funch