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:
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.
function App() {
return (
<div className= "App" >
<GeekStepper />
</div>
);
} export default App;
|
//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: