Descripción del Proyecto

El manejo de formularios en React siempre se sintió más complejo de lo que debería ser. Mientras librerías como React Hook Form y Formik existen, la forma en que estructuran el código de formularios nunca encajó con cómo pienso sobre formularios.

React Form Toolkit es mi enfoque de gestión de formularios: combinando el rendimiento de React Hook Form con el type safety de Zod, envuelto en una API de componentes que se siente intuitiva. El objetivo es escribir menos boilerplate manteniendo control total sobre validación y renderizado.

Características Principales

Validación Type-Safe

Los esquemas Zod definen la estructura de tu formulario y reglas de validación. TypeScript infiere tipos automáticamente, capturando errores en tiempo de compilación.

1
const schema = z.object({
2
  email: z.string().email(),
3
  password: z.string().min(8),
4
  rememberMe: z.boolean(),
5
});
6

7
<FormProvider schema={schema} onSubmit={handleSubmit}>
8
  <FormField name="email" label="Email" />
9
  <FormField name="password" label="Contraseña" type="password" />
10
  <FormField name="rememberMe" label="Recordarme" type="checkbox" />
11
  <FormButtonsBar />
12
</FormProvider>;

Soporte Multi-Idioma

Traducciones incorporadas para 7 idiomas:

• Inglés
• Español
• Portugués
• Francés
• Alemán
• Italiano
• Ruso

Los mensajes de error se muestran automáticamente en el idioma del usuario.

Patrones Avanzados de Campos

• ConditionalField: Mostrar/ocultar campos basados en otros valores
• DependantField: Campos que dependen de valores de otros campos
• FieldArray: Listas dinámicas con funcionalidad agregar/eliminar

Integración con Tailwind

Estilizado con Tailwind CSS de serie, pero completamente personalizable a través de props y clases CSS.

Componentes

FormProvider

El componente principal que envuelve tu formulario y gestiona estado, validación y envío.

1
<FormProvider
2
  schema={schema}
3
  onSubmit={handleSubmit}
4
  defaultValues={initialData}
5
>
6
  {/* Campos del formulario */}
7
</FormProvider>

FormField

Renderiza elementos de entrada con validación automática y display de errores.

1
<FormField
2
  name="email"
3
  label="Dirección de Email"
4
  placeholder="tu@ejemplo.com"
5
  required
6
/>

FormButtonsBar

Contenedor para botones submit/reset con estados de carga incorporados.

ConditionalField

Renderiza hijos solo cuando se cumple una condición.

1
<ConditionalField when="hasAccount" is={false}>
2
  <FormField name="newPassword" label="Crear Contraseña" />
3
</ConditionalField>

DependantField

Campos que reaccionan a cambios en otros campos.

1
<DependantField
2
  dependsOn="country"
3
  render={(country) => (
4
    <FormField name="state" options={getStatesForCountry(country)} />
5
  )}
6
/>

FieldArray

Listas dinámicas de campos.

1
<FieldArray
2
  name="items"
3
  render={({ fields, append, remove }) => (
4
    <>
5
      {fields.map((field, index) => (
6
        <FormField key={field.id} name={`items.${index}.name`} />
7
      ))}
8
      <button onClick={() => append({ name: '' })}>Agregar Item</button>
9
    </>
10
  )}
11
/>

Detalles Técnicos

Requisitos

• React 18.0+
• TypeScript 5.0+
• Zod 3.22+

Compatibilidad con Frameworks

Funciona con cualquier setup de React:

• Create React App
• Next.js (App Router y Pages Router)
• Remix
• Vite

Estado

Actualmente en beta. Estable para uso en producción, pero la API puede tener cambios breaking antes de v1.0.

¿Por Qué Otra Librería de Formularios?

Las opciones existentes son geniales, pero cada una tiene trade-offs:

• React Hook Form es performante pero verbose para formularios complejos
• Formik tiene una API linda pero re-renderiza más de lo necesario
• Final Form es poderoso pero tiene curva de aprendizaje pronunciada

React Form Toolkit apunta a combinar los mejores aspectos: rendimiento de React Hook Form, type safety de Zod y una API de componentes que se lee como el formulario que crea.