@bipboys/react-countdown

Countdown

React component countdown

Installation

This module is distributed via github npm registry (GitHub Packages) which is bundled with node and should be installed as one of your project's dependencies. See more about work with Github Packages and installing a package:

1. Authenticate to GitHub Packages using the instructions for your package client
2. Install the package using the instructions for your package client.

npm install @bipboys/countdown

Usage

It couldn't be easier!

1. Сustom render

import {Countdown} from '@bipboys/react-countdown

  let dt = new Date();
  dt.setMilliseconds(dt.getMilliseconds() + 10000);

 <Countdown
    overtime
    zeroPadTime={2}
    onStart={(timeD) => {
    console.log('onStart: ', timeD);
    }}
    onPause={(timeD) => {
    console.log('onPause: ', timeD);
    }}
    onComplete={(timeD) => {
    console.log('onComplete: ', timeD);
    }}
    onStop={(timeD) => {
    console.log('onStop: ', timeD);
    }}
    intervalDelay={1000}
    date={dt}
    renderer={(renderProps) => {
    const {days, hours, minutes, seconds} = renderProps.formatted;
    return (
        <>
            <span>
                {renderProps.total < 0 ? '-' : ''}
                {days}
                {days ? ':' : ''}
                {hours}:{minutes}:{seconds}
            </span>
            <button
            onClick={() => {
                renderProps.api.start();
            }}
            >
            {'START'}
            </button>
            <button
            onClick={() => {
                renderProps.api.pause();
            }}
            >
            {'PAUSE'}
            </button>
            <button
            onClick={() => {
                renderProps.api.stop();
            }}
            >
            {'STOP'}
            </button>
        </>
    );
    }}
  />

2. Default render

<Countdown date={'June 10, 2021 21:12:12'} />

Props

prop	type	default	description
date	Date/number/string		start timer
intervalDelay	number	1000	interval delay for timer tick
precision	number	0	precision on a millisecond basis
autostart	boolean	true	auto start
overtime	boolean		run timer after time expires
className	string		add class
daysInHours	boolean	false	days are calculated as hours
zeroPadTime	number	2	length of zero-padded output, e.g.: 00:01:02
zeroPadDays	number		length of zero-padded days output, e.g.: 01
onMount	CountdownTimeDeltaFn		callback
onStart	CountdownTimeDeltaFn		callback
onPause	CountdownTimeDeltaFn		callback
onReset	CountdownTimeDeltaFn		callback
onTick	CountdownTimeDeltaFn		callback
onComplete	CountdownTimeDeltaFn		callback
renderer	CountdownRendererFn		custom render (api, props, time)

STATUSES

STARTED (counter is running) PAUSED STOPPED (default status and after reset) COMPLETED

API

name	description
start	start - status STARTED
pause	pause - status PAUSED
reset	reset - status STOPPED
isStarted	check status
isPaused	-
isStopped	-
isCompleted	-

Usage with TypeScript

See the typescript usage example