@vtils/react

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