Create a simple form in React using react-hook-form
Today, we’ll show you how to create a simple form in React using react-hook-form package. In the previous article, we have explained how to create a form without any package in React.
In this form example, we will use a very popular library to build a form and in the upcoming examples, we’ll show you how to validate it.
Demo Application
Create a simple form in React using react-hook-form
1. Project structure
Refer to the following React project structure for the form example.
- form-using-react-hook-form
- node_modules
- public
- index.html
- src
- App.js
- index.css
- index.js
- package-lock.json
- package.json
- README.md
2. Package dependencies
In this example, we have to install the react-hook-form npm package. Run the following command to install the react-hook-form.
1 | npm i react-hook-form |
You will find the version of following packages in React application.
3. Design a simple form
To start with, we will create a simple form design and store the data on click of the submit button.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | import React, { useState } from 'react'; function App() { const [data, setData] = useState(); const onSubmit = () => { } return <form onSubmit={onSubmit}> <h4>Form using react-hook-form - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h4> <div> <label>Name</label> <input placeholder='Name' /> </div> <div> <label>Email</label> <input placeholder='Email' /> </div> <div> <label>Website</label> <input placeholder='Website' /> </div> <div> <button>Submit</button> </div> {data && <pre>{JSON.stringify(data, null, 2)}</pre>} </form> } export default App; |
Here, we have added three different fields named name, email, and website. At the end of the form we are displaying the form values on the page.
4. Integrate the react-hook-form
Now, let’s integrate the react-hook-form in the above form. We have to add the following code in the existing form.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | import { useForm } from 'react-hook-form'; function App() { const { register, handleSubmit } = useForm(); const onSubmit = (formData) => { setData(formData); } return <form onSubmit={handleSubmit(onSubmit)}> ... ... <input placeholder='Name' {...register('name')} /> ... ... <input placeholder='Email' {...register('email')} /> ... ... <input placeholder='Website' {...register('website')} /> ... ... </form> } export default App; |
In the above code, we have used the register() method to register the fields and used the handleSubmit() method to get the submitted data on submit. Both the methods, we have exported from the useForm().
5. Output
Let’s put all the code together and see how it looks.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | import React, { useState } from 'react'; import { useForm } from 'react-hook-form'; function App() { const [data, setData] = useState(); const { register, handleSubmit } = useForm(); const onSubmit = (formData) => { setData(formData); } return <form onSubmit={handleSubmit(onSubmit)}> <h4>Form using react-hook-form - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h4> <div> <label>Name</label> <input placeholder='Name' {...register('name')} /> </div> <div> <label>Email</label> <input placeholder='Email' {...register('email')} /> </div> <div> <label>Website</label> <input placeholder='Website' {...register('website')} /> </div> <div> <button>Submit</button> </div> {data && <pre>{JSON.stringify(data, null, 2)}</pre>} </form> } export default App; |
Run the application and check the output in the browser.
That’s it for today.
Thank you for reading. Happy Coding..!! 🙂
