React MUI Stepper Navigation
React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.
In this article, we’ll be discussing React MUI Stepper Navigation. The stepper component states the progress through numbered steps. It is the same as a wizard-like workflow. It may also display a transient feedback message after a step is saved.
- Horizontal stepper: Horizontal steppers are used when the contents of one step depend on the previous step.
- Linear: A linear stepper is used to complete the steps in a sequence which can be controlled by passing the current step index (zero-based) as the activeStep prop.
- Non-linear: A non-linear stepper is used to enter a multi-step flow at any point.
- Alternative label: With the help of alternativeLabel prop, labels can be placed below the stepper icons.
- Error step: If an error comes while navigating to different steps, an error step can be used in place.
- Customized horizontal stepper: A stepper navigation component can be customized as per the needs.
- Vertical stepper: A vertical stepper is used when there is a need for narrow screen sizes like mobile screens.
- Performance: For better stepper performance, we can use unmountOnExit prop for making the content available to search engines or render expensive component trees inside your modal.
- Mobile stepper: A mobile stepper is compact and suitable for mobile screens.
- Text: In the mobile stepper, the current step and the total number of steps are displayed as text.
- Text with carousel effect: For making the text movable or making a carousel effect, we can use react-swipeable-views library.
- Dots: Dots can be displayed if the number of steps is small.
- Progress: If there are more number of steps, a progress bar may be used.
- API: The APIs list is:
- <MobileStepper />: This API is used for mobile screen navigation.
- <Step />: This API is used to add a step component.
- <StepButton />: This API is used for adding a stepper button.
- <StepConnector />: This API is used for adding a stepper connector.
- <StepContent />: This API is used for adding content to the stepper.
- <StepIcon />: This API is used for adding stepper icons.
- <StepLabel />: This API is used for adding a stepper label.
- <Stepper />: This API is used for the stepper navigation component.
<Stepper> ... </Stepper>
Creating React Project:
Step 1: To create a react app, install react modules through npm command.
npm create-react-app project name
Step 2: After creating your react project, move into the folder to perform different operations.
cd project name
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @mui/material @emotion/react @emotion/styled
Step to Run Application: Open the terminal and type the following command.
Example 1: Below example demonstrates the React MUI linear horizontal stepper navigation.
Example 2: Below example demonstrates the React MUI vertical stepper navigation.
Please Login to comment...