react-hook-time

react-hook-time is a library for React that allows you to create timers and stopwatches in your applications. It supports TypeScript and provides a simple and clear API, making it easy to customize according to your needs. You can set initial time, choose time units, configure callbacks, and much more.

Open basic demo to see how it works

Go to npm page

Install

npm install react-hook-time

Quickstart

import useTimer from 'react-hook-time'

function App() {
  const { currentTime, start, pause, reset } = useTimer(10, {
    onEnd: () => console.log('Timer ended'),
  })

  return (
    <div>
      <div>Current time {currentTime}</div>
      <button onClick={start}>start</button>
      <button onClick={pause}>pause</button>
      <button onClick={() => {
        // chaining functions
        reset().pause()
      }}>
        reset
      </button>
    </div>
  )
}

API

There are few options to initialize timer. You can pass:

• initialTime
• initialTime and settings object
• settings object
• leave it empty to set it up later with setTime for async setup

initialTime can be number or Date object

const timer = useTimer(10)
const timerFromDate = useTimer(new Date('2023-12-01'))
const timerWithoutUpdates = useTimer(15, { stopUpdate: true })
const stopwatch = useTimer({ stopwatch: true })
const timerWithoutSettings = useTimer()

Props

speedUpFirstSecond - сompare the two sides. In both cases, the 'start' button was clicked simultaneously. However, on the right side, the timer visually starts faster.

step

stopUpdate - with this prop most of the callbacks are not working. Only onStart, onEnd and onCancel are available. currentTime and formattedCurrentTime is not available. Use getCurrentTime() and getFormattedCurrentTime() instead.

stopwatch - with this prop onEnd callback is disabled

Methods

const timer = useTimer(10)

timer returns some values and functions. You can use them separately timer.start() or chain them if required timer.reset().pause()

timeAmount

timeAmount can be number or Date object

timeSettings

Callbacks