@usefy/use-throttle 0.0.2

package/dist/index.d.mts

@@ -0,0 +1,56 @@
+/**
+ * Options for useThrottle hook
+ */
+interface UseThrottleOptions {
+    /**
+     * Whether to update the throttled value on the leading edge
+     * @default true
+     */
+    leading?: boolean;
+    /**
+     * Whether to update the throttled value on the trailing edge
+     * @default true
+     */
+    trailing?: boolean;
+}
+/**
+ * Throttles a value by limiting updates to at most once per specified interval.
+ * This is implemented using useDebounce with maxWait set to the interval.
+ *
+ * @template T - The type of the value to throttle
+ * @param value - The value to throttle
+ * @param delay - The interval in milliseconds (default: 500ms)
+ * @param options - Additional options for controlling throttle behavior
+ * @returns The throttled value
+ *
+ * @example
+ * ```tsx
+ * function ScrollComponent() {
+ *   const [scrollY, setScrollY] = useState(0);
+ *   const throttledScrollY = useThrottle(scrollY, 100);
+ *
+ *   useEffect(() => {
+ *     const handleScroll = () => setScrollY(window.scrollY);
+ *     window.addEventListener("scroll", handleScroll);
+ *     return () => window.removeEventListener("scroll", handleScroll);
+ *   }, []);
+ *
+ *   return <div>Scroll Y: {throttledScrollY}</div>;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With leading edge only
+ * const throttledValue = useThrottle(value, 300, { leading: true, trailing: false });
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With trailing edge only
+ * const throttledValue = useThrottle(value, 300, { leading: false, trailing: true });
+ * ```
+ */
+declare function useThrottle<T>(value: T, delay?: number, options?: UseThrottleOptions): T;
+
+export { type UseThrottleOptions, useThrottle };

