Creating a Vertical Stepper in React

0 0 2 minutes read

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 zambiatek. 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>zambiatek 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:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!