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
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