Countdown Timer

A custom hook to manage a countdown timer (cool down) in seconds.

use-cool-down.tsx

import { useCallback, useEffect, useState } from "react";

interface UseCoolDownResult {
  coolDown: number;
  startCoolDown: (duration: number) => void;
}

/**
 * @description A custom hook to manage a countdown timer (cool down) in seconds.
 * @param initialCoolDown Initial cool down duration in seconds.
 * @returns An object containing the current cool down time and a function to start the cool down.
 */
export function useCoolDown(initialCoolDown: number = 0): UseCoolDownResult {
  const [coolDown, setCoolDown] = useState<number>(initialCoolDown);

  const startCoolDown = useCallback((duration: number): void => {
    setCoolDown(Math.max(0, duration));
  }, []);

  useEffect(() => {
    let interval: NodeJS.Timeout | undefined;
    if (coolDown > 0) {
      interval = setInterval(() => {
        setCoolDown((prev) => Math.max(0, prev - 1));
      }, 1000);
    }
    return () => {
      if (interval) clearInterval(interval);
    };
  }, [coolDown]);

  return { coolDown, startCoolDown };
}

Usage

import { useCoolDown } from "@/hooks/use-cool-down";

export default function VerifyOtp() {
  const { coolDown, startCoolDown } = useCoolDown(60);

  return (
    <Button onClick={() => startCoolDown(60)} disabled={coolDown > 0}>
      {coolDown > 0 ? `Resend OTP in ${coolDown}s` : "Resend OTP"}
    </Button>
  );
}