{"id":28965795,"url":"https://github.com/umarsiddique010/use-timer-hooks","last_synced_at":"2025-06-24T07:09:35.815Z","repository":{"id":300045536,"uuid":"1005060328","full_name":"umarSiddique010/use-timer-hooks","owner":"umarSiddique010","description":null,"archived":false,"fork":false,"pushed_at":"2025-06-19T15:48:09.000Z","size":0,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-19T16:26:55.873Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/umarSiddique010.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-19T15:47:47.000Z","updated_at":"2025-06-19T15:48:12.000Z","dependencies_parsed_at":"2025-06-19T16:37:18.268Z","dependency_job_id":null,"html_url":"https://github.com/umarSiddique010/use-timer-hooks","commit_stats":null,"previous_names":["umarsiddique010/use-timer-hooks"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/umarSiddique010/use-timer-hooks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umarSiddique010%2Fuse-timer-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umarSiddique010%2Fuse-timer-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umarSiddique010%2Fuse-timer-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umarSiddique010%2Fuse-timer-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/umarSiddique010","download_url":"https://codeload.github.com/umarSiddique010/use-timer-hooks/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umarSiddique010%2Fuse-timer-hooks/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261624971,"owners_count":23186121,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-24T07:09:32.165Z","updated_at":"2025-06-24T07:09:35.800Z","avatar_url":"https://github.com/umarSiddique010.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# useTimer\n\nA lightweight, reusable React hook package that provides two battle-tested utilities: `useTimeout` and `useInterval`. These help you manage time-based side effects in React apps — cleanly and safely.\n\n\u003e Fully React-idiomatic · Auto Cleanup · Functional-safe · Zero Dependencies\n\n## Features\n\n- **Delay Execution (Timeout)** — run code after a specified delay\n- **Repeat Execution (Interval)** — run code at a set frequency\n- **No Memory Leaks** — auto-clears timers on unmount\n- **Safe Callback Handling** — avoids stale closures\n- **Manual Control** — start, stop, reset methods\n- **Tiny and Efficient** — no dependencies except React\n\n## Installation\n\n```bash\nnpm install @mdus/use-timer-hooks\n# or\nyarn add @mdus/use-timer-hooks\n```\n\n## API Overview\n\n### `useTimeout(callback, delay)`\n\nRuns a function once after the given delay (in milliseconds).\n\n| Parameter  | Type         | Required | Description                      |\n| ---------- | ------------ | -------- | -------------------------------- |\n| `callback` | `() =\u003e void` | ✅       | Function to run once after delay |\n| `delay`    | `number`     | ✅       | Time in ms to wait before firing |\n\n#### Returns\n\n| Key               | Type       | Description                             |\n| ----------------- | ---------- | --------------------------------------- |\n| `startTimeout()`  | `function` | Start (or restart) the timeout          |\n| `stopTimeout()`   | `function` | Cancel the timeout                      |\n| `resetTimeout()`  | `function` | Reset the timeout (stop + start)        |\n| `isTimeoutActive` | `boolean`  | True while the timeout is counting down |\n\n#### Behavior\n\n- If `delay` is invalid (`null`, `false`, etc), nothing runs\n- Automatically stops on component unmount\n- Callback is kept in sync (doesn't go stale)\n\n### `useInterval(callback, delay)`\n\nRuns a function **repeatedly** at the given interval (in milliseconds).\n\n| Parameter  | Type         | Required | Description                         |\n| ---------- | ------------ | -------- | ----------------------------------- |\n| `callback` | `() =\u003e void` | ✅       | Function to run on each interval    |\n| `delay`    | `number`     | ✅       | Time between runs (in milliseconds) |\n\n#### Returns\n\n| Key                | Type       | Description                        |\n| ------------------ | ---------- | ---------------------------------- |\n| `startInterval()`  | `function` | Starts the interval                |\n| `stopInterval()`   | `function` | Stops the interval                 |\n| `resetInterval()`  | `function` | Stops and restarts the interval    |\n| `isIntervalActive` | `boolean`  | True while the interval is running |\n\n## Examples\n\n### Basic Timeout\n\n```jsx\nimport { useTimeout } from \"@mdus/use-timer-hooks\";\n\nfunction Message() {\n  const [show, setShow] = useState(true);\n\n  // Hide message after 3s\n  useTimeout(() =\u003e setShow(false), 3000);\n\n  return show ? \u003cp\u003eHello! This disappears in 3 seconds.\u003c/p\u003e : null;\n}\n```\n\n### Countdown Using Interval\n\n```jsx\nimport { useInterval } from \"@mdus/use-timer-hooks\";\n\nfunction Countdown() {\n  const [seconds, setSeconds] = useState(10);\n\n  const { stopInterval, isIntervalActive } = useInterval(() =\u003e {\n    setSeconds((prev) =\u003e {\n      if (prev \u003c= 1) {\n        stopInterval(); // Stop when we hit 0\n        return 0;\n      }\n      return prev - 1;\n    });\n  }, 1000);\n\n  return (\n    \u003cp\u003e\n      Countdown: {seconds} {isIntervalActive ? \"\" : \"(Done)\"}\n    \u003c/p\u003e\n  );\n}\n```\n\n### Debounced Search Input\n\n```jsx\nimport { useTimeout } from \"@mdus/use-timer-hooks\";\n\nfunction DebouncedSearch({ value, onSearch }) {\n  const { resetTimeout } = useTimeout(() =\u003e {\n    onSearch(value);\n  }, 500); // debounce 500ms\n\n  useEffect(() =\u003e {\n    resetTimeout(); // re-trigger on value change\n  }, [value]);\n\n  return null;\n}\n```\n\n## Internal Notes\n\n- We use `useRef` to store the latest version of your callback to prevent stale closure issues.\n- Both hooks automatically **clear timers** when the component unmounts — you don't need to worry about leaks or race conditions.\n- Manual `startX()`, `stopX()`, and `resetX()` functions give you full control.\n\n## Folder Structure\n\n```\nuse-timer-hooks/\n├── src/\n│   └── useTimer.js\n├── dist/\n│   └── index.js\n├── package.json\n├── README.md\n└── LICENSE\n```\n\n## Author\n\n**Md Umar Siddique**  \nFrontend-first engineer building real-world tools with long-term value.\n\n- GitHub: [@umarSiddique010](https://github.com/umarSiddique010)\n- LinkedIn: [md-umar-siddique](https://linkedin.com/in/md-umar-siddique)\n- Twitter/X: [@umarSiddique010](https://twitter.com/umarSiddique010)\n\n- Dev.to: [@umarSiddique010](https://dev.to/umarsiddique010)\n\n## Contributing\n\nPull requests are welcome! If you'd like to improve anything or need another timing hook, open an issue or PR.\n\n## License\n\nMIT License — use freely, credit appreciated.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumarsiddique010%2Fuse-timer-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fumarsiddique010%2Fuse-timer-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumarsiddique010%2Fuse-timer-hooks/lists"}