@bipboys/react-countdown v0.1.2

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

STATUSES

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

API

Usage with TypeScript

See the typescript usage example