React Hook Form with ZOD

0 12
Avatar for amani2765
5 months ago

Hello,

What differs between using ZOD without React Hook Form and using ZOD with React Hook Form?

1 - Use React Hook Form doesn't rerender full component when sending to the backend of the website.

2 - It will be easier to handle the errors in the form.

For example, previously used for ZOD to validate and then use of name and value and use of a lot of use State components then it could be just in one place, for example:

const {addProduct,handleaddProduct}=useForm()

3- Custom error validation:

The product name should be no less than 3 characters and then the price should be a positive integer without custom validation for each component like the following example:

<form onSubmit={handleaddProduct(data)=>console.log(data)}>

<input {...addProduct('name'),{required:"Name is required",minLength:{value=3,pattern="Min length 3 characters"}>

<input {...addProduct('price'),{required:'Price is required",minValue:1,pattern:"Positive price"}>

</form>

1
$ 0.00
Avatar for amani2765
5 months ago

Comments