Posted on Apr 8

Forms in react with react-hook-form

#react #reacthookform #forms #webdeveloper

Hey Coders,

Long time ago...

Here we have a new article about how to add "superpowers" to your forms to add validations, errors and more.

As always we begin coding!!

1.- In your directory of your preference, open a terminal and run this code:

npm create vite@latest

2.- Remove existing code in App.jsx and add this code:

<h1>React Forms</h1>

Here we have a cleaned solution to implement our small project!!

3.- Create a directory in src called forms and create a form.jsx and form.css with these code:

form.jsx

import React from 'react'; import './form.css'; export default function Form() { return ( <div className="add-place"> <div className="form"> <form> <h1>Add Place</h1> <div className="form-field"> <label htmlFor="title">Title: </label> <input type="text" placeholder="Title" name="title" id="title" /> </div> <div className="form-field"> <label htmlFor="description">Description: </label> <input type="text" placeholder="Description" name="description" id="description" /> </div> <button type="submit">Add Place</button> </form> </div> </div> ); }

form.css

.add-place { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #1e1e1e; font-family: Arial, sans-serif; color: #e0e0e0; width: 100vw; } .form { background-color: #2c2c2c; padding: 2rem; border-radius: 8px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); width: 100%; max-width: 400px; } .form h1 { margin-bottom: 1rem; font-size: 1.5rem; color: #f0f0f0; } .form-field { margin-bottom: 1.5rem; } .form-field label { display: block; margin-bottom: 0.5rem; font-weight: bold; color: #cccccc; } .form-field input { width: 100%; padding: 0.5rem; border: 1px solid #444; border-radius: 4px; background-color: #3a3a3a; color: #e0e0e0; font-size: 1rem; } .form-field input:focus { border-color: #6200ea; outline: none; } button[type="submit"] { width: 100%; padding: 0.75rem; border: none; border-radius: 4px; background-color: #6200ea; color: #fff; font-size: 1rem; cursor: pointer; transition: background-color 0.3s ease; } button[type="submit"]:hover { background-color: #3700b3; } .error { color: #FF6961; }

The result will be:

From this part, we have the something more interesting:

4.- Install react-hook-form, yup and resolver dependencies

npm install react-hook-form @hookform/resolvers yup

Add the rest of the code to the form in react

Add the imports:

import { useForm } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; import * as yup from 'yup';

Add the schema with validations, the resolver with the useForm where we add the register, handleSubmit, formState: { errors }

const schema = yup.object().shape({ title: yup.string().required('Title is required'), description: yup.string().required('Description is required'), }); const { register, handleSubmit, formState: { errors } } = useForm({ resolver: yupResolver(schema), });

The onSubmit function, where we can add the functionality after clicked in Save

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

Finally, we add the {...register['title']} and the validation part in the html

<input type="text" placeholder="Title" name="title" id="title" {...register('title')} /> {errors.title && <p className="error">{errors.title.message}</p>}

We should add the same for the description input

Finally the final result in form.jsx is:

import React from 'react'; import { useForm } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; import * as yup from 'yup'; import './form.css'; export default function Form() { const schema = yup.object().shape({ title: yup.string().required('Title is required'), description: yup.string().required('Description is required'), }); const { register, handleSubmit, formState: { errors } } = useForm({ resolver: yupResolver(schema), }); const onSubmit = (data) => { console.log(data); }; return ( <div className="add-place"> <div className="form"> <form onSubmit={handleSubmit(onSubmit)}> <h1>Add Place</h1> <div className="form-field"> <label htmlFor="title">Title: </label> <input type="text" placeholder="Title" name="title" id="title" {...register('title')} /> {errors.title && <p className="error">{errors.title.message}</p>} </div> <div className="form-field"> <label htmlFor="description">Description: </label> <input type="text" placeholder="Description" name="description" id="description" {...register('description')} /> {errors.description && <p className="error">{errors.description.message}</p>} </div> <button type="submit">Add Place</button> </form> </div> </div> ); }

And there you go!!

We have our form validated: