Count Down React

A fully customizable light weight countdown component for React using render props written in Typescript.

Getting Started

You can either install the module via npm or yarn:

npm install count-down-react

yarn add count-down-react

Basic Example

A simple and example of how to set up a countdown which counts down from 10 seconds.

import React from 'react'
import ReactDOM from 'react-dom'
import CountDown from 'count-down-react'

const CoundownRenderer = ({ days, hours, minutes, seconds }) => (
  <>
    {days} d {hours} h, {minutes} m, {seconds} s
  </>
)

ReactDOM.render(
  <CountDown date={Date.now() + 10000} renderer={CoundownRenderer} />,
  document.getElementById('root')
)

Live Demo

Properties

date: number | string | Date

date is a mandatory prop

renderer: function

You should pass a Component to the renderer. The Component will be called with props {days, hours, minutes, seconds, completed}. You can use it as per your requirement

updateFrequency: function

If you need to change the update frequency of the count down you can pass this function. The function will be called with {days, hours, minutes, seconds, completed}

You should return the frequency in milliseconds

example:

<CountDown
  date={date}
  renderer={CoundownRenderer}
  updateFrequency={({ minutes, seconds }) =>
    minutes * 60 + seconds > 600 ? 5000 : 1000
  }
/>

Here we are updating every 5 seconds till 10 minutes and then every 1 seconds.