Creating a Vertical Stepper in React

20 Sep, 2021
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.
Creating React-app
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:
cd my-first-app
 
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
npm start
File Structure:
File Name: App.js
Importing < GeekStepper/> component in root component
Javascript
function App() {  return (    <div className="App">      <GeekStepper />    </div>  );}  export default App;
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
Pending
Review
Publish
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.
Javascript
import React from 'react';import { makeStyles, Theme, createStyles }     from '@material-ui/core/styles';import Stepper from '@material-ui/core/Stepper';import Step from '@material-ui/core/Step';import StepLabel from '@material-ui/core/StepLabel';import StepContent from '@material-ui/core/StepContent';import Button from '@material-ui/core/Button';import Paper from '@material-ui/core/Paper';import Typography from '@material-ui/core/Typography';  const useStyles = makeStyles((theme: Theme) =>  createStyles({    root: {      width: '100%',    },    button: {      marginTop: theme.spacing(1),      marginRight: theme.spacing(1),    },    actionsContainer: {      marginBottom: theme.spacing(2),    },    resetContainer: {      padding: theme.spacing(3),    },  }),);  function getSteps() {  return [<b style={{color:'red'}}>'Pending'</b>,       <b style={{color:'orange'}}>  'Review'</b>, <b style={{color:'green'}}>'Published'</b>];}  function getStepContent(step: number) {  switch (step) {    case 0:      return `You submit an Article and it goes to Pending state `;    case 1:      return 'Article is reviewed';    case 2:      return `Hey Geek!! Your Article is Published`;    default:      return 'Unknown step';  }}  export default function GeekStepper() {  const classes = useStyles();  const [activeStep, setActiveStep] = React.useState(0);  const steps = getSteps();    const handleNext = () => {    setActiveStep((prevActiveStep) => prevActiveStep + 1);  };    const handleBack = () => {    setActiveStep((prevActiveStep) => prevActiveStep - 1);  };    const handleReset = () => {    setActiveStep(0);  };    return (    <div className={classes.root}>    <h1>GeeksforGeeks Article Publishing Process</h1>      <Stepper activeStep={activeStep} orientation="vertical">        {steps.map((label, index) => (          <Step key={label}>            <StepLabel>{label}</StepLabel>            <StepContent>              <Typography>{getStepContent(index)}</Typography>              <div className={classes.actionsContainer}>                <div>                  <Button                    disabled={activeStep === 0}                    onClick={handleBack}                    className={classes.button}                  >                    Back                  </Button>                  <Button                    variant="contained"                    color="primary"                    onClick={handleNext}                    className={classes.button}                  >                    {activeStep === steps.length - 1 ? 'Finish' : 'Next'}                  </Button>                </div>              </div>            </StepContent>          </Step>        ))}      </Stepper>      {activeStep === steps.length && (        <Paper square elevation={0}           className={classes.resetContainer}>          <Typography>            All steps completed - your Article is Published          </Typography>          <Button onClick={handleReset} className={classes.button}>            Reset          </Button>        </Paper>      )}    </div>  );}
Step to run the application: Open the terminal and type the following command.
npm start
Output:
Blogathon-2021
React-Questions
Blogathon
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Import JSON Data into SQL Server?
SQL Query to Convert Datetime to Date
Python program to convert XML to Dictionary
Scrape LinkedIn Using Selenium And Beautiful Soup in Python
How to toggle password visibility in forms using Bootstrap-icons ?
How to fetch data from an API in ReactJS ?
How to redirect to another page in ReactJS ?
Axios in React: A Guide for Beginners
ReactJS Functional Components