feat(use-is-visible): added "once" option

rambler-digital-solutions · Nov 8, 2024 · 8dc9123 · 8dc9123
1 parent 828cf9f
commit 8dc9123
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/packages/use-is-visible/index.ts b/packages/use-is-visible/index.ts
@@ -4,7 +4,10 @@ import {useEffect, useState} from 'react'
 /** Tracks the intersection of an element with its parent or document's viewport. */
 export function useIsVisible(
   element: Element,
-  options: IntersectionObserverInit = {threshold: 1}
+  options: IntersectionObserverInit & {once: boolean} = {
+    threshold: 1,
+    once: false
+  }
 ): boolean {
   const [isVisible, setIsVisible] = useState(false)
 
@@ -23,6 +26,10 @@ export function useIsVisible(
             thresholds.some((threshold) => entry.intersectionRatio >= threshold)
 
           setIsVisible(isIntersecting)
+
+          if (isIntersecting && options.once) {
+            observer.disconnect()
+          }
         })
       },
       options