HTML5 canvas countdown clock React component Sample in 2020

HTML5 canvas countdown clock React component Sample in 2020


tutorials -

React Countdown Clock

A HTML 5 canvas countdown clock as a React component.

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

GitHub

Trending On Tutorial Stuff

Our Sponsors

Top Applications in Tutorial Stuff

Top Experts In Tutorial Stuff