@longline/aqua-ui 1.0.213 → 1.0.214

package/hooks/useInterval/index.d.ts

@@ -0,0 +1 @@
+export { useInterval } from './useInterval';

package/hooks/useInterval/index.js

@@ -0,0 +1 @@
+export { useInterval } from './useInterval';

package/hooks/useInterval/useInterval.d.ts

@@ -0,0 +1,32 @@
+/**
+ * A custom React hook that repeatedly calls a callback at a specified interval.
+ *
+ * `useInterval` ensures that the most recent version of the callback is used,
+ * avoiding stale closures that can occur in traditional `setInterval` usage
+ * in React.
+ *
+ * This hook is useful for:
+ * - Polling data every few seconds
+ * - Running animations or countdowns
+ * - Periodic background work
+ *
+ * @example
+ * ```tsx
+ * const [count, setCount] = useState(0);
+ *
+ * useInterval(() => {
+ *   setCount(prev => prev + 1);
+ * }, 1000); // Increment every second
+ * ```
+ *
+ * @param callback - A function to be executed at each interval tick.
+ * @param delay - The delay in milliseconds between ticks. If `null`, the
+ * interval is paused.
+ *
+ * @remarks
+ * - Uses `useRef` to persist the latest version of the callback.
+ * - Automatically clears the interval on unmount or if the delay changes.
+ * - Setting `delay` to `null` or `undefined` disables the interval.
+ */
+declare function useInterval(callback: () => void, delay: number | null): void;
+export { useInterval };

package/hooks/useInterval/useInterval.js

@@ -0,0 +1,49 @@
+import * as React from 'react';
+/**
+ * A custom React hook that repeatedly calls a callback at a specified interval.
+ *
+ * `useInterval` ensures that the most recent version of the callback is used,
+ * avoiding stale closures that can occur in traditional `setInterval` usage
+ * in React.
+ *
+ * This hook is useful for:
+ * - Polling data every few seconds
+ * - Running animations or countdowns
+ * - Periodic background work
+ *
+ * @example
+ * ```tsx
+ * const [count, setCount] = useState(0);
+ *
+ * useInterval(() => {
+ *   setCount(prev => prev + 1);
+ * }, 1000); // Increment every second
+ * ```
+ *
+ * @param callback - A function to be executed at each interval tick.
+ * @param delay - The delay in milliseconds between ticks. If `null`, the
+ * interval is paused.
+ *
+ * @remarks
+ * - Uses `useRef` to persist the latest version of the callback.
+ * - Automatically clears the interval on unmount or if the delay changes.
+ * - Setting `delay` to `null` or `undefined` disables the interval.
+ */
+function useInterval(callback, delay) {
+    // Store the latest callback in a ref so it's always up to date
+    var savedCallback = React.useRef();
+    // Update the ref on every render if the callback changes
+    React.useEffect(function () {
+        savedCallback.current = callback;
+    }, [callback]);
+    // Set up the interval
+    React.useEffect(function () {
+        // If delay is null, don't set the interval
+        if (delay === null || delay === undefined)
+            return function () { };
+        var tick = function () { var _a; return (_a = savedCallback.current) === null || _a === void 0 ? void 0 : _a.call(savedCallback); };
+        var id = setInterval(tick, delay);
+        return function () { return clearInterval(id); }; // Cleanup on unmount or delay change
+    }, [delay]);
+}
+export { useInterval };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longline/aqua-ui",
-  "version": "1.0.213",
+  "version": "1.0.214",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",