use-countdown-hook

React Countdown hook

Dead simple React countdown hook which will return the remain time in the dd:hh:mm:ss format implemented by requestAnimationFrame

简体中文 | English

Install

yarn add use-countdown-hook

or

npm install use-countdown-hook

Usage

import { useCountDown } from 'use-countdown-hook'

const onTimeOver = useCallback(
  () => {
    console.log('time over...')
  },
[])

const [{ dd, hh, mm, ss }, { start, pause }] = useCountDown(60 * 1000, {
  startImmediately: false,
  onTimeOver
})

return (
  <>
    <p>
      <span>{ dd }Days</span>
      <span>{ hh }Hours</span>
      <span>{ mm }Minutes</span>
      <span>{ ss }Seconds</span>
    </p>
    <button onClick={ start }>Start</button>
    <button onClick={ pause }>Pause</button>
  </>
)