English version. https://medium.com/@ger86/react-managing-forms-with-formik-c90a2ea75f4b

Hoy os quiero hablar de la librería Formik, la cual nos va a permitir crear formularios en React de forma sencilla y limpia, algo que suele ser una tarea complicada y que librerías como Redux Forms han solucionado de forma relativa.

La necesidad de emplear una librería de terceros para gestionar los formularios de nuestra aplicación depende mucho de la complejidad de nuestra aplicación. Para los más sencillos es probable que podamos recurrir al estado interno de los componentes pero para los más complejos es probable que necesitemos algo de ayuda.

Es por eso que hoy quiero realizar una introducción a la librería Formik, la cual se autodescribe del siguiente modo:

Build forms in React, without the tears 😭

Creo que no hace falta más introducción, ¿verdad? Así que, ¡vamos a ello!

Comparación con Redux Form

Atendiendo a la documentación de Formik, hay tres puntos en los que esta librería destaca por encima de Redux Form:

• El estado de un formulario es efímero y local, por lo que atendiendo a la opinión de Dan Abramov, no tiene sentido guardarlo en el estado global de Redux.
• Cuando trabajamos con Redux Form cada vez que se pulsa una tecla se invoca al reducer, lo cual puede disminuir el rendimiento de la aplicación en aplicaciones grandes.
• El tamaño de Formik minificado es la mitad que el de Redux Form (12.7 kB vs 22.5 kB).

Instalación y primer formulario

Podemos instalar Formik en nuestro proyecto mediante npm / yarn del siguiente modo:

yarn add formik

Una vez hecho esto, podremos emplear el componente Formik de la librería para crear nuestro primer formulario. Este componente puede recibir los siguientes argumentos:

• initialValues , al que pasaremos un objeto para definir los valores iniciales de nuestro formulario.
• validate , al que pasaremos una función para validar los valores introducidos por el usuario.
• onSubmit , al que pasaremos una función que recibe como primer argumento los valores enviados y como segundo un objeto que, entre otras cosas, nos proporcionara el método setSubmitting para informar a Formik del momento en que terminamos de procesar el formulario.

Sabiendo esto, un formulario de contacto básico puede tener el siguiente aspecto:

El código es bastante sencillo como habréis visto:

• En las líneas 8 y 9 definimos los valores iniciales del formulario así como la función de validación (que se ejecuta a medida que el usuario rellena el formulario por lo que los fallos se muestran en el momento).
• En la línea 26 establecemos la función que pasamos al argumento onSubmit . En este caso un setTimeout para replicar una llamada a una API externa. Tras un segundo invocamos con false el método setSubmitting .
• En las líneas 34 a 40 tenemos una lista de todos los métodos y propiedades a los que podemos acceder desde nuestro formulario. Por ejemplo, podemos obtener los valores, errores de validación o los métodos que permiten gestionar los cambios ( handleChange ) o el envío ( handleSubmit ) del formulario.
• Finalmente, de las líneas 42 a la 79 pintamos nuestro formulario normalmente empleando las propiedades anteriores.

¿Fácil verdad? De este modo el estado de nuestro formulario permanece gestionado de forma local y en un código muy fácil de leer. Pero hay más…

Validación mediante Yup

Como habéis visto, podemos escribir nuestra propia función de validación o delegar la misma en otras librerías de terceros con las que nos sintamos cómodos trabajando.

Sin embargo, el propio creados de Formik sugiere emplear la librería Yup . Esta librería nos permite definir un esquema de validación que podremos emplear en nuestros formularios gracias a la opción validationSchema que automáticamente transformará los errores de validación arrojados por Yup en objetos adaptados a Formik.

Para instalar Yup lo haremos mediante npm / yarn :

yarn add yup

Una vez hecho esto, podremos definir nuestro esquema de validación para el formulario anterior del siguiente modo:

La definición de este esquema de validación es realmente sencillo. Basta con definir lo que en Yup se conoce como shape , el cual es un objeto en el que las propiedades son los nombres de cada campo del formulario y su valores las validaciones a realizar escritas de forma semántica como podéis ver en el caso por ejemplo del campo email .

Hecho esto, podremos emplear nuestro ProfileSchema empleando la propiedad validationSchema del componente Formik :

De este modo nuestro formulario queda aún más corto y simplificado.

El HOC withFormik

Finalmente, Formik también nos proporciona la posibilidad de emplear el HOC (high order component) withFormik de cara a pasar todas las propiedades y handlers a componente envuelto con este HOC.

Para ello, lo primero que haremos será declarar nuestro componente ProfileForm del siguiente modo:

Y, a continuación, emplearemos el HOC withFormik para rellenar las propiedades que pasaremos a Formik del mismo modo que hacíamos con el componente proporcionado por la librería.

El resto de opciones que se pueden pasar a este HOC podéis leerlas en la propia documentación de Formik.

Y con esto ya tenemos nuevamente nuestro formulario funcionando.

Conclusiones

Como habéis podido ver, la librería Formik nos permite gestionar de forma bastante sencilla los formularios de nuestra aplicación y sin recurrir a un estado global tal y como sucede con Redux Form.

Hecha esta introducción, en siguiente artículos os enseñaré a crear formularios más complejos como por ejemplo aquellos que implican gestionar imágenes o elementos dinámicos.

De momento espero que este artículo os haya servido para conocer una librería que está ganando fuerza en este final de 2019.

Repositorio

Os dejo un repositorio con una aplicación sencilla donde se encuentra el código que he comentado en este artículo por si queréis seguir practicando con Formik.

¿Quieres recibir más artículos como este?

Si te ha gustado este artículo te animo a que te suscribas a la newsletter que envío cada domingo con publicaciones similares a esta y más contenido recomendado: 👇👇👇