Multistep Form Custom Hook With React And TypeScript
ฝัง
- เผยแพร่เมื่อ 2 มิ.ย. 2024
- Multistep forms are a really common problem you need to solve in React, but there are no good ways to make it expandable to multiple forms. That is why I created this tutorial. It covers how to create a reusable React hook that can convert any existing set of forms into a multistep form.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/r...
JavaScript Only Multistep Form: • Can I Create This Comp...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:25 - Demo
01:05 - Setup
02:12 - useMultistepForm Custom Hook
05:50 - Form JSX/CSS
13:00 - Form Steps JSX/CSS
17:50 - Form Validation
19:12 - Adding Form State
27:00 - Handling Form Submission
#React #WDS #MultistepForm
We need more this type of tutorial to solve problems in real world application. thanks kyle
Thank you so much! Typescript tutorials are so needed. I really appreciate how you go through each step and keep going back to get the needed functionality.
Great video! Would LOVE to see a part 2 of this where you implement some kind of fetch request like you talked about at the end!
Enjoyed this format quick fast under 30mins, packed with useful tips and content. Well worth it. Thanks man
The fact that you are making React tutorials using Vite and Typescript is mega awesome 👍🏼👍🏼👍🏼. Big up to you man.
nothing beats good ol' JS. typescript is for the weaks (writing this comment while waiting for intellisense finish loading)
This one was hard, but im learning typeScript so.. One of your best videos and I watch close to all of them!
this type of multi step form is so clean and ease that I can't be happier and I will definitely use it in my project. Thank you so much
Great video. I usually work with a react-hook-form library and this video gave me some insights on how it probably work under the hood.
Awesome tutorial dude! I dont know why took me so long, but now I'm subscribed!
Loved this tutorial, used a lot of the concepts here in my irl project I am working on, now just gotta learn how to intergrate a signature pad and how to save that and Im golden! Good Stuff
When vite ask you for project name type "." then it will create your project in current directory. no need to move your files
He know bro .but he want to make beginner friendly
Ohh nice.. Maybe it will help someone.. not him but someone...
@@chinmoykr yes Lets meet bro show your github link
I didn't know, thanks for the free information.
@@nabinsaud4688 so the comment need some expert to understand it ?
Nice tutorial! I rewrote this in solid-js. Learn a lot.
I have been looking for such a tutorial. Thanks so much for this 👍👍
What a beautiful Form you created. Wow, very beautiful
A second video from you that gives me good head-ups to understanding react. Thanks for the good content.
Nice videos as always I have found that kyle slowly transform the language from js to ts…. Ts should be the greatest adapter for learning Java and js
Danke! Wow 😲 this is exactly what I was looking for today. Destiny 😄
Love it when a tutorial just comes out at the right time to solve a problem
Glad I could help!
Great tutorial. Love your stuff. This helped me out significantly.
I literally am needing this right now
Great tutorial! I Appreaciate that a lot.
Today i've learned a best way to do some things thanks to you
(1) React-simple-search-filter (form your other video)
(2) Multistep-form-React-Typescript (This is the Brilliant way I guess )
❤❤
This is what I've been searching everyday for past few months...! React with Typescript and Vite
Need more of these react typesrcipt vite projects 🔥 👍
Thank you so much! I've used your approach in my student project and mentioned you in github )
Great video, took a bit but I fully understand it !
Bro thank you so much this is very simple and easy, please keep sharing things like this in react and typescript because it really makes my life easier as a beginner in react
Good luck with your journey with learning React!
@@coderyan thanks
This helped me a lot. Thank you!
Gotta say thank you for having a clear easy to understand voice. All these TH-camrs got thick azz accents and this coding shit is hard enough 😤
Amazing explanation!
Just what I needed 😌
Amazing as always
great video Kyle
Loved the tutorial
Great video. Thanks.
Amazing friend!
Thank you very much it helped me a lot☺
Thank you very much, its an amazing video, very useful
More similar lessons with TS are needed)
Great video as always my friend! Quick tip (you probably know, but anyway) - When you create a Vite app, which you want to be in your CWD, when it asks you for name of project, just type a dot (".") and it will create the project in there. :)
Nice tip! Something I can use in future projects.. pretty new to Vite
1m subs congrats
Kyle, you're the GOAT!
No matter how great a job I land in future, I'll always be grateful for your lessons and will dedicate my success to you. 🙌
Helpline 📲📩⬆️
Questions can come in⬆️
One day this video will save your day
Great content
It great. Thank you very much
Awesome bro love from india
Great video
Thanks King
Amazing thanks 🙏
There is also a ReactPropsWithChildren interface your props could extend. That automatically adds a children field to your props
It is PropsWithChildren actually. Thanks!
There is one problem though what if we want the children to be required. It is optional in the type you mentioned.
The type for children is ReactNode
If children is required by your usecase then you can potentially add `children: ReactNode` without using PropsWithChildren.
Although for such use cases you probably have a specific type you might wanna use for children and not the generic one. So you can do that too.
@@piyushaggarwal5207 you can use the Require util type to set fields of a type to be required.
Please more React + Typescript projects. 🙏
Grate. Thank you !!!
Thanks so heplful!
Hey Kyle,
- How can i implement this in combination with Zod, for example?
- Also, how could i modify the code if i want to use Redux toolkit for this?
- And how can i implement the 'goTo' part so i can quickly jump to a specific part of the form?
- Finallly, Will the state be preserved even if the user refreshes the page or - in a system - log out and log in again?
Lots of questions haha, but thanks anyway!
hey thanks so much for this wonderful tutorial. what if I wanna write the custom validation to any of the individual form field?
Hey,
thanks for the video.
(apart from video's topic) I am in a little bit of confusion in CSS
CONFUSION : can we edit/modify the input box blinking cursor
I want to change the input box cursor blinking animation style from blink to expand (like VS code)
is this possible? if yes then please make a video or at least tell me how can I achieve this??,
if not then why??
Thank you for the guide! Could you please advise if we can use custom validation with this form?
Great video, is there a way to pass the fnction next() or a function goTo() to one of the step elements? that way when you have like a summary step where you review all the information you can go back to a particular step and change the information in it?
Hi I am currently having same challenge. Can someone anyone please respond to this question. Thanks in anticipation.
thanks and great, and I have a doubt from ur Spotify clone video, it is playing only for 30 seconds but how to play it fully. I used audio_preview_url from response data.
awesome thank very match
What's the alternative for steps: ReactElement[] from the custom hook in ReactJS, cuz I don't know TypeScript?
Happy Aayutha Pooja 🥰
Hello! Thanks for tip, but how to implement custom validation for every form in this scheme?
This would have been great 2 years ago before I had to come up with my own as a junior react dev
Tnk excellent ❤❤
Awesome!
Around 26:30, how were you highlighting both instances of 'email' in the value/onChange props?
Ctrl + D, bro
Helpline 📲📩⬆️
Questions can come in⬆️
Лайк не глядя
Any sources on how to accomplish this with Select? Specifically, when the Select is in a separate component?
Hi Web Dev Simplified, can you please make a series on how to create reusable form component, input components, error/validation handling with Hooks. Thanks
Helpline 📲📩⬆️
Questions can come in⬆️
please make a course on typescript bigginer and advanced
Very great tutorial, I want to ask about how to let the code auto format when on save?
In most code editors, you can access the "preference" tab, and then you can search for "on save" -- often, you'll see an option to enable format on save
@@coderyan Thank you!
This is a great way to create a multistep form. Thanks for sharing.
How can we handle a large forms with different sections?
Here as well you have maintained one single state at parents and its updating whole object every onchange event. {...pre, ... currentField}
Having soo many inputs and those are dependent on each other. As we are passing a object down it rerenders all children components. We can pass a primitive data to children and use useCallback hook at the top. But still it doesn't seems like best way. Can you please create a video on that about how to handle a large forms with best performance.
Helpline 📲📩⬆️
Questions can come in⬆️
do you think this project could benefic of using useReducer instead of useState?
Great, but... If you put your buttons (next, back,...) inside your "Step Component". How could you do that?
thank you for this great tutorial sir, please why can i persist data for checkbox ?
How would you use formik with this stepper function for validations
How to add routing and change components with routing within multistep in react-router v6?
Would be so much cooler with carousel animation
Hey Chief!! , im not using, typescript and when i send the steps from app to useMultiStepHook, it is received as an array of objects, so console.log(steps) reads its info, but console.log(steps.lenght) is undefined..
heres what inside steps [ {
'$$typeof': Symbol(react.element),
type: 'div',
key: null,
ref: null,
props: { children: 'One' },
_owner: null,
_store: {}}, {... }, {...} ]
but steps.lenght is undefined.. thnx in advance
Hi Kyle can you help me with this mongoose error : Task validation error path content is required
Im on version 6.6.5 btw
you are fast AF
Anyone have issue with pages 2 and 3 not keeping their data when going back and forwards through the buttons? the data object gets updated.. just not the data staying inside the input fields
Why did you switch to vite? Is CRA dead now? How are the things look like with setting up the react projects now?
CRA isn't quite dead yet, but you really should be using Vite instead.
Since Vite uses ESBuild the dev experience is much faster. Also, it doesn't give you foot guns like polyfilling node_modules into the client which could create some unintentional mess ups.
How can we add frontend validation in this form?
Is there a reason why is the form data state and the form data handler not put in the hook?
That is because the hook is being used purely for managing the logic of the multi-step process. This would then allow for multiple independent multi-steps forms sets to be implemented without having to duplicate and manage that logic.
Plus the form state and submit stuff could change quite abit depending on the type of info being collected and is better left to the dev to handle that individually.
hey bro can yoy make course on backend? your way of teaching is awsome i'm starting css today by the time i will end frontend if you has backend course it will be awsome
I love you
How can i build a booking appointment for a doctor office
what does the & mean when he declared the UserFormProps???
type UserFormProps = UserData & {
updateFields: (fields: Partial) => void;
}
How to achieve this results with Formik and Yup validation
How to use that goTo Function ??
Angular not supporting vite yet?
nice video thanks!
type FormData = typeof INITIAL_DATA; best choice?
neat
What about this… [steps,setSteps]=useState([…] )and just loop over and Set counter :D
At 25:42 you have a lot of repeated code that works, but is there a better way in React?
I have been working in Angular for quite some time and generally make arrays of objects that make repeated stuff. Something like [{field: 'localZip', maxLength: 5, type: 'number'}, {field: 'city', maxLength: 30, type: 'text'}]. That array would make all the HTML elements and the labels would use the field to make something like "Local Zip" and "City".
Yes, a cleaner way to do it is to create an array of objects from the interface keys and fill in the needed information per input (label, required, value etc whatever is needed). Passing the values as an object you can access the inputs own value with the bracket notation. Then loop through that array of objects to create the inputs needed.
I learned two things: FormWrapperProps and that partial. Question: formwrapperprops has ”children” as props, what it is ?
how i connect INITIAL_DATA to a mongodb?
i can't use this with react-form-hook i