UAT

Countdown Hook Demo

Basic Countdown

00:30
Ready

Auto-Start Countdown

00:10
Auto-started

This countdown starts automatically when the page loads.
Duration: 10 seconds

Fast-Ticking Countdown

5
seconds
Ready

This countdown updates 10 times per second (100ms interval).
Duration: 5 seconds

How to Use the Hook

// Import the hook
import { useCountdown } from "@/hooks/use-countdown";

// Basic usage
const {
  duration,
  setDuration,
  status,
  remainingSeconds,
  start,
  pause,
  reset
} = useCountdown({
  duration: 30,
  autoStart: false,
  tickIntervalDelay: 1000
});

// Check status
const isRunning = status === "running";
const isCompleted = status === "completed";

// Format time as MM:SS
const formattedTime = `${Math.floor(remainingSeconds / 60)
  .toString()
  .padStart(2, '0')}:${(remainingSeconds % 60)
  .toString()
  .padStart(2, '0')}`;

Available Options:

  • duration: Length of countdown in seconds (default: 5)
  • autoStart: Start automatically when mounted (default: false)
  • tickIntervalDelay: Milliseconds between updates (default: 1000)