Designing a Stepper Form in React JS displays 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.
Prerequisite:
Approach:
To design a Stepper Form in React JS we will be using Material UI. MUI for react provides components like Stepper, StepperLabel, etc that are required to create a Stepper form and also are easy to implement.
Steps to Create a React Application
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. Go to the directory ‘src’ execute the command prompt there and run the command
npm i @material-ui/core
Project Structure:
The updated dependencies in package.json file.
"dependencies": {
"@material-ui/core": "^4.12.4",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Example: This example implements a stepper form using the stepper, stepperlabel components form the mui.
// App.js import GeekStepper from './StepperForm'
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: "purple" }}>
'Enter Personal Details'
</b>,
<b style={{ color: "purple" }}>
'Enter Education Details'
</b>,
<b style={{ color: "purple" }}> 'Enter Address' </b>,
];
} function getStepContent(step: number) {
switch (step) {
case 0:
return (
<form class= "form-group" >
<label>First Name</label>
<input
type= "text"
placeholder= "First Name"
></input>
<br></br>
<label>Last Name</label>
<input
type= "text"
placeholder= "Last Name"
></input>
</form>
);
case 1:
return (
<form class= "form-group" >
<label>High School Percentage</label>
<input
type= "number"
placeholder= "High School Percentage"
></input>
<br></br>
<label>Graduation percentage</label>
<input
type= "number"
placeholder= "Graduation Percentage"
></input>
</form>
);
case 2:
return (
<form class= "form-group" >
<label>Permanent Address</label>
<input
type= "text"
placeholder= "Permanent Address"
></input>
<br></br>
<label>Temporary Address</label>
<input
type= "text"
placeholder= "Temporary Address"
></input>
</form>
);
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 Stepper Form</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>
Form is submitted
</Typography>
<Button
onClick={handleReset}
className={classes.button}
>
Reset
</Button>
</Paper>
)}
</div>
);
} |
Step to run the application: Run your app by executing below command in src.
npm start
Output: This output will be visible on the http://localhost:3000/ on the browser window.