React Hook Form V7 with Material UI and Typescript Tutorial | Part 1 -- Setup

In this video, I will help install and understand the basics of React-Hook-Form, a library that makes working with forms an absolute breeze. We will also explore how to directly integrate this library with Typescript and UI kit libraries like Material UI.

Link to starter project to follow along:

React-Hook-Form Docs:

Timestamps
0:00 Intro
4:20 Install react hook form
5:52 useForm
7:40 register
9:10 submit handler
12:00 form state errors
13:30 watch
16:20 validation with yup
21:15 UIKit integration
26:00 FormProvider
31:00 useFormContext

[juanguirao]

The best tutorial I have come accross for React-Hook-Form. No one else explained how the Controller works in enough detail to help me in my project. Thank you!

[stanislavus]

This is the best tutorial content for combining React Hook Form with UI libraries. Very informative, delivered in interesting way. Thank you Sir!

[wheeler]

Thanks for the tutorial. I'm new to RHF but I used it with MUI recently and did not need the Controller component to register the inputs of the TextField MUI components, it worked exactly the same as if you were using native elements. However when I needed to register the value of a date picker the only solution was to bring in the Controller component.

[parksj]

really excellent video! exactly what I was looking for... one note, adding `Schema` to `useFormContext` provides type safety

```
const {
control,
register,
formState: { errors },
} = useFormContext<Schema>();(
```

[tonyfk]

Thanks for this! It's just what I was looking for 🤩

[田中です-md]

I'm a Japanese learning react.
It was a very good video.
Thank you very much.

[kabulzhan]

This tutorial is incredible and your energy while teaching is also very inspiring. Thank you!

[bluebill]

This is awesome! Thank you very much for the tutorial.

[mikemalone]

Thank you so much for making this video! I'm a visual learner so just reading the documentation alone is a bit challenging for me. You answered all of my questions regarding this library as well as how to use it with Material UI. I owe you a beer, sir!

[codingwithlucy]

The FormProvider example blew my mind 🤩 🤯. For ages I've been trying to get my head around how to get everything working properly with subcomponents and this video finally helped things to click! Thank you!

[RudeyTV]

Nice tutorial for beginners, well done! I just wanted to mention that it could be good to know that you can infer the type from the yup schama to keep your types DRY. Basiaclly you could do `type FormInputs = yup.InferType<typeof schema>`.

[brodan]

Simple explanations, quick and pretty useful examples with background of why, how and when use certain things. Great tutorial 🔥, thanks Leo.

[luishron]

Great tutorial! Thanks, Leo! exactly what I needed!

[prov]

You did a great job explaining, thank you

[joybordhen]

So, after watching your video, I went for this custom input field. Thank you for the video. It helped a lot.
<Controller
defaultValue={defaultValue ?? ''}
name={name}
control={control}
render={({ field }) => (
<TextField
variant='standard'
label={label}
fullWidth
margin='dense'
type={type}
placeholder={placeholder}
aria-invalid={errors?.[name] ? true : false}
error={!!errors?.[name]}

{...rest}
{...field}></TextField>
)}
/>

[benedixtify]

is the video out of sync with his voice, or is that my connection?
This is exactly the video I've been looking for for days, thank you.

[konstantinvoronin]

Good job! Thank you! This video is a real diamond!
react hook form 7, typescript, mui

[bill]

That helped a lot. I was trying to pass the IFormInputs as Generic Type to another subcomponent and react hook from was getting freaking crazy. I guess the Provider solution might work! I'm stuck for like hours now, hahah deserved sub and like bro, keep it up!

Nice english btw, barely noticed que tu era brasileiro! =)

[JoshPeak]

This is awesome and came at the perfect timing as I have just been struggling with raw React to create some forms and wanted it to be less code but lean on materialui to make it pretty. This tutorial series ticks a lot of boxes for me. Thank you

[rickhoro]

Nice and useful tutorial series. it would be great if you could add one more video covering MUI Select, Date, Checkbox, Radio Buttons, etc. I'm not clear on how to integrate those. Thanks!