Table of Contents
A step indicator is a crucial component in user interfaces where a process is divided into multiple steps, such as during registration or checkout. It guides users through a sequence of actions, improving usability and the overall user experience. In this tutorial, we will learn how to create a simple and effective step indicator in React.
Setting Up Your React Environment
First, ensure that you have a React environment set up. If not, you can quickly create one using Create React App:
npx create-react-app react-step-indicator cd react-step-indicator
Implementing Step Indicator in React
Step 1: Define the Step Indicator Component
We’ll start by creating a StepIndicator component. This component will accept props that determine the number of steps and the current step:
import React from 'react';
const StepIndicator = ({ steps, currentStep }) => {
return (
<div className="step-indicator">
{steps.map((step, index) => {
let stepClass = 'step';
if (index < currentStep) stepClass += ' completed';
if (index === currentStep) stepClass += ' current';
return <div key={index} className={stepClass}>{step}</div>;
})}
</div>
);
};
export default StepIndicator;
Step 2: Styling the Step Indicator
Next, add some CSS to visually distinguish the steps. Create or update your App.css:
.step-indicator {
display: flex;
justify-content: space-evenly;
margin-bottom: 20px;
}
.step {
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
background-color: #ccc;
text-align: center;
color: #fff;
}
.completed {
background-color: #4CAF50;
}
.current {
background-color: #2196F3;
}
Step 3: Integrate the Step Indicator into Your App
Now, integrate the StepIndicator into your main application (App.js). We will also manage the current step state here:
import React, { useState } from 'react';
import './App.css';
import StepIndicator from './StepIndicator';
function App() {
const [currentStep, setCurrentStep] = useState(0);
const steps = ['Login', 'Shipping', 'Payment', 'Review'];
const nextStep = () => {
setCurrentStep((prev) => (prev < steps.length - 1 ? prev + 1 : prev));
};
const prevStep = () => {
setCurrentStep((prev) => (prev > 0 ? prev - 1 : 0));
};
return (
<div className="App">
<h1>Checkout Process</h1>
<StepIndicator steps={steps} currentStep={currentStep} />
<button onClick={prevStep} disabled={currentStep === 0}>Previous</button>
<button onClick={nextStep} disabled={currentStep === steps.length - 1}>Next</button>
</div>
);
}
export default App;
Conclusion
You’ve now created a functional step indicator in React. This component not only enhances user interaction but also integrates seamlessly with various parts of your application where a step-by-step process is required.
Step Indicators in React JS – FAQs
It can integrate with form elements, updating the current step based on the form’s progress.
Yes, the component can be modified to accept dynamic steps from props, allowing it to adjust based on the application’s state.
You can manage the state using local component state, Context API, or Redux to keep track of each step’s completion status throughout the app.
To preserve data across different steps, you can use React’s state management or context to hold the values. Even when the user navigates back, the data remains intact and can be modified or confirmed.
Implement validation logic within the nextStep function. Before incrementing currentStep, check that all required fields or conditions in the current step are satisfied. If not, display appropriate error messages and halt the step progression.
