Rehooks
Content

useCountdown

A hook that offers countdown functionality with adjustable start, stop, and interval parameters.

useCountdown

Usage

Component.tsx
import { useCountdown } from "~/hooks/useCountDown";
 
function Component() {
  const [counter, { startCountdown, stopCountdown, resetCountdown }] =
    useCountdown({
      countStart: 10,
      intervalMs: 1000,
      countStop: 0,
    });
 
  return (
    <div>
      <h2>Countdown Demo</h2>
      <p>Current Count: {counter}</p>
      <button onClick={startCountdown}>Start Countdown</button>
      <button onClick={stopCountdown}>Stop Countdown</button>
      <button onClick={resetCountdown}>Reset Countdown</button>
    </div>
  );
}

API

useCountdown

function useCountdown({
  countStart,
  countStop = 0,
  intervalMs = 1000,
}: {
  countStart: number;
  countStop?: number;
  intervalMs?: number;
}): [
  number,
  {
    startCountdown: () => void;
    stopCountdown: () => void;
    resetCountdown: () => void;
  },
];

Parameters

NameTypeDescription
countStartnumberThe countdown's initial value.
countStopnumberThe value at which the countdown ends (default is 0).
intervalMsnumberThe time in milliseconds between countdown updates (default is 1000).

Returns

NameTypeDescription
countnumberThe current countdown value.
startCountdown() => voidA function to begin the countdown.
stopCountdown() => voidA function to pause the countdown.
resetCountdown() => voidA function to reset the countdown to the initial starting value.

On this page