https://github.com/pughpugh/react-countdown-clock

HTML5 canvas countdown clock React component
https://github.com/pughpugh/react-countdown-clock

canvas coffeescript countdown-timer react

Last synced: about 11 hours ago
JSON representation

HTML5 canvas countdown clock React component

• Host: GitHub
• URL: https://github.com/pughpugh/react-countdown-clock
• Owner: pughpugh
• License: isc
• Created: 2015-01-17T21:17:55.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2024-11-18T22:41:17.000Z (25 days ago)
• Last Synced: 2024-12-06T17:04:00.788Z (8 days ago)
• Topics: canvas, coffeescript, countdown-timer, react
• Language: CoffeeScript
• Size: 2.53 MB
• Stars: 187
• Watchers: 3
• Forks: 83
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# React Countdown Clock

A HTML 5 canvas countdown clock as a React component.

![Screenshot](http://pughpugh.github.io/react-countdown-clock/animated.gif)

## Demo

[pughpugh.github.io/react-countdown-clock](http://pughpugh.github.io/react-countdown-clock)

## Installation

```

npm install react-countdown-clock

```

## Usage

```javascript

```

## 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](https://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: [[email protected]](mailto:[email protected])

* Web: [www.hughgallagher.co.uk](http://www.hughgallagher.co.uk/)