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