Multi-Step Form with React and Tailwind CSS (Customizable)

hello guys in this tutorial we are going to build a multi-step form using react this multi-step form allows us to save our data using react context api if that project sounds interesting to you let's get started at this point we have only scaffolded our react application using create react app and have installed tailwind css to handle our style components if you need help getting to this point just click on the link in the video or see the link below for help now let's go ahead and open up our app component and in our app components we will be setting up our stepper here this will take care of our progress and here we will set up our navigation controls to go back and forth first let's go ahead and create a components folder where all our rear components will be placed then we create a stepper dot jsx file and here we put our our stepper component next we go ahead and create our stepper control dot jsx file and in there we add our stepper component our stepper control component let's go to our application and let's go ahead and include our stepper component within our main application which is app.js so we have stepper and here we go ahead and we add the stepper control now let's go ahead and style our app component using our tailwind css classes here we want our component to be half the size of the page when we are on medium screens we want it centered and we also want a shadow of excel and a rounded border for white background next we can go ahead and create a a wrapper for stepper component so we add the steel in css class container horizontal with a margin top of 5 which is equivalent to 20 pixels so let's go ahead and wrap our stepper component okay let's go ahead and open up our stepper control we can go ahead and style our stepper control component with a css class of container making it a flex container and justifying it around giving it also imagine top of 4 at the margin bottom of it within our stepper control we can go ahead and create placeholders for back button and also for next button so let's create our first button so this button will be your back button and we're going to use again tailwind css classes to style or button so give it a background color of white if a text color of slit 400 which is a light gray we'll make the text uppercase we give it a padding y of two padding x of four and rounded corners xl and we're making the font semi bold and we're setting the cursor to pointer we also setting the border to 2 and the border color would be slit but on a hover you have a darker background color also on that hover stitch the text color will turn white and we setting up a transition which will have a duration of 200 milliseconds and will be easing in out now let's go ahead and settle our button text to back i can pretty much go ahead and copy that entire button and paste it to use as our next button and we'll just do slight changes we'll just remove the background color and we put a background color of green and our text color would be white we can also go ahead and remove our border and let's take a look and see how it looks in our browser it looks good all right now let us just go to index.css and add in a custom background color so i'll put a custom background color of f1 f5 f9 so that'll give us a slight shade of grayish greenish let's go back to our app components so next thing we want to do we want to go ahead and style our stepper component now and we'll start to style our wrapper for a stepper component by adding tillwin css class mx4 which give us a margin of 4 on the x-axis a padding of 4 we're going to make it a flex container justify between and our items will be centered here we'll display our steps in our stapler component at this point we can now go ahead and remove our text next we are going to put some placeholders in our component so here we will display the numbers here we'll also display description and here we'll display the line connecting the numbers okay let's go ahead and add a few more divs around our display and another description and it should look something like this right here so here we have a div surrounding our display number and also description and then we have one for our line right so let's go ahead and style our div making it relative and giving it a making it flex flex column um center the items and we're going to give it a text of teal now for display numbers we'll give it a rounded full we'll also add a transition and that will be for 500 milliseconds and it'll be a ease in out we're also giving it a border and the bottle be gray and we're actually making it a height of 12 by a width of 12 also right we're also making that a flex container and center in the items and we can go ahead and justify it center right and then we give it a padding y of free now for our display descriptions we'll give the absolute position we'll make it top 0 and the text will be centered the margin top of 16 and the width of 32 our text will be extra small and our font would be medium and the case would be upper so we'll have uppercase then let's put a text here description so that's the placeholder basically for our description and let's go ahead and style our line so that line will be the line connecting the different the different steps we're actually making the line a flex container and we're giving it a border top of two and we creating a transition 500 milliseconds is in in and out and that's what we should look like we have our step per step and our buttons next let's go ahead and remove everything inside our wrapper and we're actually going to cut it so we can paste it over again so we're going to create a constant and we are now going to assign the code that we just cut to that constant which is display step so we go ahead and open a div tag and paste the content within let's go ahead and style that wrapper and we can give it a width of full make it a flex container and set the items to be centered and if we check in our browser the we have the same display as previously right so that means everything is good so we'll go back to our app.js and within our app.js we'll go ahead and create an array and that array we'll name it steps and within that array we will have the different steps in our stepper right so we'll have the account information which is our first step so this is basically this will basically um display out as a description in our step up so we have account information we have personal details and then we have a third step which is complete so this would be the com the description in our stepper so it will be one two three accounts information personal details and complete will be step number three now let's go ahead and create a function so we use arrow function and we'll call it display step and this will be used for determining the which component to show depending on the step that we are on so we have a switch statement and the switch statement will accept the step which is the step number and for the first case if it's number one then we will display the the account step account component so before i go ahead and complete this um function let's go ahead and create a folder in our components name steps and within that folder we can go ahead and put our different components for each of the steps so the first component would be akov and let's put for a placeholder let's put the name account for a placeholder we also want to create a the second step and the second step will be details and we can go ahead and put a text of detail and let's go ahead and create our last one which should be final let's go ahead and create a component final display final as the text here all right so that's that looks good we're going to put one more um i'm going to name it payment now we're not going to use it right now but later on we're going we're going to use it to show that um that you can actually it's very flexible and you can add more steps to it if that if you desire let's go back to our component and let's go ahead and import the components that we have just created so we now included all of our components and let's continue with our switch statement so for case number two we add detail and case number three we have we have our final component so based on the step the different components will be loaded i have intentionally left out payment as payment we will be using it later on during the um general development to show how how new steps can be added easily into our stepper now let's go ahead and create a state and because we are using functional component we use usd so we'll create our state our state would be current step we'll go ahead and import usdate from react so we have current step and we have set current step which we should be used to set our current step so here in our staple component we'll go ahead and pass our array of steps and the current step that we're on let's go ahead and open up our stepper component and within our stepper components we can go ahead and structure our props and now we can have here steps and current step let's go ahead and select our display steps and let's put it within our component so let's go ahead and cut it and paste it right there and let's just check to make sure that it did not affect our display component so here we'll import uh use effect use it and use ref as we will use them in our component so let's create a side effect using use effect and we'll go ahead and check for any changes in steps and in the current step so whenever steps and the current step changes our use effect will run so here's what will happen when our use effect is run we'll go ahead and iterate through our steps array using our map function and we'll create an object for each of the elements in our array for each of the object in our array a description will be set and we'll also have values for complete for highlighted and for selected now if the index is equal to zero highlight it will be called true and the same would be for selected select state will be also equal to true if index is equal to zero now we can create a new state and we can name it new step and create the function set step that would be used to update the new state value next we can go ahead and use our use ref and assign it to step ref here we are assigning our step step to our state ref dot current here we have a function named update step and that function takes two parameters the current step minus one and it also take the the step ref that current now that function returns current and we have not defined our function as yet but we will define it shortly and here we'll just set up our function definition and pass in our parameters step number and steps so here in our use effect we'll go ahead and set new step using the set new step function passing in current so we're now going to take a look back at display step and now what we're going to do we're going to iterate over new steps to create our our stepper so that'll be our step number one two three four that we have at the top so let's go ahead and cut this piece of code for displaying our step and we can return it within our map function for each step we can go ahead and add in our key and assign index to a key here we will check whether the index passed to the function is the same as the value of new step dot length and if the value is true using our ternary operator we will be passing the full width now we can get back to our update step function we don't know function we pass in the these steps into a new step constant and then we initialize the count as zero and then we use a while loop right and while the count is less than the new step length we go ahead and unload right and first we check for the current step then we check for whether this step is complete then we check to see if the step is still pending right so if the count is equal to the step number then it means that this step is our current step so we set the highlighted to true selected to true and complete to also true and we increment count by one right now if the count is less than the step number it means that our step is complete so we set highlight to false select it to true and complete to true now if none of this case is then it means that our step is still pending so in that case we we set all our values to false which is highlight select and complete default next we will return our new steps object which will contain each of our steps with the properties of highlighted selected completed and the values attached to it now if we go ahead and save and check our component in our browser we'll see that we have one two and three however we would need to update our description and this and update also our step so let's go ahead and do that now we can go ahead and remove one here so let's go ahead and convert our string here into a template lateral here we check to see whether the current step is selected and if the current step is selected we make changes to our css using the tailwind classes and here we check to see if the current step is completed and if the current step is completed we put a check or else we print the number of that step and if we go ahead and open up our browser we can see that our first step is selected and step number two and three displays the number now in order to display our description on each step we can go ahead and change our string into a template lateral and we can set up a condition if this step is highlighted then we we change the text color from a light grey to a dark grey then we actually display our description and here we can pass a condition that checks whether our step is complete and if our step is complete we set the color of our line to be green all right so let's go ahead and create our 100 click function and that function will take in a direction as a parameter so in that case if we pass in next as the parameter we can go ahead and use that to determine which button is clicked so let's go back to our app component and within our stepper component we can go ahead and pass the handle click to the component also we can pass the current step and the steps array to the stepper control now within the actual stepper components we can go ahead and destructure our props and pass the hand click the current step and the step sorry to our component next we add the unclick event to our buttons passing in the 100 click not forgetting to pass next within our 100 click function for next button now on our previous button we can set a condition so that if the current step is equal to 1 then we we basically set the opacity to 50 and we change the cursor to not allow so in other words we can't go back next on our next button we go ahead and set a condition we check for the current step and the current step is equal to the the length of steps array minus one then we set the value to confirm or else we set it to next now within our 100 click function we check for the direction passed if the direction pass is equal to next then we increment the step by one or else we decrement this step by one also here we are basically checking if our new step is more than zero and less than or equal to the length of the step array if that is the case then we set our current step to the new step value and if you check with our component you can see when we're on the first step our back button is grayed out means that we shouldn't be able to go back likewise when we reach the last step our next button changes to confirm now we will use the react context api to store our values of our different step components using react context is pretty simple we'll go ahead and create our context folder and within our context folder we'll create stepper context.js and within our file we'll go ahead and import create context from react next we'll go ahead and assign or create context passing a null value to our stepper context and export our stepper context so here we know app component we'll go ahead and display our actual component for each of the steps so let's go ahead and import our stepper context and here just below our stepper component we'll go ahead and create a div and add our stepper context provider now within our provider we can go ahead and call the function display step passing in the current step next we'll go ahead and create our states using used it our first state will be user data and next we'll have final data which will hold the empty array and within our provider we can go ahead and pass in those as values so we pass in user data and set user data function we also pass in final data and the set finder data function to our provider and even as we view our components in the browser we can see we can go from one component to the next component by clicking next and the following steps should be repeated throughout all the components within our steps so within the account within the details and winning the final component we go ahead and we import use context then we go ahead and import our step of context and then we go ahead and use our use context we use the user data and the set user data which we passed early on into our provider we can now use those within our function next we create a handle change function and pass in the event as our parameter now within that function we go ahead and destructure the event on the targeted element and next we go ahead and use our spread operator to spread our user data object and add a name and a value to our user data next we paste in the body of our component in our return so that we work a little faster i'm just going to paste in the the content of our for account component so basically for each of our elements we will go ahead and change the value so in this case we have the username value so if the username value is stored in the user data we will display it or else we'll display blunt and then on change we'll go ahead and call the change function we do the same thing for password we change the value to user data and we put password right we also change the name of the element as password and the type as password and then we also change the placeholder right so we do that for each one of the elements in our form so as you can see here we can go ahead and add in our username and put in our password and we can go next and we can actually navigate back and still have our data available in our form right we can go ahead and do the same thing for the rest of our components let's go ahead and do the same thing here our final component is a bit special so we have a svg file and we have a little bit of styling so we just pause the screen and take a look at it again within the details component we are basically doing the same thing that we did within the accounts component so feel free to change the field field names and the amount of fields in those components and lastly to get rid of that issue that we see where we click confirm and we see next button we just go back in our app component we can go ahead and wrap our staple control with a condition that checks if our current step value is the same as the length of the array of steps so it means that we have reached the last step and if that is the case it basically hides our button and as you can see our component works perfectly fine all right so now we can go ahead and um try and add in our payment component so within our display steps we can go ahead and add in that new step with our payment so let's do some reassigning uh let's go ahead and assign it um as number three that's our third step so we pass in payment as our third step let's go ahead and look at our payment component so here we already have a payment component now within our app components we can include that step in our steps array and let's go ahead and visit our browser and see our extra step that was added and as you can see it's pretty easy to add extra steps to a slider and this takes us to the end of this tutorial if you enjoyed this video go ahead and give it a like and subscribe to see more videos like this i am saying bye for now and i'll see you in the next video

Channel: Quick Nuggets

Views: 48,747

Keywords: react multi step form, multi step form, react tutorial, Multi-Step Form with Reac, tailwind css tutorial, tailwind css react, react tutorial project, react projects, react projects for beginners, reactjs tutorial for beginners, react js hindi tutorial, react and tailwind css project, react js tailwind css, Multi Step Form in React, Multi Step Form with React

Id: YFHuaOl7frk

Length: 44min 51sec (2691 seconds)

Published: Fri Feb 18 2022