Formulários#

Implementação padrão do react-hook-form para validação de formulário.

Instalação#

bash
1
yarn add @eduzz/houston-forms

Técnologias#

• react-hook-form

• zod: Schema de validação

Importação#

js
1
import useForm from '@eduzz/houston-forms/useForm';

Como usar#

tsx
1
import useForm, { FormModel } from '@eduzz/houston-forms/useForm';
2

3
const form = useForm({
4
  defaultValues: {
5
    // Não é necessário iniciar os valores
6
    money: 5
7
  },
8
  validationSchema: zod =>  {
9
    // Caso não use uma schema pronto o zod será passado via arg
10
    return zod.object({
11
      name: zod.string(),
12
      money: zod.number().min(10)
13
    }),
14
  }
15
});
16

17
// O FormModel é útil caso tenha criado uma schema nova no validationSchema
18
// do contrário o ideal é o infer do zod.
19
const onSubmit = useCallback((data: FormModel<typeof form>) => console.log({data}))
20

21
<Form context={form} onSubmit={data => console.log(data)}>
22
  <Input label='Name' name='name' />
23
  <Currency label='Money' name='money' />
24

25
  <Button type='submit'>Submit</Button>
26
</Form>

Parametros#

O único parametro especifico é o validationSchema, o resto é configuração padrão do react-hook-form.