![\"usefy](\"https://raw.githubusercontent.com/mirunamu00/usefy/master/assets/logo.png\"){kind=logo}
\n\n \n
\n A powerful React hook for throttled callbacks with cancel, flush, and pending methods\n
\n\n\n \n ![\"npm](\"https://img.shields.io/npm/v/@usefy/use-throttle-callback.svg?style=flat-square&color=007acc\")
\n \n \n ![\"npm](\"https://img.shields.io/npm/dm/@usefy/use-throttle-callback.svg?style=flat-square&color=007acc\")
\n \n \n ![\"bundle](\"https://img.shields.io/bundlephobia/minzip/@usefy/use-throttle-callback?style=flat-square&color=007acc\")
![\"license\"](\"https://img.shields.io/npm/l/@usefy/use-throttle-callback.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-throttle-callback` provides a throttled version of your callback function that limits invocations to at most once per specified interval. Perfect for scroll handlers, resize events, mouse movement tracking, and any high-frequency event that needs rate-limiting with full control methods.\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-throttle-callback?\n\n- **Lean Dependencies** ā One tiny internal dependency (`@usefy/use-debounce-callback`), no third-party runtime deps\n- **TypeScript First** ā Full type safety with generics and exported interfaces\n- **Full Control** ā `cancel()`, `flush()`, and `pending()` methods\n- **Flexible Options** ā Leading edge and trailing edge support\n- **Guaranteed Execution** ā Regular invocations during continuous calls (unlike debounce)\n- **SSR Compatible** ā Works seamlessly with Next.js, Remix, and other SSR frameworks\n- **Lightweight** ā Minimal bundle footprint (~200B minified + gzipped)\n\n### Throttle vs Debounce Callbacks\n\n| Feature | Throttle Callback | Debounce Callback |\n| ------------------ | -------------------------- | ----------------------- |\n| First invocation | Immediate (leading: true) | After delay |\n| During rapid calls | Regular intervals | Waits for pause |\n| Best for | Scroll, resize, mouse move | Search, form validation |\n\n---\n\n## Installation\n\n```bash\n# npm\nnpm install @usefy/use-throttle-callback\n\n# yarn\nyarn add @usefy/use-throttle-callback\n\n# pnpm\npnpm add @usefy/use-throttle-callback\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### Internal Dependencies\n\nThis package uses [@usefy/use-debounce-callback](https://www.npmjs.com/package/@usefy/use-debounce-callback) internally with `maxWait` set to achieve throttle behavior.\n\n---\n\n## Quick Start\n\n```tsx\nimport { useThrottleCallback } from \"@usefy/use-throttle-callback\";\n\nfunction ScrollTracker() {\n const handleScroll = useThrottleCallback(() => {\n console.log(\"Scroll position:\", window.scrollY);\n }, 100);\n\n useEffect(() => {\n window.addEventListener(\"scroll\", handleScroll);\n return () => {\n handleScroll.cancel();\n window.removeEventListener(\"scroll\", handleScroll);\n };\n }, [handleScroll]);\n\n return\n Built with care by the usefy team\n
\n","readmeFilename":"README.md"}