useCountdown

A React Hook that provides a countdown timer.

Demo

Source
ms from `now` to `2030-01-01`:
145548235929

Usage

See API for more details.

Source

Click links below to view source on GitHub.

API

const ms = useCountdown(dateLike)
const countdown = useCountdown(dateLike, options) // with manual controls

DateLike

type DateLike = string | number | Date | null | undefined

Options

export type UseCountdownOptions<Controls extends boolean = false> = {
  /**
   * whether to start the countdown immediately
   *
   * @defaultValue true
   */
  immediate?: boolean
  /**
   * whether to expose the controls
   *
   * @defaultValue false
   */
  controls?: Controls
  /**
   * the interval to update the countdown
   *
   * @defaultValue 'requestAnimationFrame'
   */
  interval?: 'requestAnimationFrame' | number
  /**
   * a callback function to be called when the countdown is updated
   */
  onUpdate?: (ms: number, seconds: number) => void
  /**
   * a callback function to be called when the countdown is stopped
   */
  onStop?(): void
}

Returns

Retuerns contain Pausable instance that can be paused, resumed.

See Pausable for more details.

export type UseCountdownReturns<Controls extends boolean> = Controls extends true ? { ms: number } & Pausable : number