React Countdown Component

Description

Tiny, easy and customizable component providing you with an updated counter of hours, minutes, seconds and/or milliseconds –one, some or all of them– or just the total count of milliseconds remaining for a given lapse of time –in ms.

The updated counter may be displayed in your apps with any tags, styles or any customization you need to show it.

Demo

You can dive into the example or review the code in the GitHub repo.

Requirements

Node >= 6.x
React >= 16
React's Prop-Types >= 16

Install

npm install --save react prop-types
npm install --save react-countdown-component

Usage

You can use this counter in various ways. Check the demo directory in the repo for an in-depth example. This is one of the simplest implementation:

import CountDown, {CountdownContext} from 'react-countdown-component';
 
render() {
  const { hours, minutes, seconds } = this.state.counter;
  return (
    <CountDown
      // Your state to hold counter's data.
      from     = { this.state.counter }
      // Triggered on each counter's update.
      onUpdate = { value => this.onUpdate( value ) }
    >
    <CountdownContext.Consumer>
      { ( counter ) => (
        <React.Fragment>
          // Use the countdown however you want, like this:
          <h2>{ hours }:{ minutes }:{ seconds }</h2>
 
          // You may use this toggler button to play/pause the counter and
          // also standalone controls to play, pause and/or reset.
          <button onClick = { counter.playPause } >Play/Pause Countdown</button>
        </React.Fragment>
      ) }
    </CountdownContext.Consumer>
    </CountDown>
  )
}

Props

These are the properties you may pass to the CountDown component:

property	propType	required	default	description
from	object	yes	null	Requires an object (see example).
updateEvery	number	no	1000ms	Milliseconds between updates.
leftPadding	string	no	'0'	Number of zeroes on the left.
onStart	function	no	null	Callback on start.
onPause	function	no	null	Callback on pause.
onReset	function	no	null	Callback on reset.
onUpdate	function	yes	null	Callback on update.
onFinish	function	no	null	Callback on finish.

RenderProps

These are the functions you can use to manipulate the generated counter (see example):

property	propType	required	default	description
start	function	yes*	null	Starts the countdown.
pause	function	no	null	Pauses the counter.
reset	function	no	null	Stops the counter and resets it.
playPause	function	yes*	null	Toggles between play and pause.

License

MIT

Author

Yago Estévez