react-countdown-simple v1.0.12

React <Countdown />

A simple customizable countdown component for React.

Small bundle size

Check here - https://bundlephobia.com/package/react-countdown-simple@1.0.12

• 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