React

Tailwind

Custom hook

Formularios

<p>El día de hoy traemos un componente reutilizable y personalizable de un formulario en React.js. Este ya incluye validaciones básicas y manejo de eventos.</p>
<p>En cuanto a su funcionamiento e implementación, sigue las buenas prácticas que se recomiendan dentro de la misma documentación de React.js, así que puede usarse sin ningún problema en producción en cualquier proyecto.</p>
<p>En este caso el formulario fue creado únicamente con JavaScript nativo y los hooks que ofrece la librería de React.js, por lo que no será necesario descargar dependencias externas.</p>
<h2>Instalación</h2>
<p>Para poder utilizar este formulario en tus proyectos solo es necesario copiar y pegar el código en el fichero de tu preferencia.</p>
<p>Para que los estilos puedan visualizarse es necesario que tengas instalado y configurado en el proyecto Tailwind.</p>


Formulario de registro creado con React y Tailwind.

<p>Uno de los hooks más utilizados y útiles es sin duda el de «<strong>useFetch</strong>», ya que te permite acceder a una API de forma fácil, simple y sin la necesidad de instalar dependencias.</p>
<p>Asimismo, con este hook ya no necesitarás crear estados para manejar promesas e implementar el useEffect dentro del componente, algo que dejará tu código mucho mucho más limpio y mantenible.</p>
<p>En cuanto a los estados que regresa esta función están: «data», «loading» y «error». Respecto a los parámetros de entrada también se incluye la opción de agregar cabeceras personalizadas y el body.</p>
<h3>Actualización (marzo 2024)</h3>
<p>Se realizaron cambios para permitir verificar el estado de la respuesta y agregar tokens y elementos de seguridad en la función.</p>
<h2><span style="font-family: var(--heading--font-family); font-weight: var(--heading--font-weight); letter-spacing: var(--heading--letter-spacing-h3); background-color: var(--global--color-background); color: var(--global--color-primary);">Instrucciones</span></h2>
<h2><span style="font-family: var(--heading--font-family); font-size: var(--heading--font-size-h3); font-weight: var(--heading--font-weight); letter-spacing: var(--heading--letter-spacing-h3); background-color: var(--global--color-background); color: var(--global--color-primary);">Uso con React.js sin frameworks</span></h2>
<p>Se tiene que copiar y pegar el código en cualquier archivo y listo, solo hay que llamar la función dentro del componente. No es necesario instalar alguna dependencia o librería externa.</p>
<p>Para dejar más límpio el código, lo recomendable es guardarlo en en un archivo separado dentro de una carpeta de utilidades o hooks, ya que suele ser un hook que se utiliza mucho.</p>
<p>En el caso de que desees este componente con TypeScript, te recomendamos el siguiente hook que ya está adaptado.</p>
<h3>Uso con Next.js</h3>
<p>Es importante tener en cuenta que en las versiones mayores a la 13 de Next.js, este hook <strong>solo se podrá implementarse en componentes de tipo</strong> <code>"use client"</code>. Si lo que buscas es usarlo en un componente de tipo servidor, prueba la opción nativa de fetch y suspense.</p>
