useForm

¿Qué es React Hook Form?

React Hook Form es una biblioteca que simplifica la validación y gestión de formularios en React. Utiliza hooks de React para proporcionar un enfoque flexible y eficiente, minimizando el re-renderizado y maximizando el rendimiento.

Instalación

Primero, necesitas instalar la biblioteca:

npm install react-hook-form

Uso Básico de useForm

El hook principal que ofrece esta biblioteca es useForm. Aquí tienes un ejemplo básico de cómo se utiliza:

Ejemplo: Formulario simple

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

function App() {
  const {
    register, // Para registrar campos del formulario
    handleSubmit, // Para gestionar el envío del formulario
    formState: { errors }, // Para manejar errores de validación
  } = useForm();

  const onSubmit = (data) => {
    console.log("Datos enviados:", data);
  };

  return (
    <div className="App">
      <h1>Formulario con React Hook Form</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        {/* Campo de nombre */}
        <div>
          <label htmlFor="name">Nombre:</label>
          <input
            id="name"
            {...register("name", { required: "El nombre es obligatorio" })}
          />
          {errors.name && <p style={{ color: "red" }}>{errors.name.message}</p>}
        </div>

        {/* Campo de correo */}
        <div>
          <label htmlFor="email">Correo Electrónico:</label>
          <input
            id="email"
            type="email"
            {...register("email", {
              required: "El correo es obligatorio",
              pattern: {
                value: /^[^@ ]+@[^@ ]+\.[^@ .]{2,}$/,
                message: "Correo no válido",
              },
            })}
          />
          {errors.email && (
            <p style={{ color: "red" }}>{errors.email.message}</p>
          )}
        </div>

        {/* Botón de envío */}
        <button type="submit">Enviar</button>
      </form>
    </div>
  );
}

export default App;

Explicación del ejemplo:

1. useForm Hook:
   • Proporciona funciones y utilidades para gestionar formularios.
   • register: Se utiliza para registrar campos de entrada y sus reglas de validación.
   • handleSubmit: Función que gestiona el envío de datos y ejecuta una función de callback (en este caso, onSubmit).
   • errors: Contiene información sobre los errores de validación de los campos.
2. Validación:
   • Puedes especificar reglas de validación como required, pattern, y más al registrar un campo.
3. Errores:
   • Si un campo no cumple las reglas, aparece un mensaje de error.

Ejemplo con más funcionalidades

Aquí tienes un ejemplo que incluye campos dinámicos, reseteo del formulario y estilos personalizados:

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

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

  const onSubmit = (data) => {
    console.log("Datos enviados:", data);
    reset(); // Resetea el formulario después del envío
  };

  return (
    <div className="App">
      <h1>Formulario Avanzado</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        {/* Campo de nombre */}
        <div>
          <label>Nombre:</label>
          <input
            {...register("name", { required: "Este campo es obligatorio" })}
          />
          {errors.name && <span>{errors.name.message}</span>}
        </div>

        {/* Campo de edad */}
        <div>
          <label>Edad:</label>
          <input
            type="number"
            {...register("age", {
              required: "Este campo es obligatorio",
              min: { value: 18, message: "Debes tener al menos 18 años" },
            })}
          />
          {errors.age && <span>{errors.age.message}</span>}
        </div>

        {/* Campo de selección */}
        <div>
          <label>País:</label>
          <select {...register("country", { required: "Selecciona un país" })}>
            <option value="">Seleccione...</option>
            <option value="mx">México</option>
            <option value="us">Estados Unidos</option>
            <option value="es">España</option>
          </select>
          {errors.country && <span>{errors.country.message}</span>}
        </div>

        {/* Botones */}
        <div>
          <button type="submit">Enviar</button>
          <button type="button" onClick={() => reset()}>
            Limpiar
          </button>
        </div>
      </form>
    </div>
  );
}

export default App;

Mejoras avanzadas posibles

1. Control de estado: Usa watch para observar cambios en tiempo real de los campos.
2. Control total: Combina con Controller para usar componentes personalizados como bibliotecas de UI (Material UI, etc.).
3. Integración con API: Usa handleSubmit para enviar datos a un servidor mediante fetch o axios.

https://daily.dev/es/blog/reactjs-useform-a-community-guide

https://blog.logrocket.com/react-hook-form-complete-guide/