React Hook Form Tutorial v7 ✅ - A Modern way to Create Forms in React JS [2022] 😃

Learn how to Create forms in React JS using React Hook Form with Typescript, apply Yup validation and integrate with Controller wrapper in libraries such as Material UI, Chakra UI, AntDesign.

In this tutorial you will learn how to register different types of inputs such as: string, data, checkbox, radio, files, how to validate them with yupResolver or write your own resolver with useCallback, create reusable components using generics and offered types by the React Hook Form 7 and in the end I will show you how easy is to integrate the library with others using the Controller.

Learn how to display validation errors nicely on the screen.

This library uses a lot of custom hooks so make sure that you understand what they are!

React Hook Form V7 is AWESOME.
You will see how easy and fast this library is!
Use it immediately in your projects after you watch the entire tutorial!

—--------------------------------------------------
Timestamps:

00:00 - Intro
00:43 - Register and Controller
08:36 - Yup Validation
11:24 - Custom Hook Validation Resolver
22:27 - Custom Inputs using TS Generics
30:24 - Integrate with Material UI, Chakra UI, AntD
35:30 - DevTool

—--------------------------------------------------
Resources:

Commands:
Npm i react-hook-form

Npm i react-select

Validation with YUP: npm install @hookform/resolvers yup

Dev Tools: npm install -D @hookform/devtools

[gerthvogt]

Hi! I have some problem, hope you can help me. I have some inputs with validation and works fine, but when i try to fill the inputs from a API data, by using hooks, the validation dont see the data in the inputs. Can you give me some help? Thanks and good video :)