name: Visão geral

Formulários

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

Instalação

yarn add @eduzz/houston-forms

Técnologias

• react-hook-form
• zod: Schema de validação

Importação

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

Como usar

Não é necessário o register de cada componente quando o Form componente é instanciado.

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

const form = useForm({
  defaultValues: {
    // Não é necessário iniciar os valores
    money: 5
  },
  validationSchema: zod =>  {
    // Caso não use uma schema pronto o zod será passado via arg
    return zod.object({
      name: zod.string(),
      money: zod.number().min(10)
    }),
  }
});

// O FormModel é útil caso tenha criado uma schema nova no validationSchema
// do contrário o ideal é o infer do zod.
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 |