RVF (React Validated Form)

Qué es

RVF (React Validated Form) es una librería de TypeScript creada por Aaron Pettengill (airjp73) para validar y gestionar el estado de formularios en React. Anteriormente se llamaba remix-validated-form, pero al ampliar su soporte más allá de Remix pasó a llamarse RVF. Se apoya en las APIs nativas de formularios del navegador y se integra con validadores como Zod o Yup mediante adaptadores oficiales.

Para qué sirve

• Validar formularios en el cliente y reutilizar la misma lógica de validación en el servidor.
• Gestionar el estado de formularios complejos con objetos y arrays anidados manteniendo el tipado.
• Construir formularios con mejora progresiva que funcionan incluso sin JavaScript en Remix o React Router.
• Centralizar los valores por defecto del formulario en un único sitio.

Cuándo usarlo

Encaja bien cuando trabajas con frameworks de React renderizados en servidor (Remix, React Router, Next.js) y quieres formularios que funcionen con o sin JavaScript. También sirve en React puro. Si no necesitas mejora progresiva ni integración con APIs nativas de formulario, alternativas como React Hook Form o Formik pueden bastar.

Ejemplo

Instalación según el entorno:

npm install @rvf/react-router
npm install @rvf/react

Uso básico con el adaptador de Zod en React puro:

import { useForm } from "@rvf/react";
import { withZod } from "@rvf/zod";
import { z } from "zod";

const validator = withZod(
  z.object({
    email: z.string().email(),
  })
);

function MyForm() {
  const form = useForm({
    validator,
    defaultValues: { email: "" },
    handleSubmit: (data) => console.log(data),
  });

  return (
    <form {...form.getFormProps()}>
      <input {...form.field("email").getInputProps()} />
      <button type="submit">Enviar</button>
    </form>
  );
}

Puntos clave

• Mejora progresiva: los formularios funcionan sin JavaScript en frameworks renderizados en servidor.
• Tipado seguro para estructuras anidadas de objetos y arrays.
• Adaptadores oficiales para Zod (@rvf/zod) y Yup (@rvf/yup), además de validadores personalizados.
• Soporte tanto para React puro como para React Router, Remix y otros frameworks de React.

Ten en cuenta

El proyecto está activo y mantenido (versión v8.1.0, con commits recientes) y se publica bajo licencia MIT. Hay que tener en cuenta el cambio de nombre y de paquetes: el antiguo remix-validated-form ahora es RVF, con paquetes separados por entorno (@rvf/react, @rvf/react-router). Revisa la documentación oficial para la guía de migración si vienes de versiones anteriores.