react-step-progress-bar-line
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    illustration

    react-step-progress-bar-line

    progress bar with delimited sections

    npm version

    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

    Keywords

    none

    Install

    npm i react-step-progress-bar-line

    DownloadsWeekly Downloads

    33

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    24.4 kB

    Total Files

    26

    Last publish

    Collaborators

    • webster6667