react-use-form-lite

react-use-form-lite es una librería moderna, intuitiva, liviana, escalable y sobre todo flexible para manejar formularios en React sin dependencias adicionales.

Permite una implementación rápida y sin complicaciones, con soporte para múltiples tipos de input (text,hidden, number, email, password, textarea, date, time, datetime-local, month, week, range, color, search, tel, url, select, radio, checkbox (simple y múltiple), y file (simple y múltiple)).

• Ejemplo de uso con React Use Form Lite sin TypeScript

• Ejemplo de uso con React Use Form Lite con TypeScript

🚀 Instalación

1$ npm install react-use-form-lite
2# o
3$ yarn add react-use-form-lite

🤔 ¿Para Qué Fue Creado?

react-use-form-lite fue creado para ofrecer una solución simple, flexible y reutilizable al manejo de formularios en aplicaciones React.

El hook useFormLite simplifica el manejo de formularios permitiendo escribir formularios más limpios y con menos código repetitivo.

⚡ ¿Qué Necesidad Resuelve?

• Manejo centralizado de los valores del formulario.
• Inputs conectados automáticamente.
• Manejo diferenciado y simplificado para inputs de tipo file, con registerFile.
• Soporte para la mayoria de los inputs.
• Gestión de checkboxes simple y múltiples.
• Identificación de campos vacíos con getEmptyFields().
• Reseteo fácil del formulario a sus valores iniciales con resetForm().

📦 API del Hook useFormLite

El hook useFormLite y sus funciones register y registerFile conectan automáticamente los campos del formulario con el estado interno, simplificando el manejo de sus valores y eventos.

⚙️ Uso básico

1// 1. Importar el hook
2import { useFormLite } from 'react-use-form-lite'; 
3
4// Componente principal
5export default function MiFormulario() {
6
7  // 2. Definir los valores iniciales del formulario
8  const initialFormValues = {
9    nombre: '',
10    edad: 0,
11    email: '',
12    pais: 'Colombia', // Puede tener un valor por defecto
13    teGustaReact: true,
14    lenguajes: ['HTML'], // Puede tener valores preseleccionados
15    aceptaTerminos: 'Sí',
16    avatar: null,
17    documentos: [],
18    fechaNacimiento: null, // Puede tener un valor por defecto
19  };
20
21  // 3. Definir la función que se ejecutará al enviar el formulario
22  const handleFormSubmit = (formData) => {
23    console.log('Datos del formulario enviados:', formData);
24    console.log('Campos vacíos:', getEmptyFields());
25
26    // Verificar si se ha seleccionado un archivo
27    if (formData.avatar) {
28      console.log("Avatar seleccionado:", formData.avatar.name);
29    }
30
31    // Verificar si se han cargado documentos
32    if (formData.documentos.length > 0) {
33      console.log("Documentos cargados:", formData.documentos.map(f => f.name));
34    }
35  };
36
37  // 4. Usar el hook useFormLite
38  const {
39    values,         // Estado actual del formulario
40    handleSubmit,   // Envoltura para la función de envío
41    register,       // Para inputs estándar
42    registerFile,   // Específicamente para inputs de tipo 'file'
43    resetForm,      // Para limpiar el formulario
44    getEmptyFields  // Para obtener campos vacíos
45  } = useFormLite(initialFormValues, handleFormSubmit);
46
47  return (
48    <form onSubmit={handleSubmit}>
49    {/* 5. Usar handleSubmit en el form */}
50      <h1>Mi Formulario</h1>
51
52      <div>
53        <label htmlFor="nombre">Nombre:</label>
54        {/* 6. Usar register para inputs de texto, número, email, etc. */}
55        <input type="text" id="nombre" {...register('nombre')} placeholder="Escribe el nombre" />
56      </div>
57
58      <div>
59        <label htmlFor="edad">Edad:</label>
60        <input type="number" id="edad" {...register('edad')} />
61      </div>
62
63      <div>
64        <label htmlFor="email">Email:</label>
65        <input type="email" id="email" {...register('email')} placeholder="tu@correo.com" />
66      </div>
67      
68      <div>
69        <label htmlFor="fechaNacimiento">Fecha de Nacimiento:</label>
70        <input type="date" id="fechaNacimiento" {...register('fechaNacimiento')} />
71      </div>
72
73      <div>
74        <label htmlFor="pais">País:</label>
75        <select id="pais" {...register('pais')}>
76          <option value="">Seleccione un país</option>
77          <option value="Colombia">Colombia</option>
78          <option value="México">México</option>
79          <option value="Venezuela">Venezuela</option>
80        </select>
81      </div>
82
83      <div>
84        <label>
85          <input type="checkbox" {...register('teGustaReact')} /> ¿Te gusta React?
86        </label>
87      </div>
88
89      <div>
90        <p>Lenguajes que conoces:</p>
91        <label>
92          <input type="checkbox" {...register('lenguajes')} value="HTML" /> HTML
93        </label>
94        <label>
95          <input type="checkbox" {...register('lenguajes')} value="CSS" /> CSS
96        </label>
97        <label>
98          <input type="checkbox" {...register('lenguajes')} value="JavaScript" /> JavaScript
99        </label>
100      </div>
101
102      <div>
103        <p>¿Aceptas los términos?</p>
104        <label>
105          <input type="radio" {...register('aceptaTerminos')} value="Sí" /> Sí
106        </label>
107        <label>
108          <input type="radio" {...register('aceptaTerminos')} value="No" /> No
109        </label>
110      </div>
111
112      <div>
113        <label htmlFor="avatar">Avatar (un solo archivo):</label>
114        {/* 7. Usar registerFile para inputs de tipo 'file' */}
115        <input type="file" id="avatar" {...registerFile('avatar')} />
116      </div>
117
118      <div>
119        <label htmlFor="documentos">Documentos (múltiples archivos):</label>
120        <input type="file" id="documentos" multiple {...registerFile('documentos')} />
121      </div>
122
123      <div>
124        <button type="submit">Enviar</button>
125        <button type="button" onClick={resetForm} style={{ marginLeft: '10px' }}>
126          Resetear
127        </button>
128      </div>
129
130        <pre style={{ marginTop: "20px", background: "#f0f0f0", padding: "10px" }}>
131          {JSON.stringify({
132              informacionFormulario: {
133                ...values,
134                avatar:
135                  values.avatar && typeof values.avatar !== "string"
136                    ? {
137                        name: values.avatar.name,
138                        size: values.avatar.size,
139                        type: values.avatar.type,
140                      }
141                    : values.avatar || null,
142                documentos:
143                  values.documentos.length > 0
144                    ? values.documentos.map((file) => ({
145                        name: file.name,
146                        size: file.size,
147                        type: file.type,
148                      }))
149                    : [],
150              },
151              camposVacios: getEmptyFields(),
152            },
153            null,
154            2)}
155        </pre>
156    </form>
157  );
158}

