useTimer

Hook that creates a timer functionality

time

test coverage

Last changed: last month

Installation

Library

CLI

Manual

import { useTimer } from '@siberiacancode/reactuse';

Usage

const { days, hours, minutes, seconds, toggle, pause, start, restart, resume, active, decrease, increase } = useTimer();
// or
const { days, hours, minutes, seconds, toggle, pause, start, restart, resume, active, decrease, increase } = useTimer(1000, () => console.log('ready'));
// or
const { days, hours, minutes, seconds, toggle, pause, start, restart, resume, active, decrease, increase } = useTimer(1000);

Demo

source

Api

Returns

UseTimerReturn

Parameters

Name	Type	Default	Note
seconds	number	-	The seconds value that define for how long the timer will be running
callback	() => void	-	The function to be executed once countdown timer is expired

Returns

UseTimerReturn

Parameters

Name	Type	Default	Note
seconds	number	-	The seconds value that define for how long the timer will be running
options.immediately?	boolean	true	The flag to decide if timer should start automatically
options.onExpire?	() => void	-	The function to be executed when the timer is expired
options.onTick?	(timestamp: number) => void	-	The function to be executed on each tick of the timer

Returns

UseTimerReturn

Type declaration

export type PositiveInteger<Value extends number> = `${Value}` extends `-${any}` | `${any}.${any}`
  ? never
  : Value;

export interface UseTimerOptions {
  /** Whether the timer should start automatically */
  immediately?: boolean;
  /** The function to be executed when the timer is expired */
  onExpire?: () => void;
  /** The function to be executed when the timer is started */
  onStart?: () => void;
  /** Callback function to be executed on each tick of the timer */
  onTick?: (seconds: number) => void;
}

export interface UseTimerReturn {
  /** flag to indicate if timer is active or not */
  active: boolean;
  /** The total count of the timer */
  count: number;
  /** The day count of the timer */
  days: number;
  /** The hour count of the timer */
  hours: number;
  /** The minute count of the timer */
  minutes: number;
  /** The second count of the timer */
  seconds: number;
  /** The function to clear the timer */
  clear: () => void;
  /** The function to decrease the timer */
  decrease: (seconds: PositiveInteger<number>) => void;
  /** The function to increase the timer */
  increase: (seconds: PositiveInteger<number>) => void;
  /** The function to pause the timer */
  pause: () => void;
  /** The function to restart the timer */
  restart: (time: PositiveInteger<number>, immediately?: boolean) => void;
  /** The function to resume the timer */
  resume: () => void;
  /** The function to start the timer */
  start: () => void;
  /** The function to toggle the timer */
  toggle: () => void;
}

export interface UseTimer {
  (): UseTimerReturn;

  (seconds: PositiveInteger<number>, callback: () => void): UseTimerReturn;

  (seconds: PositiveInteger<number>, options?: UseTimerOptions): UseTimerReturn;
}

Source

Source • Demo

Contributors

D

debabin

K

khmilevoi