@w3ux/hooks 1.2.0 → 1.2.1-beta.0

package/cjs/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./useEffectIgnoreInitial";
+export * from "./useOnResize";
 export * from "./useOutsideAlerter";
 export * from "./useSize";

package/cjs/index.js

@@ -15,6 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./useEffectIgnoreInitial"), exports);
+__exportStar(require("./useOnResize"), exports);
 __exportStar(require("./useOutsideAlerter"), exports);
 __exportStar(require("./useSize"), exports);
 

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAGA,2DAAyC;AACzC,sDAAoC;AACpC,4CAA0B","file":"index.js","sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only */\n\nexport * from \"./useEffectIgnoreInitial\";\nexport * from \"./useOutsideAlerter\";\nexport * from \"./useSize\";\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAGA,2DAAyC;AACzC,gDAA8B;AAC9B,sDAAoC;AACpC,4CAA0B","file":"index.js","sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only */\n\nexport * from \"./useEffectIgnoreInitial\";\nexport * from \"./useOnResize\";\nexport * from \"./useOutsideAlerter\";\nexport * from \"./useSize\";\n"]}

package/cjs/useOnResize.d.ts

@@ -0,0 +1,7 @@
+import { MutableRefObject } from "react";
+interface UseOnResizeOptions {
+    outerElement?: MutableRefObject<HTMLElement | null | undefined>;
+    throttle?: number;
+}
+export declare const useOnResize: (callback: () => void, options?: UseOnResizeOptions) => void;
+export {};

package/cjs/useOnResize.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOnResize = void 0;
+const react_1 = require("react");
+const useOnResize = (callback, options = {}) => {
+    const { outerElement, throttle: throttleDuration = 100 } = options;
+    const lastExecutedRef = (0, react_1.useRef)(0);
+    const handleResize = () => {
+        const now = Date.now();
+        if (now - lastExecutedRef.current < throttleDuration) {
+            return;
+        }
+        lastExecutedRef.current = now;
+        callback();
+    };
+    (0, react_1.useEffect)(() => {
+        const listenFor = (outerElement === null || outerElement === void 0 ? void 0 : outerElement.current) || window;
+        listenFor.addEventListener("resize", handleResize);
+        return () => {
+            listenFor.removeEventListener("resize", handleResize);
+        };
+    }, [throttleDuration, callback]);
+};
+exports.useOnResize = useOnResize;
+
+//# sourceMappingURL=useOnResize.js.map
+
+//# sourceMappingURL=useOnResize.js.map

package/cjs/useOnResize.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useOnResize.tsx"],"names":[],"mappings":";;;AAAA,iCAA4D;AAQrD,MAAM,WAAW,GAAG,CACzB,QAAoB,EACpB,UAA8B,EAAE,EAChC,EAAE;IACF,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,gBAAgB,GAAG,GAAG,EAAE,GAAG,OAAO,CAAC;IACnE,MAAM,eAAe,GAAG,IAAA,cAAM,EAAS,CAAC,CAAC,CAAC;IAG1C,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACvB,IAAI,GAAG,GAAG,eAAe,CAAC,OAAO,GAAG,gBAAgB,EAAE,CAAC;YACrD,OAAO;QACT,CAAC;QAED,eAAe,CAAC,OAAO,GAAG,GAAG,CAAC;QAC9B,QAAQ,EAAE,CAAC;IACb,CAAC,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QAGb,MAAM,SAAS,GAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,KAAI,MAAM,CAAC;QAGlD,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAGnD,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACxD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC,CAAC;AACnC,CAAC,CAAC;AA/BW,QAAA,WAAW,eA+BtB","file":"useOnResize.js","sourcesContent":["import { MutableRefObject, useEffect, useRef } from \"react\";\n\ninterface UseOnResizeOptions {\n  outerElement?: MutableRefObject<HTMLElement | null | undefined>;\n  throttle?: number;\n}\n\n// Hook to execute a callback function on window resize, with optional throttling.\nexport const useOnResize = (\n  callback: () => void,\n  options: UseOnResizeOptions = {}\n) => {\n  const { outerElement, throttle: throttleDuration = 100 } = options;\n  const lastExecutedRef = useRef<number>(0);\n\n  // Throttled resize handler\n  const handleResize = () => {\n    const now = Date.now();\n    if (now - lastExecutedRef.current < throttleDuration) {\n      return;\n    }\n\n    lastExecutedRef.current = now;\n    callback();\n  };\n\n  useEffect(() => {\n    // Determine the target for the resize event listener.\n    // If `outerElement` is provided, listen to its resize events; otherwise, listen to the window's.\n    const listenFor = outerElement?.current || window;\n\n    // Add event listener for resize on mount.\n    listenFor.addEventListener(\"resize\", handleResize);\n\n    // Clean up event listener on unmount.\n    return () => {\n      listenFor.removeEventListener(\"resize\", handleResize);\n    };\n  }, [throttleDuration, callback]);\n};\n"]}

