@usefy/use-throttle-callback 0.0.2

package/dist/index.d.mts

@@ -0,0 +1,80 @@
+import { DebouncedFunction } from '@usefy/use-debounce-callback';
+
+/**
+ * Options for useThrottleCallback hook
+ */
+interface UseThrottleCallbackOptions {
+    /**
+     * Whether to invoke on the leading edge
+     * @default true
+     */
+    leading?: boolean;
+    /**
+     * Whether to invoke on the trailing edge
+     * @default true
+     */
+    trailing?: boolean;
+}
+/**
+ * Throttled function interface with control methods
+ */
+type ThrottledFunction<T extends (...args: any[]) => any> = DebouncedFunction<T>;
+/**
+ * Creates a throttled version of the provided callback function.
+ * The throttled function limits invocations to at most once per specified interval.
+ * This is implemented using useDebounceCallback with maxWait set to the interval.
+ *
+ * @template T - The type of the callback function
+ * @param callback - The function to throttle
+ * @param delay - The interval in milliseconds (default: 500ms)
+ * @param options - Additional options for controlling throttle behavior
+ * @returns A throttled version of the callback with cancel, flush, and pending methods
+ *
+ * @example
+ * ```tsx
+ * function ScrollTracker() {
+ *   const throttledScroll = useThrottleCallback(
+ *     () => {
+ *       console.log('Scroll position:', window.scrollY);
+ *     },
+ *     100
+ *   );
+ *
+ *   useEffect(() => {
+ *     window.addEventListener('scroll', throttledScroll);
+ *     return () => {
+ *       throttledScroll.cancel();
+ *       window.removeEventListener('scroll', throttledScroll);
+ *     };
+ *   }, [throttledScroll]);
+ *
+ *   return <div>Scroll to see throttled logs</div>;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With leading edge only
+ * const throttledFn = useThrottleCallback(callback, 300, { leading: true, trailing: false });
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With trailing edge only
+ * const throttledFn = useThrottleCallback(callback, 300, { leading: false, trailing: true });
+ *
+ * // Cancel pending invocation
+ * throttledFn.cancel();
+ *
+ * // Immediately invoke pending invocation
+ * throttledFn.flush();
+ *
+ * // Check if there's a pending invocation
+ * if (throttledFn.pending()) {
+ *   console.log('There is a pending call');
+ * }
+ * ```
+ */
+declare function useThrottleCallback<T extends (...args: any[]) => any>(callback: T, delay?: number, options?: UseThrottleCallbackOptions): ThrottledFunction<T>;
+
+export { type ThrottledFunction, type UseThrottleCallbackOptions, useThrottleCallback };

package/dist/index.d.ts

@@ -0,0 +1,80 @@
+import { DebouncedFunction } from '@usefy/use-debounce-callback';
+
+/**
+ * Options for useThrottleCallback hook
+ */
+interface UseThrottleCallbackOptions {
+    /**
+     * Whether to invoke on the leading edge
+     * @default true
+     */
+    leading?: boolean;
+    /**
+     * Whether to invoke on the trailing edge
+     * @default true
+     */
+    trailing?: boolean;
+}
+/**
+ * Throttled function interface with control methods
+ */
+type ThrottledFunction<T extends (...args: any[]) => any> = DebouncedFunction<T>;
+/**
+ * Creates a throttled version of the provided callback function.
+ * The throttled function limits invocations to at most once per specified interval.
+ * This is implemented using useDebounceCallback with maxWait set to the interval.
+ *
+ * @template T - The type of the callback function
+ * @param callback - The function to throttle
+ * @param delay - The interval in milliseconds (default: 500ms)
+ * @param options - Additional options for controlling throttle behavior
+ * @returns A throttled version of the callback with cancel, flush, and pending methods
+ *
+ * @example
+ * ```tsx
+ * function ScrollTracker() {
+ *   const throttledScroll = useThrottleCallback(
+ *     () => {
+ *       console.log('Scroll position:', window.scrollY);
+ *     },
+ *     100
+ *   );
+ *
+ *   useEffect(() => {
+ *     window.addEventListener('scroll', throttledScroll);
+ *     return () => {
+ *       throttledScroll.cancel();
+ *       window.removeEventListener('scroll', throttledScroll);
+ *     };
+ *   }, [throttledScroll]);
+ *
+ *   return <div>Scroll to see throttled logs</div>;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With leading edge only
+ * const throttledFn = useThrottleCallback(callback, 300, { leading: true, trailing: false });
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With trailing edge only
+ * const throttledFn = useThrottleCallback(callback, 300, { leading: false, trailing: true });
+ *
+ * // Cancel pending invocation
+ * throttledFn.cancel();
+ *
+ * // Immediately invoke pending invocation
+ * throttledFn.flush();
+ *
+ * // Check if there's a pending invocation
+ * if (throttledFn.pending()) {
+ *   console.log('There is a pending call');
+ * }
+ * ```
+ */
+declare function useThrottleCallback<T extends (...args: any[]) => any>(callback: T, delay?: number, options?: UseThrottleCallbackOptions): ThrottledFunction<T>;
+
+export { type ThrottledFunction, type UseThrottleCallbackOptions, useThrottleCallback };

