react-line-progress-bar-steps

React progress line bar with steps and values by thresholds

Usage no npm install needed!

<script type="module">
  import reactLineProgressBarSteps from 'https://cdn.skypack.dev/react-line-progress-bar-steps';
</script>

README

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.