Creating a Vertical Stepper in React
Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation. Steppers may display a transient feedback message after a step is saved.
In this article we will learn , how to create a vertical stepper using react and material-ui.
Step 1: Create react app using the following command.
npx create-react-app my-first-app
Step 2: Change directory to that folder by executing command:
Step 3: Install the necessary dependencies. Go to the directory ‘src’ and execute command prompt there and run command.
npm install @material-ui/core/Stepper npm install @material-ui/core/Step npm install @material-ui/core/StepLabel
Step 4: Run your app by executing below command in src
File Name: App.js
Importing < GeekStepper/> component in root component
File Name: StepperForm.jsx
In this file, we will implement Stepper. In this example; We will explain the process of article publishing in GeeksforGeeks. Articles goes through 3 states
Stepper is created using material-ui in react. We have imported different ui-classes in this component like Stepper, StepLabel etc. Stepper is implemented using preActiveStep and ActiveStep . These steps are used to display the component of form which is active and to return back.
Step to run the application: Open the terminal and type the following command.
Please Login to comment...