Make your first form with React Hook Form and Ant Design
why use react hook form:
· React Hook Form is a tiny library without any dependencies.
· Minimizes the number of re-renders and faster mounting, striving to provide the best user experience.
· very simple to use
the first thing we will need is, install the dependencies to use
npm install react-hook-form
npm install antd
Next we will create the following document structure:
login will be the component that will contain our form, inputs will take care of managing the ant elements that you want to use with hook forms
In app, we use some layout styles of ant design, this only to make a more “fancy” form for practice.
our app will look like this:
next we will create the inputs file, this will contain all the ant desing elements that we will need for this example we will use a:
-basic input
-select
-switch
Our basic input will only receive a placeholder as a parameter, the select will receive a default value to show when mounted on the DOM, and the remaining values.finally the switch will appear by default as true
once these elements are created, we can proceed to configure our login.
The first thing will be to import these elements from the library:
import {useForm, Controller} from “react-hook-form”;
after that we will destructuring the useForm to get the methods we need to implement a form
const {handleSubmit, control, errors, reset} = useForm ();
then we will create our field and manage its value through the react hook form.
Controller: its a wrapper component,Each accessory that passes to the Controller component will be sent to the instance of the component that you provided with the accessory as an accessory. this will conect our input,select or swith to the inner state of the form.
as:the component that we want to use in our form such as select.
Control: control object is from invoking useForm. it’s optional if you are using FormContext.
DefaultValue: as its name implies, it is the default value of the component.
Rules: This object will be cached within the controller. allows sending validations as regex, or preventing the field from being sent null.
Another important detail of rules, is that it allows sending more than one validation, in the case of email we verify that this field is not empty and that it complies with the email format.
(do not use an input type field for emails, there is already a field that is responsible for performing these validations for us, this was just for example)
our login component will look like this
in our form in the onsubmit event we will use the handlesubmit method of reack hook form, it will capture the values and send them to the function that we indicate.
In this function we will have an object with all the values that we have created in the form.
finally in onsubmit we create a function that after passing certain seconds will reset the form, this with the idea of simulating that the data has been sent by an API.
An important thing about the reset method, when using it together with the controller, we must pass it an object with the names of each field that we use to change its value.
Final Form
Complete Code
