Cómo construir formularios en React con la biblioteca react-hook-form

En este artículo, exploraremos la biblioteca react-hook-form.

Aprenderá a utilizar e integrar esta biblioteca con React. También veremos por qué se está convirtiendo en una opción popular para crear formularios simples y complejos con soporte adicional para manejar validaciones complejas.

Empecemos

Trabajar con formularios en React es una tarea compleja. Y se vuelve más complejo cuando el número de campos de entrada aumenta junto con las validaciones.

Eche un vistazo al siguiente código:

 import React, { useState } from "react"; import "./styles.css"; export default function App() { const [state, setState] = useState({ email: "", password: "" }); const handleInputChange = (event) => { setState((prevProps) => ({ ...prevProps, [event.target.name]: event.target.value })); }; const handleSubmit = (event) => { event.preventDefault(); console.log(state); }; return ( Email Password Login ); }

Aquí hay una demostración de Code Sandbox: //codesandbox.io/s/login-form-zjxs9.

En el código anterior, sólo tenemos 2 campos de entrada, es decir, emaily password, y un botón de envío.

Cada campo de entrada tiene un controlador valuey onChangeagregado para que podamos actualizar el estado en función de la entrada del usuario.

Además, hemos agregado un handleSubmitmétodo que muestra los datos ingresados ​​en el formulario en la consola.

Esto se ve bien. Pero, ¿qué pasa si necesitamos agregar validaciones como validación de campo requerida, validación de longitud mínima, validación de contraseña, validación de campo de correo electrónico y también mostrar los mensajes de error correspondientes?

El código se volverá más complejo y extenso a medida que aumente el número de campos de entrada y sus validaciones.

Este es un requisito muy común en cualquier aplicación. Así que para facilidad de trabajo con formularios, hay varias bibliotecas disponibles, como Formik, redux-form, react-final-form, react-hook-formy así sucesivamente.

Pero la que está ganando mucha popularidad es la react-hook-formbiblioteca.

Ahora aprendamos por qué y cómo usarlo. Para eso, crearemos una nueva aplicación React.

Cree un nuevo proyecto de React ejecutando el siguiente comando desde la terminal:

npx create-react-app react-hook-form-demo

Una vez creado el proyecto, eliminar todos los archivos de la srccarpeta y crear nuevos index.jsy styles.cssarchivos dentro de la srccarpeta.

Para instalar la biblioteca de formularios, ejecute el siguiente comando desde la terminal:

yarn add react-hook-form

Cómo crear páginas iniciales

Abra el src/index.jsarchivo y agregue el siguiente contenido dentro de él:

 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(, document.getElementById('root'));

Abra el src/styles.cssarchivo y agregue el contenido desde aquí dentro.

Ahora, cree un nuevo archivo App.jsdentro de la srccarpeta con el siguiente contenido:

 import React from "react"; import "./styles.css"; export default function App() { return ( Email Password Login ); }

Aquí, acabamos de agregar los campos de correo electrónico y contraseña al formulario.

Creación de formularios básicos con react-hook-form

La react-hook-formbiblioteca proporciona un useFormgancho que podemos usar para trabajar con formularios.

Importe el useFormgancho así:

import { useForm } from 'react-hook-form';

Usa el useFormgancho así:

const { register, handleSubmit, errors } = useForm();

Aquí,

  • register es una función que se utilizará como referencia proporcionada por el useFormgancho. Podemos asignarlo a cada campo de entrada para que react-hook-formpuedan rastrear los cambios para el valor del campo de entrada.
  • handleSubmit es la función a la que podemos llamar cuando se envía el formulario
  • Los errores contendrán los errores de validación, si los hay

Ahora, reemplace el contenido del App.jsarchivo con el siguiente contenido:

 import React from "react"; import { useForm } from "react-hook-form"; import "./styles.css"; export default function App() { const { register, handleSubmit, errors } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( Email Password Login ); }

En el código anterior, le hemos dado una referencia a cada campo de entrada que obtuvimos del useFormgancho.

ref={register}

Además, agregamos la función onSubmit que se pasa a la función handleSubmit.

Tenga en cuenta que para cada campo de entrada, le hemos dado un nombre único que es obligatorio para react-hook-formpoder rastrear los datos cambiantes.

