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

You can either install the module via npm or yarn:

npm install count-down-react

yarn add count-down-react

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')
)

date is a mandatory prop

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

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.