react-line-progress-bar-steps

    0.0.5 • Public • Published

    React Progress Bar


    A React component, that display a progress bar with thresholds and chanks of values.

    3 react progress bar with chanks and splits and color for each treshold

    Install

    npm i -S react-line-progress-bar-steps
    
    yarn add react-line-progress-bar-steps
    

    Usage

    import StepsPrograssBar from 'react-line-progress-bar-steps';
    
    ReactDOM.render(<div>
    <StepsPrograssBar />
    </div>)
    

    API

    props

    name type default description
    showPrecentage String null can get 'start' or 'end' ( display precentage number on the graph )
    colors Array [] default empty Array, if recived will determen the number of chanks and there colors
    colorSet String 'colorfull' default color set - can be 'colorfull', 'warm', 'dark'. to make it work colors prop shuld be empty Array
    partialValue Number 98 the value of the precentage to be calculate
    totalValue Number 100 the total amount from witch precentage will be taken
    isStepIncrese Bool false default False, if true will start as a small chank and grow at the end
    pWrapStayle Object {} give user style controll for wrap
    chankStyle Object {} give user style controll for chank div component
    pTextStyle Object {} give user style controll for text precantage
    firstElStyle Object {} give user style controll for first chank
    lastElStyle Object {} give user style controll for last chank

    Default chanks number is '5', colors prop is Array length if used will determen the chanks number.

    License

    rc-progress is released under the MIT license.

    Install

    npm i react-line-progress-bar-steps

    DownloadsWeekly Downloads

    2

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    88.4 kB

    Total Files

    9

    Last publish

    Collaborators

    • amosos