Description

React Component for a live timer (Hourglass animation for countdown). Using this component will display an hourglass which you can start/pause/resume and which will countdown until given duration.

Usage

Installation :

npm install react-live-timer

Then

var Timer = require('react-live-timer');

...

render: function() {
  return (
  	<div>
  		<Timer  pageBgColor='white' id={1} duration={10} started={true} paused={false} />
  	</div>
  )
}

See Examples for more details.

API

Timer

Name	Type	Required	Default	Description
id	number	yes (only if more than one timer used)	1	HTML Element id is timerNo + id
started	boolean	yes	N/A	Represents whether timer has started
paused	boolean	yes	N/A	Represents whether timer is paused
pageBgColor	string	yes	N/A	Color of background of page (Reqd. to make draw the hourglass)
outerColor	string	no	'white'	Color of empty part of hourglass
innerColor	string	no	'grey'	Color of sand part of hourglass
strokeColor	string	no	'black'	Color of border of hourglass
size	number	no	10	Size of hourglass
duration	number	no	60	Represents duration of timer (time until hourglass is empty) in seconds
onComplete	function	no	undefined	Callback triggered when timer reaches countdown (hourglass becomes empty)

Contributions

There are still plenty of ways to improve this project. Any contributions are appreciated.