useStopwatch

Hook that creates a stopwatch functionality

time

high

test coverage

Last changed: 24 days ago

Installation

Library

CLI

Manual

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

Usage

const { seconds, minutes, start, pause, reset } = useStopwatch(1000, { immediately: false });
// or
const { seconds, minutes, start, pause, reset } = useStopwatch({ initialTime: 1000, immediately: false });

Demo

source

Api

Parameters

Name	Type	Default	Note
initialTime?	number	0	The initial time of the timer
options.immediately?	boolean	false	Start the stopwatch immediately

Returns

UseStopwatchReturn

Parameters

Name	Type	Default	Note
options.initialTime?	number	0	The initial time of the timer
options.immediately?	boolean	false	Start the stopwatch immediately

Returns

UseStopwatchReturn

Type declaration

export interface UseStopwatchReturn {
  /** The total count of the stopwatch */
  count: number;
  /** The day count of the stopwatch */
  days: number;
  /** The hour count of the stopwatch */
  hours: number;
  /** The minute count of the stopwatch */
  minutes: number;
  /** The paused state of the stopwatch */
  paused: boolean;
  /** The second count of the stopwatch */
  seconds: number;
  /** The function to pause the stopwatch */
  pause: () => void;
  /** The function to reset the stopwatch */
  reset: () => void;
  /** The function to start the stopwatch */
  start: () => void;
  /** The function to toggle the stopwatch */
  toggle: (active?: boolean) => void;
}

export interface UseStopwatchOptions {
  /** The immediately state of the timer */
  immediately?: boolean;
}

interface UseStopwatch {
  (initialTime?: number, options?: UseStopwatchOptions): UseStopwatchReturn;
  (options?: UseStopwatchOptions & { initialTime?: number }): UseStopwatchReturn;
}

Source

Source • Demo

Contributors

D

debabin

E

Eksiart

S

sereda