Skip to content

Automatically calculating and displaying the time remaining by progress percentage.

License

Notifications You must be signed in to change notification settings

whizsid/react-progress-timer

Repository files navigation


Travis:Status Travis:Status Code Style: Prettier NPM: Version


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.

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.