@eduzz/ui-antd-hooks-form
v1.1.2
Published
Eduzz Hooks: Antd React Hooks Form
Downloads
32
Readme
Eduzz Hooks: Antd React Hooks Form
Implementação padrão do react-hook-form para validação de formulário com AntD.
Instalação
yarn add @eduzz/ui-antd-hooks-form
Tecnologias
- react-hook-form
- yup: Schema de validação
Como usar
Não é necessário o register de cada componente quando o Form componente é instanciado.
import useForm, { FormModel } from '@eduzz/ui-antd-hooks-form/useForm';
const form = useForm({
defaultValues: {
// Não é necessário iniciar os valores
money: 5
},
validationSchema: yup => {
// Caso não use uma schema pronto o yup será passado via arg
return yup.object({
name: yup.string(),
money: yup.number().min(10)
}),
}
});
// O FormModel é útil caso tenha criado uma schema nova no validationSchema
// do contrário o ideal é o infer do yup.
const onSubmit = useCallback((data: FormModel<typeof form>) => console.log({data}))
<Form context={form} onSubmit={data => console.log(data)}>
<Input label='Name' name='name' />
<Currency label='Money' name='money' />
<Button type='submit'>Submit</Button>
</Form>
Parametros
O único parametro especifico é o validationSchema, o resto é configuração padrão do react-hook-form.
| prop | tipo | obrigatório | descrição |
| ---------------- | ---------- | ----------- | -------------------------------------- |
| validationSchema | function
| true
| Utilizado para validação do formulário |
Componentes
Tipando o nome
Em todos os componentes é possível passar uma interface para poder tipar o name:
<Input<FormModel<typeof form>> label='Name' name='name' />
<Input<User> label='Name' name='name' />
<Input<User> label='Name' name='nivel.0.name' />