1.0.3 • Published 4 years ago
react-progress-timer v1.0.3
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.
Features
- Calculate the time by percentage changing speed or average.
- Automatically reducing the time even percentage will not changed.
Watch Demo >>
Installation
You can install this component using yarn or npm
//yarn
$ yarn add react-progress-timer
//npm
$ npm install react-progress-timer --saveUsage
import ProgressTimer from 'react-progress-timer';
...
<ProgressTimer
percentage={percent}
/>Documentation
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 |
Developing
- Clone the repository
$ git clone https://github.com/whizsid/react-progress-timer`- Install the dependencies
$ cd react-progress-timer
$ yarn- Start the development server
yarn startContributing
Please lint your code before made a PR.
$ yarn lintAlways follow prettier code styles and check before making your PR.
$ yarn prettierI will reply to all PRs when I have a free time. Issues and stars also welcome.