Introduction

In this article, we will discuss React Material UI Stepper and Tabs. Stepper is a component that is used to create a wizard-like workflow by separating content into different steps.
You can check my previous article in which we discussed ReactJS and its basic components from the below-mentioned links.
Prerequisites

Create ReactJS project

Let's first create a React application using the following command.
  1. npx create-react-app platform

Install Material-UI

Now Install Material-UI by using the following command.
  1. npm install @material-ui/core --save
Now, right-click on the "src" folder and add a new component named 'Stepper.js'
First let’s add the following reference in this component.
  1. import Stepper from '@material-ui/core/Stepper';
  2. import Step from '@material-ui/core/Step';
  3. import StepLabel from '@material-ui/core/StepLabel';
  4. import Button from '@material-ui/core/Button';
  5. import Typography from '@material-ui/core/Typography';
  6. import AppBar from '@material-ui/core/AppBar';
  7. import Toolbar from '@material-ui/core/Toolbar';
Add the following code in Stepper component.
  1. import React from 'react';
  2. import { makeStyles } from '@material-ui/core/styles';
  3. import Stepper from '@material-ui/core/Stepper';
  4. import Step from '@material-ui/core/Step';
  5. import StepLabel from '@material-ui/core/StepLabel';
  6. import Button from '@material-ui/core/Button';
  7. import Typography from '@material-ui/core/Typography';
  8. import AppBar from '@material-ui/core/AppBar';
  9. import Toolbar from '@material-ui/core/Toolbar';
  11. function getSteps() {
  12. return ['Personal Details', 'Address', 'Review Details'];
  13. }
  15. function getStepContent(step) {
  16. switch (step) {
  17. case 0:
  18. return 'Personal Details';
  19. case 1:
  20. return 'Address';
  21. case 2:
  22. return 'Review Details';
  23. default:
  24. return 'Unknown step';
  25. }
  26. }
  28. export default function StepperDemo() {
  29. const [activeStep, setActiveStep] = React.useState(0);
  30. const [skipped, setSkipped] = React.useState(new Set());
  31. const steps = getSteps();
  33. const isStepOptional = step => {
  34. return step === 1;
  35. };
  37. const isStepSkipped = step => {
  38. return skipped.has(step);
  39. };
  41. const handleNext = () => {
  42. let newSkipped = skipped;
  43. if (isStepSkipped(activeStep)) {
  44. newSkipped = new Set(newSkipped.values());
  45. newSkipped.delete(activeStep);
  46. }
  48. setActiveStep(prevActiveStep => prevActiveStep + 1);
  49. setSkipped(newSkipped);
  50. };
  52. const handleBack = () => {
  53. setActiveStep(prevActiveStep => prevActiveStep - 1);
  54. };
  56. const handleSkip = () => {
  57. if (!isStepOptional(activeStep)) {
  58. throw new Error("You can't skip a step that isn't optional.");
  59. }
  61. setActiveStep(prevActiveStep => prevActiveStep + 1);
  62. setSkipped(prevSkipped => {
  63. const newSkipped = new Set(prevSkipped.values());
  64. newSkipped.add(activeStep);
  65. return newSkipped;
  66. });
  67. };
  69. const handleReset = () => {
  70. setActiveStep(0);
  71. };
  73. return (
  74. <>
  75. <AppBar position="static">
  76. <Toolbar style={{ 'paddingLeft': "600px" }}>
  77. Stepper in React Application
  78. </Toolbar>
  79. </AppBar>
  80. <div>
  81. <Stepper activeStep={activeStep}>
  82. {steps.map((label, index) => {
  83. const stepProps = {};
  84. const labelProps = {};
  85. if (isStepOptional(index)) {
  86. labelProps.optional = <Typography variant="caption">Optional</Typography>;
  87. }
  88. if (isStepSkipped(index)) {
  89. stepProps.completed = false;
  90. }
  91. return (
  92. <Step key={label} {...stepProps}>
  93. <StepLabel {...labelProps}>{label}</StepLabel>
  94. </Step>
  95. );
  96. })}
  97. </Stepper>
  98. <div>
  99. {activeStep === steps.length ? (
  100. <div>
  101. <Typography >
  102. All steps completed - you're finished
  103. </Typography>
  104. <Button onClick={handleReset} >
  105. Reset
  106. </Button>
  107. </div>
  108. ) : (
  109. <div>
  110. <Typography >{getStepContent(activeStep)}</Typography>
  111. <div>
  112. <Button disabled={activeStep === 0} onClick={handleBack} >
  113. Back
  114. </Button>
  115. {isStepOptional(activeStep) && (
  116. <Button
  117. variant="contained"
  118. color="primary"
  119. onClick={handleSkip}
  121. >
  122. Skip
  123. </Button>
  124. )}
  126. <Button
  127. variant="contained"
  128. color="primary"
  129. onClick={handleNext}
  131. >
  132. {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
  133. </Button>
  134. </div>
  135. </div>
  136. )}
  137. </div>
  138. </div>
  139. </>
  140. );
  141. }
Now open app.js file and add the following code.
  1. import React from 'react';
  2. import logo from './logo.svg';
  3. import './App.css';
  4. import StepperDemo from './Stepper';
  5. import TabsDemo from './Tabs';
  6. function App() {
  7. return (
  8. <div className="App">
  9. <StepperDemo/>
  10. </div>
  11. );
  12. }
  14. export default App;
Now run the project by using 'npm start' and check the result.
Now let's add another component 'Tabs.js' file,in this component we add Tabs. Tabs is used to switch between different pages. Open Tabs.js and add the following code.
  1. import React from 'react';
  2. import PropTypes from 'prop-types';
  3. import AppBar from '@material-ui/core/AppBar';
  4. import Tabs from '@material-ui/core/Tabs';
  5. import Tab from '@material-ui/core/Tab';
  6. import Typography from '@material-ui/core/Typography';
  7. import Box from '@material-ui/core/Box';
  8. function TabPanel(props) {
  9. const { children, value, index, ...other } = props;
  11. return (
  12. <Typography
  13. component="div"
  14. role="tabpanel"
  15. hidden={value !== index}
  16. id={`simple-tabpanel-${index}`}
  17. aria-labelledby={`simple-tab-${index}`}
  18. {...other}
  19. >
  20. {value === index && <Box p={3}>{children}</Box>}
  21. </Typography>
  22. );
  23. }
  25. TabPanel.propTypes = {
  26. children: PropTypes.node,
  27. index: PropTypes.any.isRequired,
  28. value: PropTypes.any.isRequired,
  29. };
  30. function testProps(index) {
  31. return {
  32. id: `simple-tab-${index}`,
  33. 'aria-controls': `simple-tabpanel-${index}`,
  34. };
  35. }
  36. export default function TabsDemo() {
  37. const [value, setValue] = React.useState(0);
  39. const handleChange = (event, newValue) => {
  40. setValue(newValue);
  41. };
  43. return (
  44. <div>
  45. <AppBar position="static">
  46. <Tabs value={value} onChange={handleChange}>
  47. <Tab label="Home" {...testProps(0)} />
  48. <Tab label="About" {...testProps(1)} />
  49. <Tab label="Contact" {...testProps(2)} />
  50. </Tabs>
  51. </AppBar>
  52. <TabPanel value={value} index={0}>
  53. Home
  54. </TabPanel>
  55. <TabPanel value={value} index={1}>
  56. About
  57. </TabPanel>
  58. <TabPanel value={value} index={2}>
  59. Contact
  60. </TabPanel>
  61. </div>
  62. );
  63. }
Now open app.js file and add the following code.
  1. import React from 'react';
  2. import logo from './logo.svg';
  3. import './App.css';
  4. import StepperDemo from './Stepper';
  5. import TabsDemo from './Tabs';
  6. function App() {
  7. return (
  8. <div className="App">
  9. {/* <StepperDemo/> */}
  10. <TabsDemo/>
  11. </div>
  12. );
  13. }
  15. export default App;
Run the project by using 'npm start' and check the result.

Summary

In this article, we learned how we add Stepper and Tabs in React applications using React material UI.