![\"usefy](\"https://raw.githubusercontent.com/mirunamu00/usefy/master/assets/logo.png\"){kind=logo}
\n\n \n
\n A powerful, accurate countdown timer hook for React applications\n
\n\n\n \n ![\"npm](\"https://img.shields.io/npm/v/@usefy/use-timer.svg?style=flat-square&color=007acc\")
\n \n \n ![\"npm](\"https://img.shields.io/npm/dm/@usefy/use-timer.svg?style=flat-square&color=007acc\")
\n \n \n ![\"bundle](\"https://img.shields.io/bundlephobia/minzip/@usefy/use-timer?style=flat-square&color=007acc\")
![\"license\"](\"https://img.shields.io/npm/l/@usefy/use-timer.svg?style=flat-square&color=007acc\")
\n \n
\n Installation ā¢\n Quick Start ā¢\n API Reference ā¢\n Examples ā¢\n License\n
\n\n\n \n š View Storybook Demo\n \n
\n\n---\n\n## Overview\n\n`@usefy/use-timer` is a feature-rich countdown timer hook for React applications. It provides accurate time tracking with drift compensation, multiple time formats, flexible controls, and smart render optimization.\n\n**Part of the [@usefy](https://www.npmjs.com/org/usefy) ecosystem** ā a collection of production-ready React hooks designed for modern applications.\n\n### Why use-timer?\n\n- **Accurate Timing** ā Uses `performance.now()` with drift compensation for precise countdowns\n- **Smart Render Optimization** ā Only re-renders when the formatted time actually changes\n- **Multiple Formats** ā Built-in formats (`MM:SS`, `HH:MM:SS`, `mm:ss.SSS`) or custom formatters\n- **Full Control** ā Start, pause, stop, reset, restart, and toggle controls\n- **Time Manipulation** ā Add, subtract, or set time dynamically during countdown\n- **Background Tab Support** ā Visibility API integration for accurate time when switching tabs\n- **Loop Mode** ā Automatically restart the timer when it completes\n- **TypeScript First** ā Full type safety with comprehensive type definitions\n- **Zero Dependencies** ā Pure React implementation\n- **StrictMode Safe** ā Works correctly under React StrictMode, including `autoStart`\n- **Well Tested** ā 127 tests with comprehensive coverage\n\n---\n\n## Installation\n\n```bash\n# npm\nnpm install @usefy/use-timer\n\n# yarn\nyarn add @usefy/use-timer\n\n# pnpm\npnpm add @usefy/use-timer\n```\n\n### Peer Dependencies\n\nThis package requires React 18 or 19:\n\n```json\n{\n \"peerDependencies\": {\n \"react\": \"^18.0.0 || ^19.0.0\"\n }\n}\n```\n\n---\n\n## Quick Start\n\n```tsx\nimport { useTimer, ms } from \"@usefy/use-timer\";\n\nfunction Timer() {\n const timer = useTimer(ms.minutes(5), { format: \"MM:SS\" });\n\n return (\n{timer.time}
\n \n \n{timer.time}
\n \n{timer.time}
\n{timer.time}
\n{timer.time}
{/* \"2h 30m 0s\" */}\n \n{timer.time}
\n \n\n Built with care by the usefy team\n
\n","readmeFilename":"README.md"}