@sohanemon/utils 5.1.2 → 5.1.3

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

@@ -475,3 +475,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.3",
   "author": "Sohan Emon <sohanemon@outlook.com>",
   "description": "",
   "type": "module",