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

• Input.
• Textarea.
• Select.
• DatePicker.
• TimePicker.
• Checkbox.
• Radio.
• Switch.
• ErrorMessage.
• Form.

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' />