10

No need to calculate the estimated time manually

 4 years ago
source link: https://github.com/whizsid/react-progress-timer
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

jEj22uj.png!web

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 desplay when initializing. Default is Initializing string completedText Text to desplay 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} string formatter You can use your own formatter to format your string. Supply time in nano second to first parameter. (time:number)=>string

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.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK