React Round Countdown

React component to render a countdown (that goes to the negative numbers)

Install

Using npm:

npm install react-round-countdown --save

Using yarn:

yarn add react-round-countdown

Motivation

I needed a countdown for a Magic: the Gathering tournament, in an offline setting. So I decided to create my own countdown.

Usage

Example

There is a create-react-app app in the example/ folder you can check out.

In the code

A simple use case of a 50 minute timer:

import React from 'react';
import ReactDOM from 'react-dom';
import Countdown from 'react-round-countdown';

ReactDOM.render(
  <Countdown end={Date.now() + 50 * 60* 1000} />,
  document.getElementById('root')
);

Docs

This module exports just the one component <Countdown>.

Props

| prop | description | type | default | | ------ | -------------------------------------------------------------------- | ------------------------ | ----------------------------------------------------------- | | end | The end date | number | string | Date | -- | | onTick | [optional] a callback on each tick with the remaining milliseconds | (n: number) => void | -- | | colors | [optional] the colors to represent 3 different stages | ColorConfig | { normal: 'black', almostOut: 'orange', negative: 'red' } | | style | [optional] Style the countdown component | CSSProperties | -- |

License

MIT