Skip to content

Latest commit

 

History

History
65 lines (57 loc) · 1.91 KB

README.zh_CN.md

File metadata and controls

65 lines (57 loc) · 1.91 KB

React Countdown hook

使用 requestAnimationFrame 实现的倒计时 hook,以 dd:hh:mm:ss 的形式返回剩余时间

npm downloads

简体中文 | English

安装

yarn add use-countdown-hook

或者使用 npm

npm install use-countdown-hook

使用

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