Skip to content

pughpugh/react-countdown-clock

Folders and files

NameName
Last commit message
Last commit date

Latest commit

b9a76fd · Apr 30, 2024

History

79 Commits
Apr 30, 2024
Dec 29, 2020
May 6, 2019
Jan 17, 2015
Apr 30, 2024
Feb 18, 2016
Dec 22, 2017
Dec 13, 2020
Dec 22, 2017
Jan 16, 2018
Apr 30, 2024
Apr 30, 2024
Aug 8, 2016
May 6, 2019

Repository files navigation

React Countdown Clock

A HTML 5 canvas countdown clock as a React component.

Screenshot

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.