Automatically calculating and displaying the time remaining by progress percentage.
MIT License
This react component will automatically calculate the time to complete a progress bar by percentage changing speed. You want supply only the current percentage as a prop.
You can install this component using yarn or npm
//yarn
$ yarn add react-progress-timer
//npm
$ npm install react-progress-timer --save
import ProgressTimer from 'react-progress-timer';
...
<ProgressTimer
percentage={percent}
/>
Please provide following props. Props that marked with leading (*) are required.
Prop | Description | Type |
---|---|---|
*percentage | Current percentage of the progress | number |
initialText | Text to display when initializing. Default is Initializing
|
string |
completedText | Text to display after completed the task. Default is Completed
|
string |
decreaseTime | With this prop time will automatically decreasing even percentage not changed. By default this feature is enabled. | boolean |
calculateByAverage | Calculating time by average speed. By default calculating the speed by current speed | boolean |
format | Format to display the remaining time. Default:- Completing in {value} {unit} . You can also use the {percentage} placeholder. |
string |
formatter | You can use your own formatter to format your string. Supply time in nano second to first parameter. | (time:number)=>string |
rollingAverageWindowSize | When calculating by current speed, this specifies how many past values will be considered as "current". Default is 1 | number |
$ git clone https://github.com/whizsid/react-progress-timer`
$ cd react-progress-timer
$ yarn
yarn start
Please lint your code before made a PR.
$ yarn lint
Always follow prettier code styles and check before making your PR.
$ yarn prettier
I will reply to all PRs when I have a free time. Issues and stars also welcome.