react-countdown-clock

React Countdown Clock

A HTML 5 canvas countdown clock as a React component.

Demo

pughpugh.github.io/react-countdown-clock

Installation

npm install react-countdown-clock

Usage

<ReactCountdownClock seconds={60}
                     color="#000"
                     alpha={0.9}
                     size={300}
                     onComplete={myCallback} />

Props

prop	type	default	description
seconds	integer	60	Seconds to countdown
color	string	#000	Colour of counter
alpha	float	1.0	Alpha transparency of counter
size	integer	300	Width & height of canvas element
weight	integer		Weight of circle, in pixels
fontSize	integer/string	auto	px size of font. auto for dynamic sizing.
font	string	Arial	Font of counter
timeFormat	string	seconds	Counter style; seconds or hms
showMilliseconds	boolean	true	Show milliseconds for last 10 seconds
onComplete	func		Callback when time completes

Bugs & Contributions

Bugs, features and pull requests always welcome.

github.com/pughpugh/react-countdown-clock/issues

Also, it's always just nice to hear how people are using it. Feel free to get in touch.

• Email: [e-mail]
• Web: www.hughgallagher.co.uk

Changelog

1.0.8 - Aug 8, 2016

• Updated React version in peerDependencies
  • Added new props for fontSize, font, timeFormat and showMilliseconds
  • Added ability to render minutes and hours
  • Fixed long countdowns having a tick period longer than 1 second