Тёмный

React Hook Form V7 - Get Started 

Beier Luo
Подписаться 3,3 тыс.
Просмотров 92 тыс.
50% 1

Updated version 2021: • React Hook Form - Get ...
Basic usage with React Hook Form V7.
Base CSB:
codesandbox.io/s/brave-elgama...
Complete CSB:
codesandbox.io/s/pensive-jeps...

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

 

26 мар 2021

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 136   
@namlevan2929
@namlevan2929 3 года назад
very straightforward. finally, I escaped from Formik
@aaronemery7798
@aaronemery7798 2 года назад
I'm late to the party on this, but this is so damn powerful! i'm right in the middle of form creation and have been writing custom hooks and validation and i'm 100% switching to this. So many out of the box features i haven't had a chance to implement yet. Thank you!
@bluebill1049
@bluebill1049 2 года назад
You are most welcome!
@novailoveyou
@novailoveyou 3 года назад
This is great! Top in class dev experience with an amazing form at the end Thank you! Much love!
@bluebill1049
@bluebill1049 3 года назад
Amazing to hear! Thank you.
@kadoosh
@kadoosh 3 года назад
My mind was blown when I saw how often it re-renders.
@bluebill1049
@bluebill1049 3 года назад
Thanks, Kai. Yes, you can subscribe to individual formState with v7. 💪🏻 Thank you for your support over the years.
@kadoosh
@kadoosh 3 года назад
@@bluebill1049 sure man, thank YOU for the aswesome library
@RealEstate3D
@RealEstate3D 3 года назад
Thank you very much Bill. It seems you don’t need much sleep. Your work for the community is awesome.
@bluebill1049
@bluebill1049 3 года назад
Thanks, buddy, I try my best and this is probably going to be my last open-source project so I want this to be the best.
@nearhuscarl386
@nearhuscarl386 3 года назад
@@bluebill1049 May I ask why? It's sad to see somebody brilliant like you leave the open source community :(
@luaneaquino7835
@luaneaquino7835 3 года назад
@@bluebill1049 you are doing a great work, thanks!
@bluebill1049
@bluebill1049 3 года назад
@@luaneaquino7835 Thank you very much, Luane.
@bluebill1049
@bluebill1049 3 года назад
@@nearhuscarl386 Don't worry, I am still going strong to support and maintain this library. I just probably will only focus on this one.
@lollolich2399
@lollolich2399 3 года назад
Wow, this library is gonna save a load of my time. What a great tool!
@bluebill1049
@bluebill1049 3 года назад
Amazing to hear!
@taipham6799
@taipham6799 3 года назад
and the last word I want to say this video so amazing. please release part 2.
@bluebill1049
@bluebill1049 3 года назад
Thank you, Tai. Once the lib's maintenance is slows down a bit, I will make more videos!
@sergiob3698
@sergiob3698 3 года назад
Glad you use TS. thank you.
@jeramelalinsugay6143
@jeramelalinsugay6143 2 года назад
Amazing, so powerful it helps a lot with the form validation and subscription of fields are very handy!
@bluebill1049
@bluebill1049 2 года назад
Awesome to hear!
@jeramelalinsugay6143
@jeramelalinsugay6143 2 года назад
@@bluebill1049 well done!
@hesamalavi9
@hesamalavi9 3 года назад
Simple yet powerful!
@bluebill1049
@bluebill1049 3 года назад
Thank you :P mate ~
@TurboPenguinnn
@TurboPenguinnn 3 года назад
Thanks man. Perfect explanation to upgrade to V7 and how to use validation
@bluebill1049
@bluebill1049 3 года назад
Thank you.
@kehindesalaudeen9241
@kehindesalaudeen9241 Год назад
@@bluebill1049 yeah
@bluebill1049
@bluebill1049 Год назад
@@kehindesalaudeen9241 Thank you
@skendereducation6276
@skendereducation6276 Год назад
Good job man!
@tomascarignano5002
@tomascarignano5002 2 года назад
Thank you for this amazing library!
@bluebill1049
@bluebill1049 2 года назад
You are welcome.
@YiannisChristodoulou
@YiannisChristodoulou 2 года назад
Great tutorial. Thank you so much, Bill.
@bluebill1049
@bluebill1049 2 года назад
You are most welcome, Yiannis.
@jedliu8671
@jedliu8671 3 года назад
RHF is a great project, especially with so many CSB examples! Great job! Thank you!
@bluebill1049
@bluebill1049 3 года назад
That's awesome to hear!
@logic7878
@logic7878 3 года назад
Thank you. Nice showcase!
@bluebill1049
@bluebill1049 3 года назад
Awesome to hear, glad you like it.
@Franiveliuselmago
@Franiveliuselmago Год назад
This was really helpful. Thanks a lot.
@bluebill1049
@bluebill1049 Год назад
You are welcome.
@sougataghar1179
@sougataghar1179 3 года назад
I barely subscribe but when I do , that guy is awesome . Thanks for teaching me !
@bluebill1049
@bluebill1049 3 года назад
Thank you very much for the support!
@binov5012
@binov5012 2 года назад
Great job guy🏆
@bluebill1049
@bluebill1049 2 года назад
@Ernuna
@Ernuna 3 года назад
Thank you sir for you explanation, you are the reason why I can solve my problems with RHF at my job )))
@bluebill1049
@bluebill1049 3 года назад
a pleasure to hear mate.
@ricardorien
@ricardorien 3 года назад
this is amazing, simple and powerfull!
@bluebill1049
@bluebill1049 3 года назад
Awesome to hear! yes!
@vgvdms
@vgvdms 2 года назад
This is Lovely. simple and powerful. Thanks a lot :)
@bluebill1049
@bluebill1049 2 года назад
Thank you.
@MrAbuYT
@MrAbuYT 2 года назад
Thanks for that overview!
@bluebill1049
@bluebill1049 2 года назад
Thank you!
@ProgrammerError
@ProgrammerError 3 года назад
Great work! How would you integrate with file inputs and Material-UI buttons?
@migueljurado6783
@migueljurado6783 3 года назад
You are the best bro! Thanks for your explanation :3
@bluebill1049
@bluebill1049 3 года назад
You are most welcome.
@grenadier4702
@grenadier4702 3 года назад
Hello, man. I'm really interested in creating hooks with react myself. Did it take you long time to develop such library? Btw, thanks a lot for it! It really is helpful and makes form developing much much easier!
@deepasimplecooking
@deepasimplecooking 2 года назад
Thank you, nice explanation 👍
@bluebill1049
@bluebill1049 2 года назад
Welcome.
@sombert1054
@sombert1054 2 года назад
Great work! Thanks a lot!
@bluebill1049
@bluebill1049 2 года назад
You are welcome!
@thesodabomber7411
@thesodabomber7411 3 года назад
Thank you for this!
@bluebill1049
@bluebill1049 3 года назад
Welcome!
@apurv5847
@apurv5847 3 года назад
If possible please make a video on how to use libraries such as yup and more advanced libraries. Because most of the other resources out there are old and don't work as expected.
@mattmarkus4868
@mattmarkus4868 2 года назад
thanks for this! do you need to have a form though? Can you just have inputs and a button and do the same thing? Like a button with an onClick that react hook form calls with the data? Or does it have to be a form with onSubmit ?
@bluediu1714
@bluediu1714 2 года назад
this is amazing, thank you 😮😮
@bluebill1049
@bluebill1049 2 года назад
you are welcome! awesome to hear.
@nicholassmith6412
@nicholassmith6412 3 года назад
Useful, thank you. Have you got a video of this using Yup for form validation (e.g. for an email field)?
@bluebill1049
@bluebill1049 3 года назад
You are welcome.
@rohan1765
@rohan1765 3 года назад
Can we do onChange validations , example -> firstname is required , if I type "a" in firstname and then hit backspace then errorMessage should be there instantaneously?
@amirmoradnejad9976
@amirmoradnejad9976 2 года назад
thank you.
@hassaniyouness8024
@hassaniyouness8024 3 года назад
much helpful thank u so much
@bluebill1049
@bluebill1049 3 года назад
welcome!
@christopherobrien6215
@christopherobrien6215 3 года назад
tutorials with typescript are needed!
@jsricochet
@jsricochet Год назад
Thanks for the video and this great lib. The DX is more enjoyable than the one with Formik. Both libs are great, but yours allows to be up and running way faster.
@bluebill1049
@bluebill1049 Год назад
Awesome to hear!
@kunglane
@kunglane 3 года назад
mindblowing👌
@HoshiramaSensei
@HoshiramaSensei 3 года назад
thanks a lot!
@bluebill1049
@bluebill1049 3 года назад
You are welcome.
@asifkaif356
@asifkaif356 3 года назад
form validation in react hook form v7 using Material ui textfield components, please make tutorial on this
@limyohwan
@limyohwan 3 года назад
how to customize the 'border' color when the field is selected
@hooyah
@hooyah 2 года назад
I hope one day I can be a useful person like you bil.
@bluebill1049
@bluebill1049 2 года назад
Yes, you will. I am just an ordinary individual like yourself. In fact, we also share a comment attribute: kind heart.
@onion_____
@onion_____ 3 года назад
thanks this was legit
@DevOpsHasan
@DevOpsHasan 3 года назад
Please share how to load data in edit operation.
@abdulqader7516
@abdulqader7516 3 года назад
I am submitting an API with react hook form,but the data fields are taken for the second time not the first time in handleSubmit(onSubmit())
@AliRaza-nm3eu
@AliRaza-nm3eu Год назад
really helpful sir...
@bluebill1049
@bluebill1049 Год назад
Most welcome.
@waqarahmad8979
@waqarahmad8979 2 года назад
How to set back form values to null once we submit it????
@Evkayne
@Evkayne 3 года назад
thank you man
@bluebill1049
@bluebill1049 3 года назад
Welcome.
@bluebill1049
@bluebill1049 2 года назад
Appolgize for the keyboard noise. I am planing to redo this video.
@jsricochet
@jsricochet Год назад
I actually liked it. Keyboard sound == feeling at home :)
@marcinmaj3609
@marcinmaj3609 2 года назад
Multi-select text input with react-select without typescript. Please
@edigaprudhvigoud2585
@edigaprudhvigoud2585 3 года назад
This video is Amazing. For checkbox I want to submit a value instead of false when it is unchecked.How can we do that?
@bluebill1049
@bluebill1049 3 года назад
I would build a controlled component and wrapped with `Controller`.
@asimgiri4269
@asimgiri4269 3 года назад
Hey Bill, I am having an issue when trying to use RHF with material UI chekbox, This is my code : Even after it is checked I am getting rememberMe=" " instead of true or false.
@bluebill1049
@bluebill1049 3 года назад
Do you want to share a simple codesandbox and ask this question at github discussion?
@georgesmbella6153
@georgesmbella6153 3 года назад
It definitely seems to be very good library. It will make our development easier, after some experience on Formik. However the video is not that comfortable to watch because of the sounds when typing on the keyboard. Hope the other tuts videos are smoother
@bluebill1049
@bluebill1049 3 года назад
Thanks for the feedback. I am not a professional RU-vidr, my focus will remain on the lib itself, but if I make another video, this will be noted.
@Matt36788
@Matt36788 3 года назад
valueAsNumber..... 🤯
@ABsazerNer
@ABsazerNer 3 года назад
I already using hook form and I love it, but what the new in v7?
@bluebill1049
@bluebill1049 3 года назад
V7 is a huge jump in terms of Typescript support, performance, and better shcmea support. There are heaps of improvement overall.
@bluebill1049
@bluebill1049 3 года назад
forgot one thing important which we worked very hard for. package reduced another 13% percentage. it's even smaller now. 💪🏻
@ABsazerNer
@ABsazerNer 3 года назад
@@bluebill1049 wonderful👍👍
@nurettinsen473
@nurettinsen473 2 года назад
how to get data CustomInput ı cannot get data say undefıned
@nhan6453
@nhan6453 3 года назад
let me ask how to upload file??
@jeromeabril5001
@jeromeabril5001 3 года назад
Just a question: is it better to use hook forms than react hooks(use States) when passing data to restful apis using axios.
@bluebill1049
@bluebill1049 3 года назад
It really depends... I would use hook form for any forms, but I am biased. If your form is really simple, use useState otherwise learning hook form is worth a while.
@jeromeabril5001
@jeromeabril5001 3 года назад
@@bluebill1049 Thanks so much! already converted some of my forms to this. But, I ran into a problem when I had to return a nested object from the form. 😭
@bluebill1049
@bluebill1049 3 года назад
@@jeromeabril5001 name="yourDetails.firstName" ? something that like that will return an object.
@jeromeabril5001
@jeromeabril5001 3 года назад
@@bluebill1049 i need an object that is nested though... like {name:jerome , loans:{ loan:1 , loan:2}}
@jeromeabril5001
@jeromeabril5001 3 года назад
@@bluebill1049 OMG i solved it, didn't know that it had to be a string. thanks so much for the help!
@zulianadryan686
@zulianadryan686 2 года назад
maxLength and minLength are not functioning in input as number type
@bluebill1049
@bluebill1049 2 года назад
They are not meant to be used for number, min and max is what you after.
@ApoorvMote
@ApoorvMote 3 года назад
Bill I got array field and inside I have 2 level nested conditional. 1st level works but 2nd doesn't work. Maybe v7 will fix it.
@bluebill1049
@bluebill1049 3 года назад
check this folder: github.com/react-hook-form/react-hook-form/tree/master/examples and search array of array.
@ApoorvMote
@ApoorvMote 3 года назад
@@bluebill1049 Its not array of array but nesting conditional that is an issue. I will share full code with bug report. And thanks for the value as number and date trick. I didn't know that.
@RealEstate3D
@RealEstate3D 3 года назад
I have two code sandboxes with 2 level nested array in a discussion with Bill under github.com/react-hook-form/react-hook-form/discussions/4515 . I don't know where you got stuck, but when you provide a CSB I can have a look at our differences.
@bluebill1049
@bluebill1049 3 года назад
@@RealEstate3D Thank you for your help. The issue has been answered in Github: github.com/react-hook-form/react-hook-form/issues/4545
@RealEstate3D
@RealEstate3D 3 года назад
@@bluebill1049 Unfortunately above CSB runs with v6. Updating to v7-RC8 breaks things with: "TypeError: path.split is not a function". Has old syntax as input attribute -> ref={register} -> Correct now for v7rc8: codesandbox.io/s/react-hook-form-useform-template-forked-05ocy?file=/src/index.js
@hooyah
@hooyah 2 года назад
help me. i wtach this video and i got error when im trying make error handling for age. this is my code maybe same as this video Age: {errors?.age && {errors?.age?.message}} //message in get error the error said Property 'message' does not exist on type '{ toString?: {} | undefined; toFixed?: {} | undefined; toExponential?: {} | undefined; toPrecision?: {} | undefined; valueOf?: {} | undefined; toLocaleString?: {} | undefined; }'.ts(2339) i dont understand why, but when im running app. its working well.
@bluebill1049
@bluebill1049 2 года назад
would you like to send a question at Github discussion with a codesandbox? it should be something minor to fix.
@Shakas420
@Shakas420 3 года назад
Using some blue switches there aren't you? 😅
@thedimasss
@thedimasss 2 года назад
Please cancel noise of keyboard
@mariosacchi9290
@mariosacchi9290 3 года назад
please use a microphone disconnected from your keyboard next time
@AntNZ
@AntNZ 3 года назад
Love the tutorial. HATE ya keyboard!!
@odntht
@odntht 2 года назад
Awesome tutorial, but the typing sound is really annoying
@bluebill1049
@bluebill1049 2 года назад
Thanks for the feedback, will try to avoid that with other videos.
@thepickicool97
@thepickicool97 2 года назад
I honestly think that the v6 was easier to use :( This is making me sad...
@bluebill1049
@bluebill1049 2 года назад
keep use v6, it's still maintained.
@judgewest2000
@judgewest2000 2 года назад
Nice one - keyboard WAY too loud!
@bluebill1049
@bluebill1049 2 года назад
Will get a proper mic next video.
@judgewest2000
@judgewest2000 2 года назад
@@bluebill1049 a quieter keyboard. Your audio for yourself is fine.
@bluebill1049
@bluebill1049 2 года назад
@@judgewest2000 because i don't have mic and that's why you are hearing the keyboard (MacBook, type and as i speak)
@judgewest2000
@judgewest2000 2 года назад
@@bluebill1049 aha!! In that case definitely yes! One LAST thought if you want to keep costs down (like I say the mic is fine for your voice), a cheap external keyboard for like $20
@LongBoy.0
@LongBoy.0 2 года назад
the keyboard sounds are annoying lol.