advance-steppers
v0.1.17
Published
A very simple, highly customizable react advance steppers Component library.
Downloads
50
Maintainers
Readme
Advance Steppers
Demo Link: Advance Steppers Demo
Introduction
advance-steppers
is a customizable React component for creating stepper interfaces with dynamic icons, labels, and colors. This guide will walk you through the steps to integrate and use the Stepper component in your project.
Customize Settings
size
: lg, md, sm, or any pixel value like10px
,20px
,100px
activeColor
:#FFC500
(or any color)inactiveColor
:#FFC100
(or any color)lineColor
:#AEC201
(or any color)
Code Example
import { useState } from "react";
import { Stepper } from "advance-steppers";
import { FaUser, FaAddressCard, FaCreditCard, FaCheck } from "react-icons/fa";
function App() {
const [currentStep, setCurrentStep] = useState(0);
const stepLabels = [
"Personal Information",
"Address Details",
"Payment Information",
"Review and Submit",
];
const stepIcons = [
<FaUser />,
<FaAddressCard />,
<FaCreditCard />,
<FaCheck />,
];
return (
<div className="App">
<h1>My App</h1>
<Stepper
size="50px" // lg, md, sm, 10px, 100px
activeColor="#FFC500" // any color
inactiveColor="#FFC100" // any color
lineColor="#AEC201" // any color
labels={stepLabels} // any Label
icons={stepIcons} // any Icons
currentStep={currentStep} // Your State
/>
<div className="stepper-buttons">
{currentStep > 0 && (
<button onClick={() => setCurrentStep(currentStep - 1)}>
Previous
</button>
)}
{currentStep < stepLabels.length - 1 && (
<button onClick={() => setCurrentStep(currentStep + 1)}>
Next
</button>
)}
</div>
</div>
);
}
export default App;
Installation
To install the necessary packages, run the following commands:
npm install react-icons advance-steppers
Usage
- Import Required Libraries and Components
import { useState } from "react";
import { Stepper } from "advance-steppers";
import { FaUser, FaAddressCard, FaCreditCard, FaCheck } from "react-icons/fa";
- Set Up Stepper Component
function App() {
const [currentStep, setCurrentStep] = useState(0);
const stepLabels = [
"Personal Information",
"Address Details",
"Payment Information",
"Review and Submit",
];
const stepIcons = [
<FaUser />,
<FaAddressCard />,
<FaCreditCard />,
<FaCheck />,
];
return (
<div className="App">
<h1>My App</h1>
<Stepper
size="50px"
activeColor="#FFC500"
inactiveColor="#FFC100"
lineColor="#AEC201"
labels={stepLabels}
icons={stepIcons}
currentStep={currentStep}
/>
<div className="stepper-buttons">
{currentStep > 0 && (
<button onClick={() => setCurrentStep(currentStep - 1)}>
Previous
</button>
)}
{currentStep < stepLabels.length - 1 && (
<button onClick={() => setCurrentStep(currentStep + 1)}>
Next
</button>
)}
</div>
</div>
);
}
export default App;
Features
- Customizable Size: Set the size of the steps to fit your design requirements.
- Dynamic Colors: Change the colors for active, inactive steps, and connecting lines.
- Icon Integration: Use any icons from
react-icons
to visually represent each step. - Step Labels: Add labels to each step for better user guidance.
Why Use Advance Steppers
?
Advance Steppers
allows for flexible and visually appealing stepper interfaces in your React projects, enhancing user experience and providing clear progress indicators.
Contributing
We welcome contributions! Please check out our contributing for more details.
License
MIT https://github.com/farooque1