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