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

Подписаться 7 тыс.

Просмотров 52 тыс.

50% 1

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:
github.com/leoroese/reacthook...
Part1 Finish: github.com/leoroese/reacthook...
React-Hook-Form Docs:
react-hook-form.com/
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

Опубликовано:

8 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 89

@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!

@JoshPeak 2 года назад

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

@kabulzhan 2 года назад

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

@codingwithlucy 2 года назад

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!

@brodan66 Год назад

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

@user-zc5dk2jv9d 2 года назад

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

@tony3fk 7 месяцев назад

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

@luishron Год назад

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

@konstantinvoronin4687 2 года назад

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

@alexssanderleal1801 2 года назад

Thank you for the tutorial! This is awesome!

@eduardofagundesferreira8891 Год назад

Muito, mas muito obrigado mesmo. Este vídeo me ajudou a finalmente entender com aplicar MUI com react. Parabéns pra você. Ótima aula!

@mikemalone4867 2 года назад

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!

@CodeDunks 2 года назад

Glad it was helpful!

@mateovivas6920 2 года назад

I agree with this guy, it's been great help understanding registers and validation! This is EXACTLY what I was looking for.

@bluebill1049 3 года назад

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

@CodeDunks 3 года назад

Thank you Bill! If you are the same as @Bluebill (have the same profile image) I thank you for all the community help and contributions to this great library. I have read many of your answers across spectrum with regards to this library which have helped me a lot.

@bluebill1049 3 года назад

@@CodeDunks You are most welcome. ❤️

@zakk.1134 Год назад

my dude this came in clutch

@pro4v 3 месяца назад

You did a great job explaining, thank you

@wheeler553 Год назад

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.

@ytbcmt4686 2 года назад

Subbed instantly! Respect from India.

@youneshenni5417 Год назад

Excellent video

@korndev6862 Год назад

that great tutorial! thank you.

@justinlee3453 Год назад

awesome tut, thanks a lot

@edman3d593 2 года назад

this video was so helpful, 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!

@CodeDunks Год назад

Thank you!

@bill517 2 года назад

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! =)

@joybordhen8188 3 года назад

So, after watching your video, I went for this custom input field. Thank you for the video. It helped a lot. ( )} />

@pepeschwerter9847 2 года назад

Really helpful video, thx man!

@mdferdous2764 Год назад

very helpful and details video, thank you bro.

@qianjinqin8293 2 года назад

Thank you!

@parksj101 Год назад

really excellent video! exactly what I was looking for... one note, adding `Schema` to `useFormContext` provides type safety ``` const { control, register, formState: { errors }, } = useFormContext();( ```

@SabbirHossain-gy3zk 2 года назад

it was really very helpful for me... thanks a lot :)

@oleglivcha5041 2 года назад

Terse and Great!

@andersonfornalski1944 2 года назад

nossa cara, voce me ajudou muito mesmo, sou junior em programao React!!! muito obrigado de coracao ============================= thanks man, you really helped me, I'm a junior in React programming!!! thank you very much from my heart

@CodeDunks 2 года назад

Valeu Anderson. Obrigado pela traducao, mas também só Brasileiro haha. Boa sorte com React!

@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!

@jacqueskorb879 2 года назад

