Creating a Vertical Stepper in React

Steppers visually guide users through a numbered sequence of logical steps and can be utilized for navigation, providing feedback messages upon saving steps. This tutorial explores the creation of a vertical stepper using React and Material-UI.

Prerequisites:

• React JS
• Material UI

Steps to Create React Application And Installing Module:

Step 1: Create a react app using the following command.

npx create-react-app my-first-app

Step 2: Change the directory to that folder by executing the command:

cd my-first-app

Step 3: Install the necessary dependencies.

npm install @material-ui/core/Stepper
npm install @material-ui/core/Step
npm install @material-ui/core/StepLabel

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "@material-ui/core": "^4.12.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Approach to create Vertical Stepper:

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.

Example: Below is the code example of the above explained approach.

Javascript

function App() {
  return (
    <div className="App">
      <GeekStepper />
    </div>
  );
}

export default App;

Javascript

//StepperForm.jsx
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: