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 { createRoot } from 'react-dom/client';
import Countdown from 'react-countdown-simple';

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

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

Live Demo

Custom renderer

import React from 'react';
import { createRoot } from 'react-dom/client';
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>

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

Live Demo

Props

|Name|Type|Default|Description| |:--|:--:|:-----:|:----------| |targetDate|string \| number \| Date|required|Target time in the future as ISO string, timestamp, or Date instance| |disableTypes|boolean|false|Hide the trailing unit labels (D, H, M, S)| |formatType|"d_h_m_s" | "D_H_M_S" | "dd_hh_mm_ss" | "DD_HH_MM_SS" | undefined|"D_H_M_S"|Predefined formats for labels and zero-padding| |renderer|function|undefined|Custom renderer callback receiving { days, hours, minutes, seconds }|

If targetDate cannot be parsed as a valid date, it is treated as "now" and the countdown renders 00 00 00 00.