Options
All
  • Public
  • Public/Protected
  • All
Menu

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>

Index

Type aliases

BuildFunctionComponentCreatorOptions

BuildFunctionComponentCreatorOptions<TExtraProps, TTransformedComponent>: object

Type parameters

  • TExtraProps: MakePropsReturn

  • TTransformedComponent: FunctionComponent

Type declaration

FunctionComponentCreator

FunctionComponentCreator<TExtraProps, TTransformedComponent>: function

Type parameters

  • TExtraProps: MakePropsReturn

  • TTransformedComponent

Type declaration

    • <TInternalProps, TExternalProps, TInternalComponent>(Component: TInternalComponent): Merge<TTransformedComponent, FunctionComponent<TExternalProps>> & object
    • <TProps, TInternalProps, TExternalProps, TInternalComponent>(props: TProps, Component: TInternalComponent): Merge<TTransformedComponent, FunctionComponent<TExternalProps>> & object
    • Type parameters

      • TInternalProps: TExtraProps["InternalProps"]

      • TExternalProps: TExtraProps["ExternalProps"]

      • TInternalComponent: FunctionComponent<TInternalProps>

      Parameters

      • Component: TInternalComponent

      Returns Merge<TTransformedComponent, FunctionComponent<TExternalProps>> & object

    • Type parameters

      • TProps: MakePropsReturn

      • TInternalProps: Merge<TProps["InternalProps"], TExtraProps["InternalProps"]>

      • TExternalProps: Merge<TProps["ExternalProps"], TExtraProps["ExternalProps"]>

      • TInternalComponent: FunctionComponent<TInternalProps>

      Parameters

      • props: TProps
      • Component: TInternalComponent

      Returns Merge<TTransformedComponent, FunctionComponent<TExternalProps>> & object

PropsWithStyledHTMLAttributes

PropsWithStyledHTMLAttributes<P>: Merge<Pick<HTMLAttributes<any>, "style" | "className">, P>

Type parameters

  • P

RequiredProp

RequiredProp<T>: object

Type parameters

  • T

Type declaration

UseLoadMoreServiceReturn

UseLoadMoreServiceReturn<TItem>: TItem[] | object

Type parameters

  • TItem

Variables

Const createFunctionComponent

createFunctionComponent: function = buildFunctionComponentCreator()

Type declaration

    • <TInternalProps, TExternalProps, TInternalComponent>(Component: TInternalComponent): Merge<TTransformedComponent, FunctionComponent<TExternalProps>> & object
    • <TProps, TInternalProps, TExternalProps, TInternalComponent>(props: TProps, Component: TInternalComponent): Merge<TTransformedComponent, FunctionComponent<TExternalProps>> & object
    • Type parameters

      • TInternalProps: TExtraProps["InternalProps"]

      • TExternalProps: TExtraProps["ExternalProps"]

      • TInternalComponent: FunctionComponent<TInternalProps>

      Parameters

      • Component: TInternalComponent

      Returns Merge<TTransformedComponent, FunctionComponent<TExternalProps>> & object

    • Type parameters

      • TProps: MakePropsReturn

      • TInternalProps: Merge<TProps["InternalProps"], TExtraProps["InternalProps"]>

      • TExternalProps: Merge<TProps["ExternalProps"], TExtraProps["ExternalProps"]>

      • TInternalComponent: FunctionComponent<TInternalProps>

      Parameters

      • props: TProps
      • Component: TInternalComponent

      Returns Merge<TTransformedComponent, FunctionComponent<TExternalProps>> & object

Functions

buildFunctionComponentCreator

makeProps

  • makeProps<TDefaultProps>(defaultProps: TDefaultProps): MakePropsReturn<TDefaultProps>
  • Type parameters

    • TDefaultProps: Record<string, any>

    Parameters

    • defaultProps: TDefaultProps

    Returns MakePropsReturn<TDefaultProps>

useEasyValidator

  • 数据校验器。

    example
    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)
        }
      })
    }, [])

    Type parameters

    • D: EasyValidatorData

    Parameters

    • data: D

      数据

    • rules: EasyValidatorRules<D>

      校验规则

    Returns UseEasyValidatorReturn<D>

    返回包含验证函数的对象

useLiveEasyValidator

  • useLiveEasyValidator<D>(data: D, rules: EasyValidatorRules<D>): AsyncReturnType<validate>
  • 实时数据校验器。

    example
    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>
    )

    Type parameters

    • D: EasyValidatorData

    Parameters

    • data: D

      数据

    • rules: EasyValidatorRules<D>

      校验规则

    Returns AsyncReturnType<validate>

    返回包含验证函数的对象

useLoadMore

useScrollLoadMore

Legend

  • Module
  • Object literal
  • Variable
  • Function
  • Function with type parameter
  • Index signature
  • Type alias
  • Type alias with type parameter
  • Enumeration
  • Enumeration member
  • Property
  • Method
  • Interface
  • Interface with type parameter
  • Constructor
  • Property
  • Method
  • Index signature
  • Class
  • Class with type parameter
  • Constructor
  • Property
  • Method
  • Accessor
  • Index signature
  • Inherited constructor
  • Inherited property
  • Inherited method
  • Inherited accessor
  • Protected property
  • Protected method
  • Protected accessor
  • Private property
  • Private method
  • Private accessor
  • Static property
  • Static method

Generated using TypeDoc