✅ Explicación del Ejemplo Anterior:

1. Importa el hook useFormLite: Desde la librería use-form-lite.

2. initialFormValues: Define el estado inicial del formulario, que contiene todos los campos y sus valores iniciales.

3. handleFormSubmit: Esta es la lógica de envío. Recibe el objeto values con todos los datos del formulario. Se pasa como segundo argumento a useFormLite.

4. Llamada a useFormLite:

   • Pasas initialFormValues y la función handleFormSubmit.
   • Destructuras las propiedades y métodos necesarios:

     • values: El objeto que contiene el estado actual de todos los campos del formulario.

     • handleSubmit: Una función que debes asignar al evento onSubmit de la etiqueta <form>. Previene el comportamiento por defecto del navegador y llama a la función handleFormSubmit con los values.

     • register: Función para conectar inputs estándar (texto, número, email, select, radio, checkbox, etc.) al hook. Devuelve props como name, value/checked, y onChange.

     • registerFile: Función específica para inputs de tipo file. Devuelve props como name y onChange.

     • resetForm: Función para revertir todos los campos del formulario a sus initialFormValues.

     • getEmptyFields: Función que devuelve un objeto listando los campos que están actualmente vacíos (considerando '', null, undefined o arrays vacíos).

5. <form onSubmit={handleSubmit}>: Esencial para que handleSubmit maneje el envío.

6. {...register('nombreCampo')}: Para la mayoría de los inputs, esparces las props devueltas por register. El name del input debe coincidir con la clave en initialFormValues.

   • Para checkboxes múltiples, usa el mismo name en register y diferentes value en cada input. useFormLite manejará el valor como un array.

   • Para input de tipo radio, usa el mismo name en register y diferentes value en cada input.

7. {...registerFile('nombreCampoArchivo')}: Para inputs de tipo file, usa registerFile.

✅ Tipos de Input Soportados

useFormLite maneja automáticamente diferentes tipos de input basados en el atributo type del input:

• Inputs estándar (manejados por register):

  • text, password, email, number, search, tel, url
  • date, time, datetime-local, month, week
  • range, color
  • textarea
  • select (single)
  • checkbox (simple): Su valor en values será boolean.
  • checkbox (múltiple): Si varios checkboxes comparten el mismo name, su valor en values será un string[] con los value de los checkboxes seleccionados.
  • radio: Su valor en values será el value del radio button seleccionado.

• Inputs de archivo (manejados por registerFile):

  • file (simple): Su valor en values será un objeto File o null.
  • file (múltiple, con el atributo multiple en el input): Su valor en values será un File[].

🤝 Únete y Contribuye

Si encuentras algún problema o tienes una idea para mejorar el paquete, por favor abre un issue o envía un pull request en GitHub

👨‍💻 Desarrollador

Urian Viera
🌐 urianviera.com
📺 YouTube
💌 urian1213viera@gmail.com
☕ ¡Apóyame en PayPal!

Copyright

© 2025 Urian Viera. Todos los derechos reservados.

🛡 License

Distribuido bajo la licencia MIT

🙌 Agradecimientos

¡Gracias a todos los Devs 👨‍💻 que han utilizado y contribuido al desarrollo de react-use-form-lite! Su apoyo y retroalimentación son fundamentales para mejorar continuamente este paquete.