Multistep Form Custom Hook With React And TypeScript
HTML-код
- Опубликовано: 7 июл 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
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.
Enjoyed this format quick fast under 30mins, packed with useful tips and content. Well worth it. Thanks man
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
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)
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!
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.
This one was hard, but im learning typeScript so.. One of your best videos and I watch close to all of them!
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 ?
What a beautiful Form you created. Wow, very beautiful
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
Awesome tutorial dude! I dont know why took me so long, but now I'm subscribed!
A second video from you that gives me good head-ups to understanding react. Thanks for the good content.
I literally am needing this right now
This is what I've been searching everyday for past few months...! React with Typescript and Vite
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 )
❤❤
Nice tutorial! I rewrote this in solid-js. Learn a lot.
I have been looking for such a tutorial. Thanks so much for this 👍👍
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
Great tutorial. Love your stuff. This helped me out significantly.
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
Great tutorial! I Appreaciate that a lot.
We need more this type of tutorial to solve problems in real world application. thanks kyle
Great video. You solved a problem I had in 28 min. Appreciated for focussing more on the react part, instead of the styling part. Makes it easy to follow the video. I decided to sibscribe to your channel after this. Great content. Thanks
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 !
This helped me a lot. Thank you!
Gotta say thank you for having a clear easy to understand voice. All these RUclipsrs got thick azz accents and this coding shit is hard enough 😤
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!
Just what I needed 😌
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⬆️
Amazing explanation!
Loved the tutorial
Amazing as always
Great video. Thanks.
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
great video Kyle
One day this video will save your day
Thank you very much, its an amazing video, very useful
Thank you very much it helped me a lot☺
Amazing friend!
More similar lessons with TS are needed)
Kyle, you're the GOAT!
It great. Thank you very much
Thanks King
1m subs congrats
Thank you!!! 🙌🙌
Amazing thanks 🙏
Great content
Awesome bro love from india
Great video
Grate. Thank you !!!
Please more React + Typescript projects. 🙏
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.
thank u so much sir
Thanks so heplful!
awesome thank very match
This would have been great 2 years ago before I had to come up with my own as a junior react dev
Happy Aayutha Pooja 🥰
Tnk excellent ❤❤
please make a course on typescript bigginer and advanced
hey thanks so much for this wonderful tutorial. what if I wanna write the custom validation to any of the individual form field?
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!
Thank you for the guide! Could you please advise if we can use custom validation with this form?
thanks , wish it had other types of inputs and also validation
please create one with more detail , like when in one of the steps there are 3 itmes to choose between one of them and only one of them should be selected and go to the next form
could you do any validations?
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⬆️
Лайк не глядя
What's the alternative for steps: ReactElement[] from the custom hook in ReactJS, cuz I don't know TypeScript?
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.
thank you for this great tutorial sir, please why can i persist data for checkbox ?
Hello! Thanks for tip, but how to implement custom validation for every form in this scheme?
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.
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??
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⬆️
Would be so much cooler with carousel animation
you are fast AF
Any sources on how to accomplish this with Select? Specifically, when the Select is in a separate component?
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⬆️
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!
do you think this project could benefic of using useReducer instead of useState?
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
How to add routing and change components with routing within multistep in react-router v6?
How would you use formik with this stepper function for validations
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
Great, but... If you put your buttons (next, back,...) inside your "Step Component". How could you do that?
How can we add frontend validation in this form?
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
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.
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 i build a booking appointment for a doctor office
Can I use "useForm"? like "register" for example? cause I need all inputs are completed
What about this… [steps,setSteps]=useState([…] )and just loop over and Set counter :D
you could just use function generator )
what does the & mean when he declared the UserFormProps???
type UserFormProps = UserData & {
updateFields: (fields: Partial) => void;
}
I love you
How to use that goTo Function ??
neat
nice video thanks!
type FormData = typeof INITIAL_DATA; best choice?