Mientras el final de los formularios web no llega, desarrolladores como tu, y yo, se ven obligados a implementar continuamente esta funcionalidad, muchas veces compleja y tediosa. Felizmente rfsf-team ha pensado en ti y ha decidido crear una solución interesante para tu próximo proyecto en React: React JSON Schema Form.
¿Qué es React JSON Schema Form?
React JSON Schema Form es un componente avanzado de React que permite desarrollar formularios web a partir de un esquema de JSON. Sí, esto significa que a través de un esquema de JSON puedes tener de forma fácil un formulario HTML.
Veamos un ejemplo.
Ejemplo
Cómo siempre, lo primero que debes hacer es instalar el componente en tu proyecto.
En tu componente personalizado, debes definir el esquema de la siguiente forma:
Y creas el formulario de la siguiente forma:
Si todo ha ido bien, deberías ver un resultado parecido a:
Y eso es todo. Como has podido ver, crear un formulario básico con React JSON Schema Form es muy fácil. Ahora solo tendrías que añadirle algunos estilos con CSS y la interacción con tu API de backend.
Otras características de “react-jsonschema-form”
React JSON Schema Form es una biblioteca con algunas características interesantes que no tendrías que desarrollar desde cero. Por ejemplo, ¡puedes tener formularios con la opción de añadir y eliminar!
Pero hay más, y las siguientes son otras de las características que me parecen más interesantes:
- Validación “en vivo”. Puedes configurar que el formulario se valide y se muestren los errores mientras el usuario introduce los datos.
- Propiedades anidadas.
- Campos numéricos con la posibilidad de utilizarse sliders.
- Input de tipo fichero para uno o varios ficheros.
- Widgets de fecha y hora.
- Dependencia de propiedades. Unidireccional y bidireccional
- Dependencia de esquemas
Playground
Otro de los regalos del equipo de RJSF es su playground, desarrollado también con Bootstrap, ¡donde puedes experimentar y jugar con todas las características que se han desarrollado hasta la fecha! Creo que vale la pena acceder, pues te ayudará a valorar de forma rápida si el componente es realmente adecuado para tu proyecto.
Alternativas a “react-jsonschema-form”
Obviamente que react-jsonschema-form no es la única biblioteca de su estilo en el mercado. Por eso te dejo algunas de las alternativas más utilizadas actualmente:
Conclusión
Para concluir, es muy probable que tu formulario sea muy complejo con demasiada lógica, interacciones e innovaciones. En este caso React JSON Schema Form puede no ser una solución. Pero si lo que quieres es desarrollar formularios sencillos, pero sólidos y de forma rápida, ¡entonces vale la pena echar un vistazo a este super componente!
¿Normalmente, cómo implementas formularios en tu aplicaciones desarrolladas con React?
Fotografía: rawpixel en Pixabay
Fuente:
