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
paused	boolean	false	Pause countdown of the timer
pausedText	string		Text to display when paused, defaults to the current time

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

2.1.0 - Mar 6, 2018

• Reset timer if seconds change. Thanks @mmajis
  • Makes div the same size as the countdown clock. Thanks @Miniland1333
  • Fix old props being assigned rather than new. Thanks @zaidchauhan
  • Scale canvas for high DPI devices. Thanks @gravitypersists