refactor(hooks): make useViewed() reusable (#12067)

* Add intersectionObserverOptions for useViewed * fix(hooks): disable IntersectionObserver on view * Revert "fix(hooks): disable IntersectionObserver on view" This reverts commit 75918ea. --------- Co-authored-by: Florian Dieminger <[email protected]>
mdn · Nov 4, 2024 · c9377b7 · c9377b7
1 parent fdbd7ad
commit c9377b7
Showing 1 changed file with 9 additions and 6 deletions.
diff --git a/client/src/hooks.ts b/client/src/hooks.ts
@@ -280,15 +280,18 @@ interface ViewedTimer {
   timeout: number | null;
 }
 
-export function useViewed(callback: Function) {
-  const timer = useRef<ViewedTimer>({ timeout: null });
-  const isVisible = usePageVisibility();
-  const [node, setNode] = useState<HTMLElement>();
-  const isIntersecting = useIsIntersecting(node, {
+export function useViewed(
+  callback: Function,
+  intersectionObserverOptions: IntersectionObserverInit = {
     root: null,
     rootMargin: "0px",
     threshold: 0.5,
-  });
+  }
+) {
+  const timer = useRef<ViewedTimer>({ timeout: null });
+  const isVisible = usePageVisibility();
+  const [node, setNode] = useState<HTMLElement>();
+  const isIntersecting = useIsIntersecting(node, intersectionObserverOptions);
 
   useEffect(() => {
     if (timer.current.timeout !== -1) {