react-step-progress-bar-line

progress bar with delimited sections

Install

npm i react-step-progress-bar-line

import component styles to main scss style

@import "~react-line-progress-bar/dist/style/index.css";


//add your animation setting for line move
.progress-bar__line {
  transition: transform 0.5s 0s ease;
}

import React, {useState} from 'react'
import ReactDOM from 'react-dom'

import {useStepProgressBar, StepProgressBarLine} from 'react-step-progress-bar-line'

export default function Index() {

    const [activeStep, sections, nextStep, prevStep] = useStepProgressBar({
        activeStep: 0,
        sections: [
            {
                stepsCount: 2
            },
            {
                stepsCount: 3
            },
            {
                stepsCount: 5
            },
        ],
        stepChangeCallback: (step) => {
            console.log('change',step);

            return true
        },
        finishCallback: () => {
            alert('finish');

            return true
        }
    })

    
    return (
        <div >

            <StepProgressBarLine activeStep={activeStep} sections={sections} />

            <button onClick={prevStep}>
                Prev
            </button>

            <button onClick={nextStep}>
                Nxt
            </button>


        </div>
    )

}

Author

webster6667