react-stepper-component-with-svg 1.0.7 • Public • Published 3 years ago
React Stepper Component
React Stepper Component is a simple yet customizable component using SVG that will help you to make you application more intutive and appealing. This will help you make you stepper more responsive.
Screenshot
Features!
Highly customizable
Easy to manage
Can set color for outer circle, inner circle & counter
Can set custom label
Can set color for label
Can set custom color for completed steps, Connector, Completed Label and active Step
Have a callback function for click
Works completely based on an Object
Installation
npm install --save react-stepper-component-with-svg
Usage
import Stepper from 'react-stepper-component-with-svg';
<Stepper onClickCallback={callbackFunctionName} stepperData={stepperData}/>
Props for Stepper
Props
Option
Default
Description
onClickCallback
function
none
Callback function for click on step item
stepperData
StepperDTO
none
Object that manages the stepper
Sample Data Object
const stepperData = {
currentStep : 2 ,
outerCircleBorderColor : "#ccc" ,
innerCircleBorderColor : "#ccc" ,
counterTextColor : "#ccc" ,
labelTextColor : "#ccc" ,
completedIndicatorColor : "green" ,
completedTextColor : "#fff" ,
connectorColor : "#ccc" ,
completedLabelColor : "green" ,
activeIndicator : "#006400" ,
steps : [
{
title : 'Step1'
} ,
{
title : 'Step2'
} ,
{
title : 'Step3'
} ,
{
title : 'Step4'
} ,
{
title : 'Step5'
}
]
} ;
stepperDTO
Props
Option
Default
Description
currentStep
number
none
Value for active step
outerCircleBorderColor
string
Color code for the outer circle
innerCircleBorderColor
string
Color code for the inner circle
counterTextColor
string
Color code for counter text
labelTextColor
string
Color code for label
completedIndicatorColor
string
Color code for completion indicator
completedTextColor
string
Color code for completed text
connectorColor
string
Color code for connector line
completedLabelColor
string
Color code for completed label
activeIndicator
string
Color code for active step indicator
steps
[StepsDTO]
none
Array of objects with label for step
StepsDTO
Props
Option
Default
Description
title
string
none
Label for the stepper
/react-stepper-component-with-svg/ / react-stepper-component-with-svg /
Package Sidebar Install npm i react-stepper-component-with-svg
Downloads Weekly Downloads