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.

Watch Demo >>

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

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

1. Clone the repository

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

1. Install the dependencies

$ cd react-progress-timer
$ yarn

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