React <Countdown />

A simple customizable countdown component for React.

Small bundle size

Check here - https://bundlephobia.com/package/[email protected]

• Getting Started
• Examples
• Props

Getting Started

You can install the module via npm or yarn:

npm install react-countdown-simple --save

yarn add react-countdown-simple

Examples

Here are some examples which you can try directly online.

Basic Usage

A very simple and minimal example of how to set up a countdown that counts down from 1 hour.

import React from 'react';
import ReactDOM from 'react-dom';
import Countdown from 'react-countdown-simple';

const oneHour = new Date(
  new Date().setHours(new Date().getHours() + 1)
).toISOString()

ReactDOM.render(
  <Countdown targetDate={oneHour} />,
  document.getElementById('root')
);

Live Demo

Custom renderer

import React from 'react';
import ReactDOM from 'react-dom';
import Countdown from 'react-countdown-simple';

const oneHour = new Date(
  new Date().setHours(new Date().getHours() + 1)
).toISOString()

const renderer = ({ days, hours, minutes, seconds }) =>
  <div>{days}/{hours}/{minutes}/{seconds}</div>

ReactDOM.render(
  <Countdown targetDate={oneHour} renderer={renderer}/>,
  document.getElementById('root')
);

Live Demo

Props

|Name|Type|Default|Description| |:--|:--:|:-----:|:----------| |targetDate|string|required|Timestamp in the future| |disableTypes|boolean|false|Hide formats| |formatType|"d_h_m_s" | "D_H_M_S" | "dd_hh_mm_ss" | "DD_HH_MM_SS" | undefined|"D_H_M_S"|Predefined formats| |renderer|function|undefined|Custom renderer callback|