package/dist/index.js

@@ -0,0 +1,41 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  useThrottleCallback: () => useThrottleCallback
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/useThrottleCallback.ts
+var import_use_debounce_callback = require("@usefy/use-debounce-callback");
+function useThrottleCallback(callback, delay = 500, options = {}) {
+  const { leading = true, trailing = true } = options;
+  return (0, import_use_debounce_callback.useDebounceCallback)(callback, delay, {
+    leading,
+    maxWait: delay,
+    trailing
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useThrottleCallback
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/useThrottleCallback.ts"],"sourcesContent":["export {\r\n  useThrottleCallback,\r\n  type UseThrottleCallbackOptions,\r\n  type ThrottledFunction,\r\n} from \"./useThrottleCallback\";\r\n","import {\r\n  useDebounceCallback,\r\n  type DebouncedFunction,\r\n} from \"@usefy/use-debounce-callback\";\r\n\r\n/**\r\n * Options for useThrottleCallback hook\r\n */\r\nexport interface UseThrottleCallbackOptions {\r\n  /**\r\n   * Whether to invoke on the leading edge\r\n   * @default true\r\n   */\r\n  leading?: boolean;\r\n  /**\r\n   * Whether to invoke on the trailing edge\r\n   * @default true\r\n   */\r\n  trailing?: boolean;\r\n}\r\n\r\n/**\r\n * Throttled function interface with control methods\r\n */\r\nexport type ThrottledFunction<T extends (...args: any[]) => any> =\r\n  DebouncedFunction<T>;\r\n\r\n/**\r\n * Creates a throttled version of the provided callback function.\r\n * The throttled function limits invocations to at most once per specified interval.\r\n * This is implemented using useDebounceCallback with maxWait set to the interval.\r\n *\r\n * @template T - The type of the callback function\r\n * @param callback - The function to throttle\r\n * @param delay - The interval in milliseconds (default: 500ms)\r\n * @param options - Additional options for controlling throttle behavior\r\n * @returns A throttled version of the callback with cancel, flush, and pending methods\r\n *\r\n * @example\r\n * ```tsx\r\n * function ScrollTracker() {\r\n *   const throttledScroll = useThrottleCallback(\r\n *     () => {\r\n *       console.log('Scroll position:', window.scrollY);\r\n *     },\r\n *     100\r\n *   );\r\n *\r\n *   useEffect(() => {\r\n *     window.addEventListener('scroll', throttledScroll);\r\n *     return () => {\r\n *       throttledScroll.cancel();\r\n *       window.removeEventListener('scroll', throttledScroll);\r\n *     };\r\n *   }, [throttledScroll]);\r\n *\r\n *   return <div>Scroll to see throttled logs</div>;\r\n * }\r\n * ```\r\n *\r\n * @example\r\n * ```tsx\r\n * // With leading edge only\r\n * const throttledFn = useThrottleCallback(callback, 300, { leading: true, trailing: false });\r\n * ```\r\n *\r\n * @example\r\n * ```tsx\r\n * // With trailing edge only\r\n * const throttledFn = useThrottleCallback(callback, 300, { leading: false, trailing: true });\r\n *\r\n * // Cancel pending invocation\r\n * throttledFn.cancel();\r\n *\r\n * // Immediately invoke pending invocation\r\n * throttledFn.flush();\r\n *\r\n * // Check if there's a pending invocation\r\n * if (throttledFn.pending()) {\r\n *   console.log('There is a pending call');\r\n * }\r\n * ```\r\n */\r\nexport function useThrottleCallback<T extends (...args: any[]) => any>(\r\n  callback: T,\r\n  delay: number = 500,\r\n  options: UseThrottleCallbackOptions = {}\r\n): ThrottledFunction<T> {\r\n  const { leading = true, trailing = true } = options;\r\n\r\n  // Throttle is implemented using debounce with maxWait set to delay\r\n  return useDebounceCallback(callback, delay, {\r\n    leading,\r\n    maxWait: delay,\r\n    trailing,\r\n  });\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mCAGO;AAgFA,SAAS,oBACd,UACA,QAAgB,KAChB,UAAsC,CAAC,GACjB;AACtB,QAAM,EAAE,UAAU,MAAM,WAAW,KAAK,IAAI;AAG5C,aAAO,kDAAoB,UAAU,OAAO;AAAA,IAC1C;AAAA,IACA,SAAS;AAAA,IACT;AAAA,EACF,CAAC;AACH;","names":[]}

package/dist/index.mjs

@@ -0,0 +1,16 @@
+// src/useThrottleCallback.ts
+import {
+  useDebounceCallback
+} from "@usefy/use-debounce-callback";
+function useThrottleCallback(callback, delay = 500, options = {}) {
+  const { leading = true, trailing = true } = options;
+  return useDebounceCallback(callback, delay, {
+    leading,
+    maxWait: delay,
+    trailing
+  });
+}
+export {
+  useThrottleCallback
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useThrottleCallback.ts"],"sourcesContent":["import {\r\n  useDebounceCallback,\r\n  type DebouncedFunction,\r\n} from \"@usefy/use-debounce-callback\";\r\n\r\n/**\r\n * Options for useThrottleCallback hook\r\n */\r\nexport interface UseThrottleCallbackOptions {\r\n  /**\r\n   * Whether to invoke on the leading edge\r\n   * @default true\r\n   */\r\n  leading?: boolean;\r\n  /**\r\n   * Whether to invoke on the trailing edge\r\n   * @default true\r\n   */\r\n  trailing?: boolean;\r\n}\r\n\r\n/**\r\n * Throttled function interface with control methods\r\n */\r\nexport type ThrottledFunction<T extends (...args: any[]) => any> =\r\n  DebouncedFunction<T>;\r\n\r\n/**\r\n * Creates a throttled version of the provided callback function.\r\n * The throttled function limits invocations to at most once per specified interval.\r\n * This is implemented using useDebounceCallback with maxWait set to the interval.\r\n *\r\n * @template T - The type of the callback function\r\n * @param callback - The function to throttle\r\n * @param delay - The interval in milliseconds (default: 500ms)\r\n * @param options - Additional options for controlling throttle behavior\r\n * @returns A throttled version of the callback with cancel, flush, and pending methods\r\n *\r\n * @example\r\n * ```tsx\r\n * function ScrollTracker() {\r\n *   const throttledScroll = useThrottleCallback(\r\n *     () => {\r\n *       console.log('Scroll position:', window.scrollY);\r\n *     },\r\n *     100\r\n *   );\r\n *\r\n *   useEffect(() => {\r\n *     window.addEventListener('scroll', throttledScroll);\r\n *     return () => {\r\n *       throttledScroll.cancel();\r\n *       window.removeEventListener('scroll', throttledScroll);\r\n *     };\r\n *   }, [throttledScroll]);\r\n *\r\n *   return <div>Scroll to see throttled logs</div>;\r\n * }\r\n * ```\r\n *\r\n * @example\r\n * ```tsx\r\n * // With leading edge only\r\n * const throttledFn = useThrottleCallback(callback, 300, { leading: true, trailing: false });\r\n * ```\r\n *\r\n * @example\r\n * ```tsx\r\n * // With trailing edge only\r\n * const throttledFn = useThrottleCallback(callback, 300, { leading: false, trailing: true });\r\n *\r\n * // Cancel pending invocation\r\n * throttledFn.cancel();\r\n *\r\n * // Immediately invoke pending invocation\r\n * throttledFn.flush();\r\n *\r\n * // Check if there's a pending invocation\r\n * if (throttledFn.pending()) {\r\n *   console.log('There is a pending call');\r\n * }\r\n * ```\r\n */\r\nexport function useThrottleCallback<T extends (...args: any[]) => any>(\r\n  callback: T,\r\n  delay: number = 500,\r\n  options: UseThrottleCallbackOptions = {}\r\n): ThrottledFunction<T> {\r\n  const { leading = true, trailing = true } = options;\r\n\r\n  // Throttle is implemented using debounce with maxWait set to delay\r\n  return useDebounceCallback(callback, delay, {\r\n    leading,\r\n    maxWait: delay,\r\n    trailing,\r\n  });\r\n}\r\n"],"mappings":";AAAA;AAAA,EACE;AAAA,OAEK;AAgFA,SAAS,oBACd,UACA,QAAgB,KAChB,UAAsC,CAAC,GACjB;AACtB,QAAM,EAAE,UAAU,MAAM,WAAW,KAAK,IAAI;AAG5C,SAAO,oBAAoB,UAAU,OAAO;AAAA,IAC1C;AAAA,IACA,SAAS;AAAA,IACT;AAAA,EACF,CAAC;AACH;","names":[]}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@usefy/use-throttle-callback",
+  "version": "0.0.2",
+  "description": "A React hook for throttling callback functions",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "dependencies": {
+    "@usefy/use-debounce-callback": "0.0.2"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.0.0",
+    "jsdom": "^27.3.0",
+    "react": "^19.0.0",
+    "rimraf": "^6.0.1",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vitest": "^4.0.16"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/geon0529/usefy.git",
+    "directory": "packages/use-throttle-callback"
+  },
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "hooks",
+    "throttle",
+    "callback",
+    "rate-limit"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "clean": "rimraf dist"
+  }
+}