@sohanemon/utils 5.1.2 → 5.1.4

package/dist/hooks/index.d.ts

@@ -160,3 +160,31 @@ export declare const useIsAtTop: ({ offset }?: {
     scrollableContainerRef: React.RefObject<HTMLElement>;
     isAtTop: boolean;
 };
+interface UseIntersectionOptions extends IntersectionObserverInit {
+    onInteractionStart?: () => void;
+    onInteractionEnd?: () => void;
+}
+/**
+ * React hook that tracks when an element enters or leaves the viewport
+ * using the Intersection Observer API.
+ *
+ * @example
+ * ```tsx
+ * const { ref, isIntersecting } = useIntersection({
+ *   threshold: 0.1,
+ *   onInteractionStart: () => console.log('👀 Element entered viewport'),
+ *   onInteractionEnd: () => console.log('🙈 Element left viewport'),
+ * });
+ *
+ * return <div ref={ref}>Watch me</div>;
+ * ```
+ *
+ * @param options - Configuration for the intersection observer.
+ * @returns Object containing:
+ * - `ref`: React ref to attach to the observed element.
+ * - `isIntersecting`: Whether the element is currently visible.
+ */
+export declare const useIntersection: ({ threshold, root, rootMargin, onInteractionStart, onInteractionEnd, }?: UseIntersectionOptions) => {
+    ref: React.RefObject<any>;
+    isIntersecting: boolean;
+};

package/dist/hooks/index.js

@@ -154,17 +154,15 @@ export const useSessionStorage = (key, defaultValue) => {
             setStoredValue(JSON.parse(value));
         }
     }, [key]);
-    const updateStoredValue = (valueOrFn) => {
-        let newValue;
-        if (typeof valueOrFn === 'function') {
-            newValue = valueOrFn(storedValue);
-        }
-        else {
-            newValue = valueOrFn;
-        }
-        sessionStorage.setItem(key, JSON.stringify(newValue));
-        setStoredValue(newValue);
-    };
+    const updateStoredValue = React.useCallback((valueOrFn) => {
+        setStoredValue((prev) => {
+            const newValue = typeof valueOrFn === 'function'
+                ? valueOrFn(prev)
+                : valueOrFn;
+            sessionStorage.setItem(key, JSON.stringify(newValue));
+            return newValue;
+        });
+    }, [key]);
     return [storedValue, updateStoredValue];
 };
 /**
@@ -181,7 +179,7 @@ export const useLocalStorage = (key, defaultValue) => {
             setStoredValue(JSON.parse(value));
         }
     }, [key]);
-    const updateStoredValue = (valueOrFn) => {
+    const updateStoredValue = React.useCallback((valueOrFn) => {
         let newValue;
         if (typeof valueOrFn === 'function') {
             newValue = valueOrFn(storedValue);
@@ -191,7 +189,7 @@ export const useLocalStorage = (key, defaultValue) => {
         }
         localStorage.setItem(key, JSON.stringify(newValue));
         setStoredValue(newValue);
-    };
+    }, [key]);
     return [storedValue, updateStoredValue];
 };
 /**
@@ -475,3 +473,59 @@ export const useIsAtTop = ({ offset } = {}) => {
     });
     return { scrollableContainerRef, isAtTop };
 };
+/**
+ * React hook that tracks when an element enters or leaves the viewport
+ * using the Intersection Observer API.
+ *
+ * @example
+ * ```tsx
+ * const { ref, isIntersecting } = useIntersection({
+ *   threshold: 0.1,
+ *   onInteractionStart: () => console.log('👀 Element entered viewport'),
+ *   onInteractionEnd: () => console.log('🙈 Element left viewport'),
+ * });
+ *
+ * return <div ref={ref}>Watch me</div>;
+ * ```
+ *
+ * @param options - Configuration for the intersection observer.
+ * @returns Object containing:
+ * - `ref`: React ref to attach to the observed element.
+ * - `isIntersecting`: Whether the element is currently visible.
+ */
+export const useIntersection = ({ threshold = 0.1, root = null, rootMargin, onInteractionStart, onInteractionEnd, } = {}) => {
+    const [isIntersecting, setIsIntersecting] = React.useState(false);
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting) {
+                    if (!isIntersecting) {
+                        onInteractionStart?.();
+                        setIsIntersecting(true);
+                    }
+                }
+                else {
+                    if (isIntersecting) {
+                        onInteractionEnd?.();
+                        setIsIntersecting(false);
+                    }
+                }
+            }
+        }, { threshold, root, rootMargin });
+        observer.observe(ref.current);
+        return () => {
+            observer.disconnect();
+        };
+    }, [
+        threshold,
+        root,
+        rootMargin,
+        onInteractionStart,
+        onInteractionEnd,
+        isIntersecting,
+    ]);
+    return { ref, isIntersecting };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sohanemon/utils",
-  "version": "5.1.2",
+  "version": "5.1.4",
   "author": "Sohan Emon <sohanemon@outlook.com>",
   "description": "",
   "type": "module",