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 |