1.0.0 • Published 4 years ago

react-round-countdown v1.0.0

Weekly downloads
6
License
MIT
Repository
gitlab
Last release
4 years ago

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

propdescriptiontypedefault
endThe end datenumber | string | Date--
onTickoptional a callback on each tick with the remaining milliseconds(n: number) => void--
colorsoptional the colors to represent 3 different stagesColorConfig{ normal: 'black', almostOut: 'orange', negative: 'red' }
styleoptional Style the countdown componentCSSProperties--

License

MIT

1.0.0

4 years ago

0.2.0

5 years ago

0.1.2

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago