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