Cuando enviamos el formulario, la función handleSubmit manejará el envío del formulario. Enviará los datos ingresados ​​por el usuario a la función onSubmit que estamos registrando en la consola.

const onSubmit = (data) => { console.log(data); };

Ahora, inicie la aplicación ejecutando el yarn startcomando.

Como puede ver, cuando enviamos el formulario, los detalles ingresados ​​por el usuario se muestran en la consola.

Además, en comparación con el código sin react-hook-form(que vimos al comienzo de este artículo), este código es mucho más simple. Esto se debe a que no tenemos que agregar el controlador valuey onChangepara cada campo de entrada y no es necesario administrar el estado de la aplicación nosotros mismos.

Cómo agregar validaciones al formulario

Now, let’s add the required field and minimum length validation to the input fields.

To add validation we can pass it to the register function which is passed as a ref to each input field like this:

We also want to display the error message if the validation fails.

When the validation fails, the errors object coming from useForm will be populated with the fields for which the validation failed.

Open the App.js file and replace its contents with the following content:

 import React from "react"; import { useForm } from "react-hook-form"; import "./styles.css"; export default function App() { const { register, handleSubmit, errors } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( Email  {errors.email && errors.email.type === "required" && ( 

Email is required.

)} {errors.email && errors.email.type === "pattern" && (

Email is not valid.

)} Password {errors.password && errors.password.type === "required" && (

Password is required.

)} {errors.password && errors.password.type === "minLength" && (

Password should be at-least 6 characters.

)} Login ); }

Here, for the email input field, we have provided the required and pattern matching validations.

So as you type in the email input field, the validation will run once the form is submitted.

If the validation failed, then the errors.email field inside the errors object will be populated with the type field which we used to display the error message.

 {errors.email && errors.email.type === "required" && ( 

Email is required.

)}

In the similar way, we have added the password field validation.

So as you can see, each input field is automatically focused if there is any validation error for the that input field when we submit the form.

Also, the form is not submitted as long as there is a validation error. You can see that the console.log statement is only printed if the form is valid.

So using react-hook-form reduced the amount of code that we have to write. The validation is also responsive, so once the field becomes valid, the error message goes away instantly.

But as the number of validations for each field increases, the conditional checks and error message code will still increase. So we can further refactor the code to make it even simpler.

Take a look at the below code:

 import React from 'react'; import { useForm } from 'react-hook-form'; import './styles.css'; export default function App() { const { register, handleSubmit, errors } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( Email  {errors.email && 

{errors.email.message}

} Password {errors.password && (

{errors.password.message}

)} Login ); }

In the code above, we have changed the email and password validation code.  

For the email input field, we changed this previous code:

to the below new code:

Here, we’ve directly provided the error message we want to display while adding the validation itself.

So we no longer need to add extra checks for each validation. We are displaying the error message using the message property available inside the errors object for each input field.

{errors.email && 

{errors.email.message}

}

So by doing it this way, the code is further simplified which makes it easy to add extra validations in future.

Note that if there are validation errors, the onSubmit handler will not be executed and the corresponding input field will automatically be focused (which is a good thing).

How to Add a Custom Validation Method

You can even provide a custom validation for the input field by adding a validate method. This is useful if you need to perform complex validations like this:

// validation function const validatePassword = (value) => { if (value.length < 6) { return 'Password should be at-least 6 characters.'; } else if ( !/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s)(?=.*[[email protected]#$*])/.test(value) ) { return 'Password should contain at least one uppercase letter, lowercase letter, digit, and special symbol.'; } return true; }; // JSX 

Now you know how to use react-hook-form to create forms in React along with complex validations.

Why react-hook-form is better than the alternatives

Let’s look at some additional reasons that react-hook-form should become your preferred choice for working with forms.

  • Code complexity is less as compared to formik, redux-form and other alternatives.
  • react-hook-form integrates well with the yup library for schema validation so you can combine your own validation schemas.
  • The number of re-renders in the application is small compared to the alternatives.
  • Mounting time is less as compared to the alternatives.

For the actual comparison metrics, read more here.

Conclusion

In this article, we have seen how to use react-hook-form and why it's many developers' preferred choice for building both simple and complex forms in React.

You can find the GitHub source code for this application here.

If you liked this article, then you'll also love my other articles.

Subscribe to my weekly newsletter to join other 1000+ subscribers to get amazing tips, tricks, and articles directly in your inbox.