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.

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.

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.

Instalación

Para poder utilizar este formulario en tus proyectos solo es necesario copiar y pegar el código en el fichero de tu preferencia.

Para que los estilos puedan visualizarse es necesario que tengas instalado y configurado en el proyecto Tailwind.

En esta ocasión traemos un componente hecho con Tailwind de una landing page de estilo moderno y minimalista, perfecta para proyectos de todo tipo.

El diseño está inspirado en las webs minimalistas ganadoras de premios que se han vuelto populares últimamente.

En cuento a la paleta de colores, se puede fácilmente desde la lista de estilos de Tailwind.

Instalación

Para poder usar este componente solo tienes que copiarlo y pegarlo en tu proyecto. No es necesario el descargar alguna dependencia.

En el caso de que no se muestren los estilos, verifica si está correctamente configurado Tailwind en tu proyecto.

Instalarlo en algún framework de React.js

En el caso de que quieras usar este componente en cualquier framework basado en React.js (Vite, Next.js, Remix, Gatsby, etc.), debes cambiar el nombre de las clases class por className. Y listo, debería funcionar sin ningún problema

Uno de los hooks más utilizados y útiles es sin duda el de «useFetch», ya que te permite acceder a una API de forma fácil, simple y sin la necesidad de instalar dependencias.

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.

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.

Actualización (marzo 2024)

Se realizaron cambios para permitir verificar el estado de la respuesta y agregar tokens y elementos de seguridad en la función.

Instrucciones

Uso con React.js sin frameworks

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.

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.

En el caso de que desees este componente con TypeScript, te recomendamos el siguiente hook que ya está adaptado.

Uso con Next.js

Es importante tener en cuenta que en las versiones mayores a la 13 de Next.js, este hook solo se podrá implementarse en componentes de tipo "use client". Si lo que buscas es usarlo en un componente de tipo servidor, prueba la opción nativa de fetch y suspense.

El siguiente componente de llamada a la acción (Call-to-Action) cuenta con un estilo moderno y colorido que se puede adaptar fácilmente a cualquier tipo de landing page.

La paleta de colores y los estilos se pueden cambiar directamente con las clases utilitarias de Tailwind o también se puede sobreescribir directamente con tus variable y estilos en línea.

Para quien no lo sepa, las llamadas a la acción o «Call-to-action» son parte fundamental de toda web, en especial si se buscar conversiones y/o acciones por parte del usuario. Así que lo ideal es que el diseño sea atractivo, limpio y fácil de entender.

¿Cómo instalarlo?

Solo se necesita copiar y pegar el código. Todos los estilos son compatibles con la versión default de Tailwind.

En el caso de que se quiera implementar en React, solo se necesita cambiar la palabra clave class por className.

Para poder usar el siguiente componente de Tailwind en tu proyecto, solo se tiene que copiar y pegar el código.

No es necesario instalar dependencias o librerías externas para su funcionamiento.

Componentes