useCountdown

A hook that provides a numeric countdown with pause, play, and reset controls. Perfect for implementing countdowns between specific numbers, like game countdowns or timed interactions.

Parameters

• min: number - The number to count down to
• max: number - The number to start counting from

Returns

• current: string - Current count value as string
• isPaused: boolean - Whether the countdown is paused
• isOver: boolean - Whether the countdown has reached min value
• pause: () => void - Function to pause the countdown
• play: () => void - Function to start/resume the countdown
• reset: () => void - Function to reset to max value
• togglePause: () => void - Function to toggle pause state

Usage

import { useCountdown } from '@rhinolabs/react-hooks';

function GameCountdown() {
  const {
    current,
    isPaused,
    isOver,
    togglePause,
    reset
  } = useCountdown(0, 10);

  return (
    <div>
      <h2>Count: {current}</h2>

      <button onClick={togglePause}>
        {isPaused ? 'Resume' : 'Pause'}
      </button>

      <button onClick={reset}>
        Start Over
      </button>

      {isOver && (
        <div>Countdown complete!</div>
      )}
    </div>
  );
}

Notes

• Implements one-second interval countdown with boundary control
• Provides comprehensive playback controls (pause/play/reset)
• Maintains state with string-based current value
• Handles completion state and cleanup automatically
• Enforces min/max value constraints