Guías Técnicas

Guía Completa: React Hook Form con Ejemplos Prácticos

React Hook Form es una librería ligera para manejar formularios en React con enfoque en la validación y rendimiento. Aquí te comparto ejemplos prácticos para empezar a usarla.

Instalación

Si estás usando npm, ejecuta el siguiente comando en tu terminal:

bash 
npm install react-hook-form

Si prefieres usar yarn, puedes instalarlo con:

bash 
yarn add react-hook-form

Una vez instalada, ya puedes empezar a utilizarla para gestionar formularios en tus componentes de React.

1. Formulario Básico

jsx 
import { useForm } from "react-hook-form";

function BasicForm() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name")} placeholder="Nombre" />
      <button type="submit">Enviar</button>
    </form>
  );
}
  Explicación

Este ejemplo crea un formulario básico que registra el campo name usando useForm de React Hook Form. Al enviar, handleSubmit captura y muestra los datos ingresados en la consola.

2. Validación Requerida

jsx 
function RequiredValidation() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  
  return (
    <form onSubmit={handleSubmit(console.log)}>
      <input {...register("email", { required: "Email es obligatorio" })} placeholder="Email" />
      {errors.email && <p>{errors.email.message}</p>}
      <button type="submit">Enviar</button>
    </form>
  );
}
  Explicación

Este ejemplo agrega validación al campo email, marcándolo como obligatorio. Si el usuario intenta enviar el formulario sin completarlo, se muestra el mensaje de error definido. Usa errors para manejar y mostrar mensajes personalizados.

3. Validaciones Personalizadas

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

  return (
    <form onSubmit={handleSubmit(console.log)}>
      <input 
        {...register("age", { 
          validate: (value) => value > 18 || "Debes ser mayor de 18 años" 
        })} 
        placeholder="Edad"
      />
      {errors.age && <p>{errors.age.message}</p>}
      <button type="submit">Enviar</button>
    </form>
  );
}
  Explicación

Este ejemplo valida que el valor del campo **age sea mayor a 18 mediante una función personalizada. Si no cumple, se muestra un mensaje de error definido. Es útil para reglas específicas que no están predefinidas en React Hook Form.

4. Manejo de Selects

jsx 
const SelectForm = () => {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <select {...register('pais')}>
        <option value="">Selecciona un país</option>
        <option value="Argentina">Argentina</option>
        <option value="Mexico">México</option>
        <option value="Colombia">Colombia</option>
        <option value="Venezuela">Venezuela</option>
      </select>
      <button type="submit">Enviar</button>
    </form>
  );
};
  Explicación

Permite registrar un campo de selección (select) donde el usuario puede elegir un país. Al enviar el formulario, se captura el valor seleccionado y se imprime en la consola.

5. Checkbox y Radio Buttons

jsx 
function CheckRadioFields() {
  const { register, handleSubmit } = useForm();

  return (
    <form onSubmit={handleSubmit(console.log)}>
      <label>
        <input {...register("subscribe")} type="checkbox" />
        Suscribirse
      </label>
      <label>
        <input {...register("gender")} type="radio" value="male" />
        Masculino
      </label>
      <label>
        <input {...register("gender")} type="radio" value="female" />
        Femenino
      </label>
      <button type="submit">Enviar</button>
    </form>
  );
}
  Explicación

Maneja inputs de tipo checkbox y radio para capturar múltiples opciones de usuario. El formulario registra si el usuario se suscribe y su género seleccionado, enviando los datos al enviarse el formulario.

6. Formulario de Contacto Completo

jsx 
const ContactForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input 
        {...register('name', { required: 'Nombre obligatorio' })} 
        placeholder="Nombre" 
      />
      <input 
        {...register('email', { 
          required: 'Email obligatorio',
          pattern: {
            value: /^S+@S+$/i,
            message: 'Email inválido'
          }
        })} 
        placeholder="Email" 
      />
      <textarea 
        {...register('message', { 
          required: 'Mensaje obligatorio',
          maxLength: {
            value: 500,
            message: 'Máximo 500 caracteres'
          }
        })} 
        placeholder="Mensaje" 
      />
      {errors.name && <span>{errors.name.message}</span>}
      {errors.email && <span>{errors.email.message}</span>}
      {errors.message && <span>{errors.message.message}</span>}
      <button type="submit">Enviar</button>
    </form>
  );
};
  Explicación

Define un formulario de contacto con validaciones avanzadas en los campos name, email y message. Incluye requisitos como formato válido para el correo y un límite de caracteres para el mensaje. Muestra errores específicos junto a cada campo si las validaciones no se cumplen.

7. Campo Controlado

jsx 
function FieldSpecificError() {
  const { register, handleSubmit, setError, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    if (data.username !== "admin") {
      setError("username", { type: "manual", message: "Usuario incorrecto" });
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("username")} placeholder="Usuario" />
      {errors.username && <p>{errors.username.message}</p>}
      <button type="submit">Enviar</button>
    </form>
  );
}
  Explicación

Permite establecer errores manualmente usando setError. Si el usuario no ingresa “admin” en el campo username, se muestra un mensaje de error personalizado.

8. Manejo de Arrays

jsx 
import { useFieldArray, useForm } from "react-hook-form";

function ArrayFields() {
  const { register, control, handleSubmit } = useForm();
  const { fields, append } = useFieldArray({ control, name: "items" });

  return (
    <form onSubmit={handleSubmit(console.log)}>
      {fields.map((item, index) => (
        <input key={item.id} {...register(`items.${index}.name`)} placeholder={`Item ${index + 1}`} />
      ))}
      <button type="button" onClick={() => append({ name: "" })}>
        Agregar Item
      </button>
      <button type="submit">Enviar</button>
    </form>
  );
}
  Explicación

Maneja campos dinámicos utilizando useFieldArray. Permite agregar múltiples inputs dinámicos al formulario mediante el botón “Agregar Item”. Los datos de todos los campos creados se envían como un arreglo al momento de enviar el formulario.

10. Validaciones Asíncronas

jsx 
const DefaultValuesForm = () => {
  const { register, handleSubmit } = useForm({
    defaultValues: {
      nombre: 'Urian',
      edad: 30
    }
  });
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('nombre')} />
      <input type="number" {...register('edad')} />
      <button type="submit">Actualizar</button>
    </form>
  );
};
  Explicación

Este formulario utiliza defaultValues para prellenar los campos nombre y edad con valores predeterminados. Los datos pueden ser modificados por el usuario y luego enviados al hacer clic en el botón de actualización.