{"library":"react-timer-hook","title":"React Timer Hook","description":"react-timer-hook is a robust custom React hook library designed to simplify the implementation of timers, stopwatches, and general time-based logic within React components. It provides three core hooks: `useTimer` for countdowns, `useStopwatch` for count-up timers, and `useTime` for retrieving the current time. Currently stable at version `4.0.5`, the library maintains an active release cadence, frequently addressing bug fixes, dependency updates, and minor feature enhancements. A key differentiator is its out-of-the-box TypeScript support and its intelligent handling of browser tab inactivity to ensure accurate timer behavior, especially for stopwatches. It exposes a comprehensive set of time values including days, hours, minutes, seconds, milliseconds, and total raw seconds/milliseconds, along with functions for starting, pausing, resuming, and restarting timers, offering fine-grained control for various time-sensitive UI/UX requirements.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-timer-hook"],"cli":null},"imports":["import { useTimer } from 'react-timer-hook';","import { useStopwatch } from 'react-timer-hook';","import { useTime } from 'react-timer-hook';","import type { TimerControls } from 'react-timer-hook';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { useTimer } from 'react-timer-hook';\n\ninterface MyTimerProps {\n  expiryTimestamp: Date;\n}\n\nfunction MyTimer({ expiryTimestamp }: MyTimerProps) {\n  const {\n    totalSeconds,\n    milliseconds,\n    seconds,\n    minutes,\n    hours,\n    days,\n    isRunning,\n    start,\n    pause,\n    resume,\n    restart,\n  } = useTimer({ expiryTimestamp, onExpire: () => console.warn('onExpire called'), interval: 20 });\n\n  return (\n    <div style={{textAlign: 'center'}}>\n      <h1>react-timer-hook </h1>\n      <p>Timer Demo</p>\n      <div style={{fontSize: '100px'}}>\n        <span>{days}</span>:<span>{hours}</span>:<span>{minutes}</span>:<span>{seconds}</span>:<span>{milliseconds}</span>\n      </div>\n      <p>{isRunning ? 'Running' : 'Not running'}</p>\n      <button onClick={start}>Start</button>\n      <button onClick={pause}>Pause</button>\n      <button onClick={resume}>Resume</button>\n      <button onClick={() => {\n        const time = new Date();\n        time.setSeconds(time.getSeconds() + 300); // Set for 5 minutes from now\n        restart(time);\n      }}>Restart 5min</button>\n    </div>\n  );\n}\n\nexport default function App() {\n  const time = new Date();\n  time.setSeconds(time.getSeconds() + 600); // 10 minutes timer\n  return (\n    <div>\n      <MyTimer expiryTimestamp={time} />\n    </div>\n  );\n}\n","lang":"typescript","description":"This quickstart demonstrates a countdown timer using `useTimer`, showcasing its display of days, hours, minutes, seconds, and milliseconds, along with controls for starting, pausing, resuming, and restarting the timer. It also includes an `onExpire` callback.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}