How to Build a Stepper Component in React 🤔 ?

What is Stepper Component in React ?

• The Stepper component enables the user to create a sequence of logical steps that visualises progress.
• It could also be used for navigation purposes.

Key Features

• Display Modes—The various display modes allow you to configure the step layout and type.
• Linear Mode—The linear mode requires the user to complete the previous step before proceeding to the next one.
• Orientation—You can switch between horizontal and vertical orientation.
• Validation—You can set the validation logic for each step.
• Custom Rendering—The Stepper allows you to customise the rendering of each step.
• Keyboard Navigation—The Stepper supports various keyboard shortcuts.
• Accessibility—The Stepper component is accessible by screen readers and provides full WAI-ARIA support.

Prerequisite:

• NPM
• React JS
• Scss

Project Setup

First, you need to create a React project. In the terminal of your text editor and at your chosen directory, type in this command:

npx create-react-app stepper-app

Then, Go to the directory ‘src’ execute the command prompt there and run the command

npm i scss

Build and Add Functionality to the Stepper Layout

In the below code, I create the basic stepper look: a rounded circle with a grey background, and a short line right of it. They will both be repeated, depending on the number of steps we want to show.

For mapping the array we use javascript inbuilt Array() function then use fill() to insert react fragment into it and render the basic div tag. And same create two button for back froth functionality and styled with some basic css.

And to hide the last div element we use isHide() which return boolean value if mapping index is equal to the no of steps.Then we add onClick handle on both buttons and add functionality with condition within it to back and forth the stepper value. Also added some basic and conditional style to show the stepper effect respectively.

And at last we pass the props in out Stepper component to get the current value of stepper which will be match with mapping index and show the correct stepper position on srceen.

Here's the final code for the App component:

//App.jsx

import { Fragment, memo, useState } from "react";
import "./stepper.scss"

const App = () => {
   const [currentStep, setCurrentStep] = useState(0)
   const NUMBER_OF_STEPS = 5;

   return (
      <div>
         <h1>Stepper : {currentStep}</h1>
         <Stepper currentStep={currentStep} numberOfSteps={NUMBER_OF_STEPS} />
         <div className="btn-wrapper">
            <button onClick={() => setCurrentStep(pre => pre === 0 ? pre : pre - 1)}>
               Previous
            </button>
            <button
               onClick={() => setCurrentStep(pre => pre === NUMBER_OF_STEPS ? pre : pre + 1)}>
               Next
            </button>
         </div>
      </div>
   )
}

export default App;

// eslint-disable-next-line react/prop-types
const Stepper = memo(function Stepper({ currentStep, numberOfSteps }) {
   const isHide = (index) => index === numberOfSteps - 1;
   return (
      <div className="stepper-wrapper">
         {Array(numberOfSteps).fill(<></>).map((_, index) => {
            return (<Fragment key={index}>
               <div className={`stepper-circle ${currentStep >= index ? "isActive" : ""}`}></div>
               {!isHide(index) && <div className={`stepper-line  ${currentStep > index ? "isActive" : ""}`}></div>}
            </Fragment>)
         })}
      </div>
   )
})

//Stepper.jsx

.stepper-wrapper{
   display: flex;
   justify-content: center;
   align-items: center;
}

.stepper-circle{
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background-color: rgba(182, 177, 177, 0.5);
}

.stepper-line{
   width: 40px;
   height: 5px;
   background-color: rgba(182, 177, 177, 0.5);
}

.isActive{
   background-color: aqua;
}

.btn-wrapper{
   display: flex;
   justify-content: space-between;
   margin-top: 50px;
}

.btn-wrapper > button{
   width: 40%;
   border: none;
   border-radius: 5px;
   padding: 10px 20px;
   font-size: 16px;
   font-weight: 700;
}

And that's it! You've successfully built a stepper component in a React project. The working code demo is here , kindly check out codesandbox. Please let me know your thoughts and suggestions about this article.

Thanks for reading !!!

Happy Coding.