react-stepper-component-with-svg

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