Simplificando formulários no React com o UseForm

Os formulários em aplicações web podem ser complexos e difíceis de gerenciar, principalmente quando lidam com muitas validações e estados no React. Portanto, procurar maneiras que simplifiquem esse processo, podem ser ótimas alternativas.

Por este motivo, neste artigo, vamos explorar como usar o npm useForm para criar formulários eficientes e validados no React.

O que é o useForm?

Trata-se de uma biblioteca de gerenciamento de formulários para o React que foi projetada para facilitar o gerenciamento de estados, validações e manipulação de eventos. Ele foi desenvolvido para simplificar o processo de criação de formulários no React, permitindo que os desenvolvedores se concentrem na lógica de negócios em vez de se preocuparem com a manipulação detalhada de eventos e estados em formulários.

Primeiros passos

Você precisa instalá-lo como uma dependência em seu projeto. Basta executar o código abaixo:

npm install react-hook-form

Agora no componente que contém o formulário, comece importando o useForm.

import { useForm } from 'react-hook-form';

Agora mostrarei um exemplo de código, e em seguida, explicarei linha por linha

import { useForm } from 'react-hook-form'

export default function MeuFormulario() {

    const { register, handleSubmit, formState: { errors } } = useForm();

    function submit(data){
        console.log(data);
    // Lógica para lidar com os dados do formulário

    };

    return (
        <>        
            <form onSubmit={handleSubmit(submit)}>
                <input type='text' {...register('nome', {required:true, maxLength: 30 })} />
                {errors.nome?.type === 'required' && <span style={{color: 'red'}}>Campo obrigatório</span>}
                {errors.nome?.type === 'maxLength' && <span style={{color: 'red'}}>Máximo de 30 caracteres</span>}

                <input type='email' {...register('email', {required: true, pattern: /^\S+@\S+$/i})}/>
                {errors.email?.type === 'required' && <span style={{color: 'red'}}>Campo obrigatório</span>}
                {errors.email?.type === 'pattern' && <span style={{color: 'red'}}>E-mail inválido</span>}

                <input type="submit" value="Enviar" />
            </form>
        </>
    );
};

Neste exemplo, estamos usando duas funções retornadas pelo useForm, a Register e o HandleSubmit, e também, uma propriedade formState.

const { register, handleSubmit, formState: { errors } } = useForm();

Usa-se a handleSubmit como uma função que será acionada, sempre que, o formulário for submetido, a partir do evento, onSubmit.

export default function MeuFormulario() {

const { register, handleSubmit, formState: { errors } } = useForm();

  return ( <>
  <form onSubmit={handleSubmit(submit)}>
        <input type='text />
        <input type='email' />
        <input type="submit" value="Enviar" />
  </form>

  </>
  );
  };

Porém, perceba que essa função recebe como parâmetro o 'submit', que também é uma função, que será a responsável pela lógica dos dados submetidos no formulário.

export default function MeuFormulario() {

const { register, handleSubmit, formState: { errors } } = useForm();

function submit(data){
        console.log(data);
    // Lógica para lidar com os dados do formulário
    };

    return (
        <>        
            <form onSubmit={handleSubmit(submit)}>
              <input type='text />
              <input type='email' />
              <input type="submit" value="Enviar" />
            </form>
        </>
    );
};

Neste exemplo, a função submit, recebe o parâmetro data, que é irá retornar um objeto com os dados do formulário, conforme podemos observar com o console.log, abaixo:

Entretanto, a parte responsável por facilitar que o handleSubmit capture e valide os dados informados no formulário, é a função Register.

export default function MeuFormulario() {
const { register, handleSubmit, formState: { errors } } = useForm();

function submit(data){
        console.log(data);
    // Lógica para lidar com os dados do formulário
    };

    return (
        <>        
            <form onSubmit={handleSubmit(submit)}>
              <input type='text' {...register('nome', {required:true, maxLength: 30 })} />
                <input type='email' {...register('email', {required: true, pattern: /^\S+@\S+$/i})}/>
              <input type="submit" value="Enviar" />
            </form>
        </>
    );
};

Essa função precisa ser armazenada diretamente nos inputs para que estes sejam "registrados", e posteriormente, enviados para o handleSubmit.

O primeiro parâmetro da função register será o nome do input, que substitui a propriedade name, logo em seguida, é possível adicionar outros parâmetros, como o required para tornar o preenchimento do input obrigatório, maxLength, para quando há limitação de caracteres, e até mesmo o pattern, que permite validar os valores dos inputs por uma Expressão Regular (regex).

No código, ainda usamos o formState, que possui uma propriedade erros, que contém os erros associados a cada campo do formulário, com base em validações especificadas no register.

const { register, handleSubmit, formState: { errors } } = useForm();


function submit(data){
        console.log(data);
    };

    return (
        <>        
            <form onSubmit={handleSubmit(submit)}>
              input type='text' {...register('nome', {required:true, maxLength: 30 })} />
                {errors.nome?.type === 'required' && <span style={{color: 'red'}}>Campo obrigatório</span>}
                {errors.nome?.type === 'maxLength' && <span style={{color: 'red'}}>Máximo de 30 caracteres</span>}

                <input type='email' {...register('email', {required: true, pattern: /^\S+@\S+$/i})}/>
                {errors.email?.type === 'required' && <span style={{color: 'red'}}>Campo obrigatório</span>}
                {errors.email?.type === 'pattern' && <span style={{color: 'red'}}>E-mail inválido</span>}

             </form>
         </>
 );

No exemplo acima, exibimos mensagens de erro na tela usando a propriedade errors para indicar quando os campos são obrigatórios ou quando um e-mail inválido é inserido.

É importante ressaltar que o useForm também oferece várias outras funcionalidades igualmente úteis, e que você encontrar mais informações detalhadas e exemplos de uso na documentação oficial.

Porém, apenas com estes três recursos básicos, conseguimos, capturar as chaves e valores de um formulário facilmente, validar erros, e trabalhar com uma função específica para criar uma lógica com os dados capturados, como, por exemplo, quando há a necessidade de enviar informações preenchidas de um formulário para uma API.

Gostou do conteúdo? Fique à vontade para me seguir no Linkedin =)