https://github.com/whizsid/react-progress-timer

Automatically calculating and displaying the time remaining by progress percentage.
https://github.com/whizsid/react-progress-timer

average calculate complete estimated percentage pinned reactjs remaining-time time

Last synced: 4 months ago
JSON representation

Automatically calculating and displaying the time remaining by progress percentage.

• Host: GitHub
• URL: https://github.com/whizsid/react-progress-timer
• Owner: whizsid
• License: mit
• Created: 2019-11-08T10:36:54.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2020-09-04T17:10:05.000Z (over 4 years ago)
• Last Synced: 2024-10-04T01:40:02.171Z (4 months ago)
• Topics: average, calculate, complete, estimated, percentage, pinned, reactjs, remaining-time, time
• Language: TypeScript
• Homepage:
• Size: 145 KB
• Stars: 5
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


	

			

	



---



	

	

	

	



---

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 >>](https://whizsid.github.io/react-progress-timer)

## 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';

...

	

```

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