react-line-progress-bar

UI component react-line-progress-bar

Install

npm i react-line-progress-bar

Initialization

import component styles to main scss style

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

import React, {useState} from 'react'
import { ProgressBar } from 'react-line-progress-bar';


export default function Index() {
    const [progress, setProgress] = useState(10),
            mouseEnterHandler = () => setProgress(100),
            mouseLeaveHandler = () => setProgress(10),
            contentInsideVisibleLine = <div className={'outside'} >outside parallel line</div>,
            contentInsideProgressLine = <div className={'inside'} >inside progress line</div>,
            duration = 'ltr',
            styles = `
                .inside {text-align: right;}
                
                .progress-bar__parallel-visible-line {pointer-events: none;}
                
                .progress-bar__wrapper {text-align: center;}
                
                .progress-bar__line, .progress-bar__parallel-visible-line {transition: transform 0.5s 0s ease;}
                
                .progress-bar_full-filled {color: green;}
            `
    
    
        return (<div onMouseEnter={mouseEnterHandler} onMouseLeave={mouseLeaveHandler} >
            <style>{styles}</style>
            <ProgressBar progress={progress} maxProgress={100} parallelLineContent={contentInsideVisibleLine} lineContent={contentInsideProgressLine} duration={duration} progressLineWrapperContent={'hover-me'} />
        </div>)
}

Author

webster6667