@thibault.sh/hooks/dist/useCountdown.mjs.map

A comprehensive collection of React hooks for browser storage, UI interactions, and more

{"version":3,"sources":["../src/hooks/useCountdown.ts"],"names":["useCountdown","countDownDate","refreshRate","now","firstVal","countDown","setCountDown","useState","intervalRef","useRef","useEffect","updateCountdown","getReturnValues","days","hours","minutes","seconds"],"mappings":"8CA8BO,SAASA,CAAaC,CAAAA,CAAAA,CAAuBC,EAAsB,CACxE,IAAMC,CAAM,CAAA,IAAI,MAAO,CAAA,OAAA,EACjBC,CAAAA,CAAAA,CAAWH,EAAgBE,CAC3B,CAAA,CAACE,CAAWC,CAAAA,CAAY,EAAIC,QAASH,CAAAA,CAAQ,CAC7CI,CAAAA,CAAAA,CAAcC,OAAmB,IAAI,CAAA,CAE3C,OAAAC,SAAAA,CAAU,IAAM,CACd,IAAMC,CAAkB,CAAA,IAAM,CAC5BL,CAAaL,CAAAA,CAAAA,CAAgB,IAAI,IAAA,GAAO,OAAQ,EAAC,EACnD,CAAA,CAEA,OAAAU,CAAgB,EAAA,CAChBH,CAAY,CAAA,OAAA,CAAU,YAAYG,CAAiBT,CAAAA,CAAW,CAEvD,CAAA,IAAM,CACPM,CAAY,CAAA,OAAA,EACd,aAAcA,CAAAA,CAAAA,CAAY,OAAO,EAErC,CACF,CAAG,CAAA,CAACP,EAAeC,CAAW,CAAC,CAExBU,CAAAA,CAAAA,CAAgBP,CAAS,CAClC,CAOA,IAAMO,CAAAA,CAAmBP,GAAsB,CAE7C,IAAMQ,CAAO,CAAA,IAAA,CAAK,MAAMR,CAAa,CAAA,KAAoB,CACnDS,CAAAA,CAAAA,CAAQ,KAAK,KAAOT,CAAAA,CAAAA,EAAa,GAAO,CAAA,EAAA,CAAK,GAAK,EAAQ,CAAA,EAAA,GAAA,CAAO,EAAK,CAAA,EAAA,CAAG,EACzEU,CAAU,CAAA,IAAA,CAAK,KAAOV,CAAAA,CAAAA,EAAa,IAAO,EAAK,CAAA,EAAA,CAAA,EAAQ,GAAO,CAAA,EAAA,CAAG,EACjEW,CAAU,CAAA,IAAA,CAAK,KAAOX,CAAAA,CAAAA,EAAa,IAAO,EAAO,CAAA,CAAA,GAAI,CAG3D,CAAA,OAAIQ,EAAO,CAAU,CAAA,CAAC,CAAG,CAAA,CAAA,CAAG,EAAG,CAAC,CAAA,CAC5BC,CAAQ,CAAA,CAAA,CAAU,CAAC,CAAG,CAAA,CAAA,CAAG,CAAG,CAAA,CAAC,EAC7BC,CAAU,CAAA,CAAA,CAAU,CAAC,CAAA,CAAG,EAAG,CAAG,CAAA,CAAC,CAC/BC,CAAAA,CAAAA,CAAU,EAAU,CAAC,CAAA,CAAG,CAAG,CAAA,CAAA,CAAG,CAAC,CAE5B,CAAA,CAACH,EAAMC,CAAOC,CAAAA,CAAAA,CAASC,CAAO,CACvC,CAAA","file":"useCountdown.mjs","sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\n/**\n * Hook that creates a countdown timer to a target date with automatic updates.\n *\n * Provides real-time countdown values that update at a specified interval.\n * Returns zero values when the target date has passed.\n *\n * @param countDownDate - Target date as a timestamp in milliseconds (e.g., `new Date('2024-12-31').getTime()`)\n * @param refreshRate - Update interval in milliseconds (defaults to 1000ms for 1-second updates)\n *\n * @returns A readonly tuple `[days, hours, minutes, seconds]` representing time remaining\n *\n * @example\n * ```tsx\n * const targetDate = new Date('2024-12-31 23:59:59').getTime();\n * const [days, hours, minutes, seconds] = useCountdown(targetDate);\n *\n * return (\n *   <div>\n *     {days}d {hours}h {minutes}m {seconds}s remaining\n *   </div>\n * );\n * ```\n *\n * @example\n * // Custom refresh rate (every 100ms for smoother animation)\n * const [days, hours, minutes, seconds] = useCountdown(targetDate, 100);\n * @see https://thibault.sh/hooks/use-countdown\n */\nexport function useCountdown(countDownDate: number, refreshRate?: number) {\n  const now = new Date().getTime();\n  const firstVal = countDownDate - now;\n  const [countDown, setCountDown] = useState(firstVal);\n  const intervalRef = useRef<any | null>(null);\n\n  useEffect(() => {\n    const updateCountdown = () => {\n      setCountDown(countDownDate - new Date().getTime());\n    };\n\n    updateCountdown();\n    intervalRef.current = setInterval(updateCountdown, refreshRate);\n\n    return () => {\n      if (intervalRef.current) {\n        clearInterval(intervalRef.current);\n      }\n    };\n  }, [countDownDate, refreshRate]);\n\n  return getReturnValues(countDown);\n}\n\n/**\n * Calculates the remaining time components from a countdown value\n * @param countDown - Time remaining in milliseconds\n * @returns A tuple containing [days, hours, minutes, seconds]\n */\nconst getReturnValues = (countDown: number) => {\n  // calculate time left\n  const days = Math.floor(countDown / (1000 * 60 * 60 * 24));\n  const hours = Math.floor((countDown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\n  const minutes = Math.floor((countDown % (1000 * 60 * 60)) / (1000 * 60));\n  const seconds = Math.floor((countDown % (1000 * 60)) / 1000);\n\n  // values can't be negative\n  if (days < 0) return [0, 0, 0, 0];\n  if (hours < 0) return [0, 0, 0, 0];\n  if (minutes < 0) return [0, 0, 0, 0];\n  if (seconds < 0) return [0, 0, 0, 0];\n\n  return [days, hours, minutes, seconds] as const;\n};\n"]}