@awgv/use-timer-hook

The hook was created as an abstraction for notifications and is essentially a pausable setTimeout(). Neither setInterval() nor Date() objects are used, so if you need conventional clock functionality, you might want to check out packages that provide date/time information like amrlabib/react-timer-hook.

Usage

Package name:

@awgv/use-timer-hook

The hook is well-documented internally, so you can rely on your editor for intelligent code completion.

import { useTimer } from '@awgv/use-timer-hook'

export function YourComponent() {
  const {
    /**
     * ⏲ Returns true if the timer is running.
     */
    timerIsRunning,
    /**
     * ⏳ Stores the running timer’s remaining time and updates
     * when the timer is paused or restarted.
     */
    remainingTime,
    /**
     * 🔁 Starts or restarts the timer.
     */
    restartTimer,
    /**
     * ⏯ Resumes a paused timer.
     */
    resumeTimer,
    /**
     * ⏸ Pauses a running timer.
     */
    pauseTimer,
    /**
     * ⏹ Completely stops the timer.
     */
    stopTimer,
  } = useTimer({
    /**
     * The duration, in milliseconds, the timer should wait before
     * `callbackToExecuteOnExpiry()` is executed.
     */
    totalDurationInMilliseconds: 1000,
    /**
     * A function to be executed after the timer expires.
     */
    callbackToExecuteOnExpiry: () => {},
  })
}