react-progress-timer

---

---

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.

$3

Installation

You can install this component using yarn or npm

``
//yarn
$ yarn add react-progress-timer

//npm
$ npm install react-progress-timer --save
`

Usage

`
import ProgressTimer from 'react-progress-timer';

...
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

1. Clone the repository

`
$ git clone https://github.com/whizsid/react-progress-timer
``

2. Install the dependencies

`
$ cd react-progress-timer
$ yarn
`

3. Start the development server

`
yarn start
`

Contributing

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.