React <Countdown />
A simple customizable countdown component for React.
Small bundle size
| BUNDLE SIZE | |
|---|---|
| 305 B | 171 B |
| MINIFIED | MINIFIED + GZIPPED |
Check here - https://bundlephobia.com/package/react-countdown-simple@1.0.12
Getting Started
You can install the module via npm or yarn:
npm install react-countdown-simple --saveyarn add react-countdown-simpleExamples
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')
);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')
);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 |