clock

HTML5 canvas countdown clock React component

Oct 21, 2018
HTML5 canvas countdown clock React component

React Countdown Clock

A HTML 5 canvas countdown clock as a React component.

View demo Download Source

React-Countdown-Clock

Installation

npm install react-countdown-clock

Usage

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

Props

proptypedefaultdescription
secondsinteger60Seconds to countdown
colorstring#000Colour of counter
alphafloat1.0Alpha transparency of counter
sizeinteger300Width & height of canvas element
weightintegerWeight of circle, in pixels
fontSizeinteger/stringautopx size of font. auto for dynamic sizing.
fontstringArialFont of counter
timeFormatstringsecondsCounter style; seconds or hms
showMillisecondsbooleantrueShow milliseconds for last 10 seconds
onCompletefuncCallback when time completes
pausedbooleanfalsePause countdown of the timer
pausedTextstringText to display when paused, defaults to the current time

GitHub

Related React stuff

Recommended