package/dist/index.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Options for useThrottle hook
+ */
+interface UseThrottleOptions {
+    /**
+     * Whether to update the throttled value on the leading edge
+     * @default true
+     */
+    leading?: boolean;
+    /**
+     * Whether to update the throttled value on the trailing edge
+     * @default true
+     */
+    trailing?: boolean;
+}
+/**
+ * Throttles a value by limiting updates to at most once per specified interval.
+ * This is implemented using useDebounce with maxWait set to the interval.
+ *
+ * @template T - The type of the value to throttle
+ * @param value - The value to throttle
+ * @param delay - The interval in milliseconds (default: 500ms)
+ * @param options - Additional options for controlling throttle behavior
+ * @returns The throttled value
+ *
+ * @example
+ * ```tsx
+ * function ScrollComponent() {
+ *   const [scrollY, setScrollY] = useState(0);
+ *   const throttledScrollY = useThrottle(scrollY, 100);
+ *
+ *   useEffect(() => {
+ *     const handleScroll = () => setScrollY(window.scrollY);
+ *     window.addEventListener("scroll", handleScroll);
+ *     return () => window.removeEventListener("scroll", handleScroll);
+ *   }, []);
+ *
+ *   return <div>Scroll Y: {throttledScrollY}</div>;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With leading edge only
+ * const throttledValue = useThrottle(value, 300, { leading: true, trailing: false });
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With trailing edge only
+ * const throttledValue = useThrottle(value, 300, { leading: false, trailing: true });
+ * ```
+ */
+declare function useThrottle<T>(value: T, delay?: number, options?: UseThrottleOptions): T;
+
+export { type UseThrottleOptions, useThrottle };

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, {
+  useThrottle: () => useThrottle
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/useThrottle.ts
+var import_use_debounce = require("@usefy/use-debounce");
+function useThrottle(value, delay = 500, options = {}) {
+  const { leading = true, trailing = true } = options;
+  return (0, import_use_debounce.useDebounce)(value, delay, {
+    leading,
+    maxWait: delay,
+    trailing
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useThrottle
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/useThrottle.ts"],"sourcesContent":["export { useThrottle, type UseThrottleOptions } from \"./useThrottle\";\r\n","import { useDebounce, type UseDebounceOptions } from \"@usefy/use-debounce\";\r\n\r\n/**\r\n * Options for useThrottle hook\r\n */\r\nexport interface UseThrottleOptions {\r\n  /**\r\n   * Whether to update the throttled value on the leading edge\r\n   * @default true\r\n   */\r\n  leading?: boolean;\r\n  /**\r\n   * Whether to update the throttled value on the trailing edge\r\n   * @default true\r\n   */\r\n  trailing?: boolean;\r\n}\r\n\r\n/**\r\n * Throttles a value by limiting updates to at most once per specified interval.\r\n * This is implemented using useDebounce with maxWait set to the interval.\r\n *\r\n * @template T - The type of the value to throttle\r\n * @param value - The value 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 The throttled value\r\n *\r\n * @example\r\n * ```tsx\r\n * function ScrollComponent() {\r\n *   const [scrollY, setScrollY] = useState(0);\r\n *   const throttledScrollY = useThrottle(scrollY, 100);\r\n *\r\n *   useEffect(() => {\r\n *     const handleScroll = () => setScrollY(window.scrollY);\r\n *     window.addEventListener(\"scroll\", handleScroll);\r\n *     return () => window.removeEventListener(\"scroll\", handleScroll);\r\n *   }, []);\r\n *\r\n *   return <div>Scroll Y: {throttledScrollY}</div>;\r\n * }\r\n * ```\r\n *\r\n * @example\r\n * ```tsx\r\n * // With leading edge only\r\n * const throttledValue = useThrottle(value, 300, { leading: true, trailing: false });\r\n * ```\r\n *\r\n * @example\r\n * ```tsx\r\n * // With trailing edge only\r\n * const throttledValue = useThrottle(value, 300, { leading: false, trailing: true });\r\n * ```\r\n */\r\nexport function useThrottle<T>(\r\n  value: T,\r\n  delay: number = 500,\r\n  options: UseThrottleOptions = {}\r\n): 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 useDebounce(value, delay, {\r\n    leading,\r\n    maxWait: delay,\r\n    trailing,\r\n  });\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,0BAAqD;AAwD9C,SAAS,YACd,OACA,QAAgB,KAChB,UAA8B,CAAC,GAC5B;AACH,QAAM,EAAE,UAAU,MAAM,WAAW,KAAK,IAAI;AAG5C,aAAO,iCAAY,OAAO,OAAO;AAAA,IAC/B;AAAA,IACA,SAAS;AAAA,IACT;AAAA,EACF,CAAC;AACH;","names":[]}

package/dist/index.mjs

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

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useThrottle.ts"],"sourcesContent":["import { useDebounce, type UseDebounceOptions } from \"@usefy/use-debounce\";\r\n\r\n/**\r\n * Options for useThrottle hook\r\n */\r\nexport interface UseThrottleOptions {\r\n  /**\r\n   * Whether to update the throttled value on the leading edge\r\n   * @default true\r\n   */\r\n  leading?: boolean;\r\n  /**\r\n   * Whether to update the throttled value on the trailing edge\r\n   * @default true\r\n   */\r\n  trailing?: boolean;\r\n}\r\n\r\n/**\r\n * Throttles a value by limiting updates to at most once per specified interval.\r\n * This is implemented using useDebounce with maxWait set to the interval.\r\n *\r\n * @template T - The type of the value to throttle\r\n * @param value - The value 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 The throttled value\r\n *\r\n * @example\r\n * ```tsx\r\n * function ScrollComponent() {\r\n *   const [scrollY, setScrollY] = useState(0);\r\n *   const throttledScrollY = useThrottle(scrollY, 100);\r\n *\r\n *   useEffect(() => {\r\n *     const handleScroll = () => setScrollY(window.scrollY);\r\n *     window.addEventListener(\"scroll\", handleScroll);\r\n *     return () => window.removeEventListener(\"scroll\", handleScroll);\r\n *   }, []);\r\n *\r\n *   return <div>Scroll Y: {throttledScrollY}</div>;\r\n * }\r\n * ```\r\n *\r\n * @example\r\n * ```tsx\r\n * // With leading edge only\r\n * const throttledValue = useThrottle(value, 300, { leading: true, trailing: false });\r\n * ```\r\n *\r\n * @example\r\n * ```tsx\r\n * // With trailing edge only\r\n * const throttledValue = useThrottle(value, 300, { leading: false, trailing: true });\r\n * ```\r\n */\r\nexport function useThrottle<T>(\r\n  value: T,\r\n  delay: number = 500,\r\n  options: UseThrottleOptions = {}\r\n): 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 useDebounce(value, delay, {\r\n    leading,\r\n    maxWait: delay,\r\n    trailing,\r\n  });\r\n}\r\n"],"mappings":";AAAA,SAAS,mBAA4C;AAwD9C,SAAS,YACd,OACA,QAAgB,KAChB,UAA8B,CAAC,GAC5B;AACH,QAAM,EAAE,UAAU,MAAM,WAAW,KAAK,IAAI;AAG5C,SAAO,YAAY,OAAO,OAAO;AAAA,IAC/B;AAAA,IACA,SAAS;AAAA,IACT;AAAA,EACF,CAAC;AACH;","names":[]}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@usefy/use-throttle",
+  "version": "0.0.2",
+  "description": "A React hook for throttling values",
+  "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": "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"
+  },
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "hooks",
+    "throttle",
+    "rate-limit"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "clean": "rimraf dist"
+  }
+}