Hi. 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`.

@CodeDunks Год назад

Whoa, that's cool. I appreciate this info!

@danieltkach2330 Год назад

Really good stuff Leo! Can you create one for AntD, in a slower fashion? Or maybe even create a course exclusively on this, like a 5 hour thing where you go into more detail step by step showing several components from AntD and also how to connect them with RHF. This is good, but left me wanting for more.

@akashshrestha01 2 года назад

great

@kevyyar 2 года назад

How did you build the template-cli? Looks interesting how you scaffold the project quick

@Programandoenc 3 года назад

Hello! Thanks for the video, Is there any difference between using Controller as a wrap for Textfield than just passing "register" as an inputRef ?

@CodeDunks 3 года назад

Hey there, I used to not notice any difference in previous versions of react hook form. But for version 7 It seemed using controllers was the specified way in their documentation and I believe at the time I wasn’t able to get it working with inputRef, but I may be mistaken it’s been a little while. I’ve used inputRef in version 6 however

@danieltkach2330 Год назад

Great teaching! Can you please do stuff on Ant Design? There's really no good stuff on this here yet, it's a great chance, and I really need it lol Thank you bro, keep it coming.

@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.

@victoryyugeshre-turns2498 3 года назад

Please make a complex form Using React hook form & meterial ui including edit functionality

@CodeDunks 3 года назад

Was planning on making one here soon and I appreciate the idea!

@peterboomsma 2 года назад

Great video! Thanks, quick question. I have a component with multiple forms on it. It seems that I cannot add properties to a schema that a form does not supply, (get an error `repeatPassword` is required which makes sense). So how do I add validation for multiple forms?

@peterboomsma 2 года назад

resolved it with this ``` const {control: controlLogin, handleSubmit: handleSubmitLogin, formState: {errors: errorsLogin}} = useForm({ resolver: yupResolver(loginSchema), }); ```

@CodeDunks 2 года назад

@@peterboomsma Nice!

@jeromealtariba7339 2 года назад

thks. very good as usual. BTW , have you found why eslint is sooo slow to check static typing? Facing up this same annoying behavior, but coudn't figure out where it comes from. very disturbing when programming. seems to be related MUI v5 but not sure

@CodeDunks 2 года назад

Hey Jerome, I have actually noticed that sometimes. Also not sure if related to MUI v5 or just something else.

@aanhlle 2 года назад

Thanks, Leo! as a beginner FE dev I found this guide not quite hard to follow along. Just my 2 cents is just maybe you can slow down a little bit to explain on important concept (feel a bit rushing). Anyway a nice topic maybe in the future is Git workflow (with team via remote repo etc), very useful I think.

@CodeDunks 2 года назад

Thanks for the feedback!

@danielpreza4159 Год назад

what about DatePicker fields. Do you have any video talking about them?

@aleksandrmatyka3118 2 года назад

But 1 question how validate field before onSubmit press, just when type and then clean values

@Justin-qp4ns 2 года назад

Is there a way to keep the validation schema in SubComponent1 and SubComponent2 and not in the parant component?

@CodeDunks 2 года назад

Hmm I have wondered this as well. The only way I can maybe think of is by doing some type of object combining. Where you define and export each schema in the subComponent, and then in the one with useForm(), you combine the two with something like type schema = sub1Schema & sub2Schema

@Justin-qp4ns 2 года назад

@@CodeDunks sound like a plan.

@liorzadok3720 Год назад

thank you for all the information. I'm new to coding , and I installed the yup and @hookform/resolvers, and I got - " npm i yup up to date, audited 1551 packages in 5s 251 packages are looking for funding 74 vulnerabilities (69 moderate, 5 high) To address issues that do not require attention, run: npm audit fix To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details." it did the same thing for @hookform/resolvers....what does it mean? I understand this "audit" is something new to npm but is it safe to use these packages? thanks

@brentpereira59 2 года назад

What keyboard are you using?

@ConnorM468 2 года назад

I can't seem to figure out how to get the cursor to go to the input field when the form is submited with an empty or invalid field. Any ideas?

@CodeDunks 2 года назад

I am not sure if it auto focuses on the input field. You might need to add extra focus logic for the input field you want it to focus on.

@sebastiandrozd233 2 года назад

@@CodeDunks have you figured out how to make this? This only occurs with element. Passing {...register} f.e. to default html element like works just fine getting cursor on field.

@CodeDunks 2 года назад

@@sebastiandrozd233 I haven't really looked into it besides the first comment a couple months ago.

@thenub8532 Год назад

does anyone it achieved create a hook with the Controller and the render prop? With typescript.

@mertgenc9890 3 года назад

Can you make a base input component using material or ant input etc with typescript and react hook form. how can i pass the props ? im so confused.

@CodeDunks 3 года назад

You could try and pass props down to the input level base component through the materialUI Textfield like so the InputProps={{}} should allow you to pass down props to the lowest level as discussed here material-ui.com/api/text-field/ methods. methods are from useForm() from react-hook-form. for example const methods = useForm()

@mertgenc9890 3 года назад

Thank you so much.

@lucasvy6747 3 года назад

please make a form that captures de data using react hook form and works as an adding column for a MUIDataTable, like and Add button, edit button and Delete.

@CodeDunks 3 года назад

Was planning on doing something similar here when I have the chance to get to it. Appreciate the comment!

@user-sj8lm9jz4i 3 года назад

Hey! Which version of react-hook-form is used here ?

@CodeDunks 3 года назад

Version 7

@andrewkorin 2 года назад

привіт! не шукаєш проект? :) ми шукаємо фронт інженера в львівський офіс американського стартапу ;)

@alfredmadere9030 Год назад

I could not get handleSubmit to be called once i switched to using Controller component, very frustrating

@gosnooky 3 года назад

24:30 just do errors.email?.message ?? 'default message'

@abuhossain4274 Год назад

can i get template kit!

@gosnooky 3 года назад

Your import ordering triggers my OCD.

@mohammedabdelgawad4176 2 года назад

Doaa is a girl lol

@piotrrutkowski7407 Год назад

I like it but I don't understand what's the point of doing that so fast while trying to explain sth to someone... it's just pointless

@omarbadial3880 Год назад

I wish You didnt use Typescript

@avivavraham9247 2 года назад

Hi Leo, thank you for the tutorial. It helps a lot! Getting to the SubComponents1 & 2, doing exactly what you did I keep getting the following error on the 'helperText': i.imgur.com/O3WKK8Y.png Any idea on how to solve? Thank you!

@CodeDunks 2 года назад

Seems like you are trying to pass in a FieldError type where it is expecting a ReactNode. stackoverflow.com/questions/58123398/when-to-use-jsx-element-vs-reactnode-vs-reactelement The submitted answer does a good job in describing what the ReactNode typing is. Pretty much you can't pass in whatever part of that is a FieldError type. You either need to pass in a component or a string value

@dolusdirectu Год назад

Hey, I have the same error. Have you been able to figure it out?

@dylandu832 Год назад

@@dolusdirectu I was able to solve this by doing this: "helperText={errors.email ? errors.email?.message?.toString() : ''} ", but I am not sure if this the best solution, and why Leo's codes do not have this kind of error, wondering 🙄

@dolusdirectu Год назад

@@dylandu832 thx broski