Someone inputting his details and hitting that ‘Submit’ button is one of the most widely used and reliable forms of getting the data from a user on any website. We call such web entities ‘forms’ and forms on a webpage are nothing but a collection of elements that allows a user to enter data that is then sent over to the server for further processing.
While the traditional approach to build, code and gather information from a form in a webpage can simply be done with the power of HTML code, but when the website gets complex or scales up in size, (say, when you are on an e-commerce website), we need to leverage some of the external libraries that were meant to get things done easily and are able to integrate with other tech stacks quickly.
One such open-source library to handle all things related to forms is React Form Hook and in this article, we will get to know how to use this with a suitable example.
About the library
React Form Hook is a React library that is used to make performant, flexible, and extensible forms with easy-to-use validation support.
Sure, there have been other libraries like Formik, React Final Form, etc. that falls under similar lines but here’s why it goes above all those:
- Small in size: it’s a tiny library with no other dependencies to install.
- Performance: the best part is that it minimizes the re-renders required and also mounts up fairly quickly, thereby increasing the overall experience.
- Uses existing HTML: you can leverage the powers of HTML to work with this library.
- Less code and more features: almost every form handling scenario is covered all in fairly fewer lines of code.
Now that we have some information, here’s what the rest of the blog will tell you about:
- API references with examples
- A quick but powerful demo
Time to make our forms powerful with the use of React Hook Forms! Fire up your terminal and then execute the following commands which makes a new React project:
Your default React project should be running in your browser by now. Next, we need to add the library. Use the following command to install:
npm install react-hook-form
Before we move ahead typing code carelessly, we need to know how this library works, or more precisely what are the different APIs it has and how they function. Here are some common ones:
- The useForm API: this is one of those functions which you will be calling first before you apply any handling logic to your existing forms. It takes some optional arguments like mode, defaultValues, shouldFocusError, etc.
As for its methods, take a look at how these are used:
- register: allows you to register an input/select ref and apply validation rules into React Hook Form based on both HTML default and custom validations.
- unregister: allows you to unregister a single input or an array of inputs.
- errors: it’s an object which contains form errors and error messages corresponding to each field.
Note that this will get deprecated in the next major version (i.e. v7). formState is likely to be the alternative.
- handleSubmit: it’s a function that will pass the form data when form validation is successful and can be invoked remotely as well.
- setError: allows you to manually set one or more errors.
The Controller API: it’s a wrapper component that makes it easier to work with external components from other libraries and frameworks like React-Select, Material UI, etc.
The useWatch API: if you want to reduce the re-rendering at the component level of your form then this API ‘watches’ for any changes to result in better performance.
A quick but powerful demo
Okay, now we know most of the APIs and functions to use from this library. Let’s put that into work by creating something fruitful. How about we make the following form?
Here is what’s happening in the form interface:
We have six basic elements in the form; 4 text fields, 1 select field, and lastly a button. We will be adding some important form validations in each of these elements except the select field. Here are all the rules to be implemented:
- The First Name: it should not be empty and should have a minimum length of 5 characters.
- The Last Name: it is required and has a maximum of 15 characters.
- The Email: like others, this cannot be left blank.
- Username: this also should not be blank but also we have a custom validation where only the string “John” will be accepted. The error will pop out asynchronously after 3 seconds.
Finally, when you click on the Submit button, an alert is shown along with the entered details. If any validation check goes wrong, the error will be shown instantly and the data won’t submit.
Okay, enough of the information, let’s quickly begin coding all of this..
1. Code the interface
Open the index.js file and inside the return statement, start by using a <form> element. Make sure you don’t add any action or method attributes. Everything will be handled by the library.
Our first label will be of the “First Name” field. Make sure you add a suitable placeholder value to its <input> element. Here we added “John”. The same goes for the “Last Name” field.
Then we have the “Email” field. Here we can specify that the type of the form element is “email” so that it knows beforehand that a proper email syntax should be added. Why not use some good old powers of HTML!
The “Username” field is the same as the name fields. So, it’s important to add a placeholder value here too.
Up next the select field is to be added with the name attribute along with multiple options you want to provide in the drop-down. Here we need to make sure that each of the elements must have a proper “value” attribute attached to it. It will be used later when we use the library.
After you have coded all the form interface you will have a code similar to this:
2. Power up the form with validation
With the single useForm hook, we will be doing almost all of the operations to make it functional.
Start by importing the hook from the library:
Now it’s time to register all the inputs we have used in the HTML code above. For that, we will be calling the imported useForm hook as:
We have to handle the functioning of the data submission. For that, we will be using the onSubmit attribute of the <form> element. We call the handleSubmit function passing on a new onSubmit() method to it. We haven’t added any code to this new method so let’s do that first.
With the power of refs in React, we access a particular DOM node in the render() method. Hence, for all the 4 inputs and the 1 select element of the form, we add the ref attribute which calls the register function of the useHook API.
Now here comes all the goodies! Everything we need to validate, we can pass inside this register function. This makes the form very flexible to change and each element can have similar or dissimilar validations as you like.
For the “First Name” and the “Last Name” fields, we pass on the boolean true value to the required property along with a minLength of 5 and max length of 15 characters.
To apply the error messages to a specific field (say, name), simply use the errors prop along with the property name like errors.name or errors.name.type. Then we can add any HTML element inside this check like a simple paragraph that says “First Name is required!”.
As for the message for the minimum length check, we check the errors.name.type === "minLength" and pass on the custom message.
But what about the Username field where we only want specific data to be valid? For this to work as expected, we need to use the validate property of the register function. The value of this property can be a separate function where the actual logic of the validation can be stored.
We are using the sleep() method so that the error is shown after 3 seconds to the user and this will only fire if the value of the string is not equal to “John”.
Make sure you predefine the async event code for this to function:
Sweet! The form should now be backed by powerful validations and is equally flexible with its elements. Test out your new form and you will see an alert box with all the inputs.
Here’s the entire code along with accessibility attributes we wrote for making this form:
This is just the tip of an iceberg when you start making forms with React Hook Form. With its easy-to-go syntax and great features, you can also use it with TypeScript, create wizard-like multiple forms and even use their online form builder where you simply add the elements you want along with rules, and bam! You get your generated code in one click.