How to build simple React Forms with react-hook-form?

Tram Ho

React-hook-form is a handy, easy-to-use form library and simpler form validation.

Let’s learn how to use react-hook-form in a project.


With npm:

If using yarn:

After the installation is complete, we create a user registration form with username, email, password to practice

How do I use the useForm hook?

To get started with react-hook-form we call useForm. We will use register to get an object. register is a function that needs to be associated with each input by ref .

The register function will take the value that the user has entered in the input box to validate it. The register sends these values ​​to a function when submitting the form.

For registers to work properly, for each input need to provide an appropriate name attribute, for example here, with input email we set name = “email”.

The reason for adding the name attribute à each time the form is submitted, we will get all input values ​​on a single object, each property when sent back to the server side, will be named after this name. .

How do I submit a form with handleSubmit?

To handle the submission of the form and receive input data, normally we use the onSubmit of the form and call the processing function upon submission.

=> With useForm, you call handleSubmit function and call handleSubmitSignUp nested inside as follows:

handleSubmit will get all the input data and we will get in handleSubmitSignUp with the data object.

You can easily check the data when console.log(data) at handleSubmitSignUp .

Validation data input with register

To validate the form and add conditions to each input value is very simple, we just need to pass the condition in the register function.

register accepts an object, whose properties are conditions on the input. For example, we want the username field required to be entered, more than 6 characters and less than 24 characters:

The required: true attribute means that data is required to input, and minLength: 6 more than 6 characters, maxLength: 20 is less than 20 characters, in case you want to apply regex, we use pattern, in the wallet This example allows only lower case letters or upper case letters.

Display errors and validation mode

In case of entering values ​​that do not match the conditions, we will get object errors from useForm.

By default, errors will be updated after submitting the form, but we can update errors in different modes:

mode: onChange | onBlur | onSubmit | onTouched | all = 'onSubmit'

onSubmit (Default): Validation will trigger event submit.

onBlur : Validation will trigger the event blur.

onChange : Validation will trigger event change on each input and update errors multiple times when there is a value change, which also significantly affects performance.

onTouched : Validation will trigger the event blur first, and then it will trigger with any event changes.

To set or clear errors, we use setError and clearError.

Applies to forms using external components

Some forms use external components such as React-Select, AntD and Material-UI, and using the outer controller will make it easier to work with. The structure is as follows:

namestringUnique name input
controlObjectcontrol object set using useForm. Optional when using FormProvider.
rulesObjectValidation rules are similar to the register’s format: rules={{ required: true }}
renderFunctionThis is a render prop. This function returns the React element and supplies events and values ​​to the component. Provide onChange, onBlur, name, ref, and value to the child component

Above is the post on creating form and validating with react-hook-form, hopefully it will help everyone when working with forms in React. The article is referenced from the article How to Build React Forms the Easy Way with react-hook-form author Reed Barger. You can also find out carefully at the homepage

Share the news now

Source : Viblo