package/mjs/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./useEffectIgnoreInitial";
+export * from "./useOnResize";
 export * from "./useOutsideAlerter";
 export * from "./useSize";

package/mjs/index.js

@@ -1,4 +1,5 @@
 export * from "./useEffectIgnoreInitial";
+export * from "./useOnResize";
 export * from "./useOutsideAlerter";
 export * from "./useSize";
 

package/mjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAGA,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC","file":"index.js","sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only */\n\nexport * from \"./useEffectIgnoreInitial\";\nexport * from \"./useOutsideAlerter\";\nexport * from \"./useSize\";\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAGA,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC","file":"index.js","sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only */\n\nexport * from \"./useEffectIgnoreInitial\";\nexport * from \"./useOnResize\";\nexport * from \"./useOutsideAlerter\";\nexport * from \"./useSize\";\n"]}

package/mjs/useOnResize.d.ts

@@ -0,0 +1,7 @@
+import { MutableRefObject } from "react";
+interface UseOnResizeOptions {
+    outerElement?: MutableRefObject<HTMLElement | null | undefined>;
+    throttle?: number;
+}
+export declare const useOnResize: (callback: () => void, options?: UseOnResizeOptions) => void;
+export {};

package/mjs/useOnResize.js

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from "react";
+export const useOnResize = (callback, options = {}) => {
+    const { outerElement, throttle: throttleDuration = 100 } = options;
+    const lastExecutedRef = useRef(0);
+    const handleResize = () => {
+        const now = Date.now();
+        if (now - lastExecutedRef.current < throttleDuration) {
+            return;
+        }
+        lastExecutedRef.current = now;
+        callback();
+    };
+    useEffect(() => {
+        const listenFor = outerElement?.current || window;
+        listenFor.addEventListener("resize", handleResize);
+        return () => {
+            listenFor.removeEventListener("resize", handleResize);
+        };
+    }, [throttleDuration, callback]);
+};
+
+//# sourceMappingURL=useOnResize.js.map
+
+//# sourceMappingURL=useOnResize.js.map

package/mjs/useOnResize.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useOnResize.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAQ5D,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,QAAoB,EACpB,UAA8B,EAAE,EAChC,EAAE;IACF,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,gBAAgB,GAAG,GAAG,EAAE,GAAG,OAAO,CAAC;IACnE,MAAM,eAAe,GAAG,MAAM,CAAS,CAAC,CAAC,CAAC;IAG1C,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACvB,IAAI,GAAG,GAAG,eAAe,CAAC,OAAO,GAAG,gBAAgB,EAAE,CAAC;YACrD,OAAO;QACT,CAAC;QAED,eAAe,CAAC,OAAO,GAAG,GAAG,CAAC;QAC9B,QAAQ,EAAE,CAAC;IACb,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QAGb,MAAM,SAAS,GAAG,YAAY,EAAE,OAAO,IAAI,MAAM,CAAC;QAGlD,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAGnD,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACxD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC,CAAC;AACnC,CAAC,CAAC","file":"useOnResize.js","sourcesContent":["import { MutableRefObject, useEffect, useRef } from \"react\";\n\ninterface UseOnResizeOptions {\n  outerElement?: MutableRefObject<HTMLElement | null | undefined>;\n  throttle?: number;\n}\n\n// Hook to execute a callback function on window resize, with optional throttling.\nexport const useOnResize = (\n  callback: () => void,\n  options: UseOnResizeOptions = {}\n) => {\n  const { outerElement, throttle: throttleDuration = 100 } = options;\n  const lastExecutedRef = useRef<number>(0);\n\n  // Throttled resize handler\n  const handleResize = () => {\n    const now = Date.now();\n    if (now - lastExecutedRef.current < throttleDuration) {\n      return;\n    }\n\n    lastExecutedRef.current = now;\n    callback();\n  };\n\n  useEffect(() => {\n    // Determine the target for the resize event listener.\n    // If `outerElement` is provided, listen to its resize events; otherwise, listen to the window's.\n    const listenFor = outerElement?.current || window;\n\n    // Add event listener for resize on mount.\n    listenFor.addEventListener(\"resize\", handleResize);\n\n    // Clean up event listener on unmount.\n    return () => {\n      listenFor.removeEventListener(\"resize\", handleResize);\n    };\n  }, [throttleDuration, callback]);\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@w3ux/hooks",
-  "version": "1.2.0",
+  "version": "1.2.1-beta.0",
   "license": "GPL-3.0-only",
   "main": "cjs/index.js",
   "module": "mjs/index.js",