@vtils/react | @vtils/react

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

Interfaces

Type aliases

Variables

createFunctionComponent

Functions

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

RequiredProp

RequiredProp<T>: object

Type parameters

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

buildFunctionComponentCreator<TExtraProps, TTransformedComponent>(options?: BuildFunctionComponentCreatorOptions<TExtraProps, TTransformedComponent>): FunctionComponentCreator<TExtraProps, TTransformedComponent>

- Defined in functionComponentCreator.ts:53
构造一个函数组件创建器。

Type parameters
- TExtraProps: MakePropsReturn
- TTransformedComponent: FunctionComponent
Parameters
- Default value options: BuildFunctionComponentCreatorOptions<TExtraProps, TTransformedComponent> = {}
  
  构造参数
Returns FunctionComponentCreator<TExtraProps, TTransformedComponent>

返回函数组件创建器

makeProps

makeProps<TDefaultProps>(defaultProps: TDefaultProps): MakePropsReturn<TDefaultProps>

- Defined in functionComponentCreator.ts:24
Type parameters
- TDefaultProps: Record<string, any>
Parameters
- defaultProps: TDefaultProps
Returns MakePropsReturn<TDefaultProps>

useEasyValidator

useEasyValidator<D>(data: D, rules: EasyValidatorRules<D>): UseEasyValidatorReturn<D>

数据校验器。

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

useLoadMore<TItem>(service: UseLoadMoreService<TItem>, deps: DependencyList): UseLoadMoreReturn<TItem>

- Defined in hooks/useLoadMore.ts:49
数据加载。

Type parameters
- TItem
Parameters
- service: UseLoadMoreService<TItem>
  
  数据加载服务
- deps: DependencyList
  
  依赖，依赖若发生变化则从首页重新加载数据
Returns UseLoadMoreReturn<TItem>

返回结果

useScrollLoadMore

useScrollLoadMore<TItem>(service: UseLoadMoreService<TItem>, deps: DependencyList, options?: UseScrollLoadMoreOptions): UseLoadMoreReturn<TItem>

- Defined in hooks/useScrollLoadMore.ts:34
滚动数据加载。

Type parameters
- TItem
Parameters
- service: UseLoadMoreService<TItem>
  
  数据加载服务
- deps: DependencyList
  
  依赖，依赖若发生变化则从首页重新加载数据
- Default value options: UseScrollLoadMoreOptions = {}
  
  滚动选项
Returns UseLoadMoreReturn<TItem>

返回结果

Generated using TypeDoc

vtils 在 React 中的应用。

安装

Index

Interfaces

Type aliases

Variables

Functions

Type aliases

BuildFunctionComponentCreatorOptions

Type parameters

TExtraProps: MakePropsReturn

TTransformedComponent: FunctionComponent

Type declaration

FunctionComponentCreator

Type parameters

TExtraProps: MakePropsReturn

TTransformedComponent

Type declaration

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

Type parameters

P

RequiredProp

Type parameters

T

Type declaration

UseLoadMoreServiceReturn

Type parameters

TItem

Variables

Const createFunctionComponent

Type declaration

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

Type parameters

TExtraProps: MakePropsReturn

TTransformedComponent: FunctionComponent

Parameters

Default value options: BuildFunctionComponentCreatorOptions<TExtraProps, TTransformedComponent> = {}

Returns FunctionComponentCreator<TExtraProps, TTransformedComponent>

makeProps

Type parameters

TDefaultProps: Record<string, any>

Parameters

defaultProps: TDefaultProps

Returns MakePropsReturn<TDefaultProps>

useEasyValidator

Type parameters

D: EasyValidatorData