common useVisibility.ts

0% Statements 0/13

0% Branches 0/5

0% Functions 0/4

0% Lines 0/13

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { useState, useEffect } from "react";
 
const useVisibility = (
  ref: React.RefObject<HTMLDivElement>,
  threshold: number = 0.5,
): boolean => {
  const [isVisible, setIsVisible] = useState(false);
 
  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsVisible(
          entry.isIntersecting && entry.intersectionRatio >= threshold,
        );
      },
      {
        threshold: [threshold],
      },
    );
 
    Iif (ref.current) {
      observer.observe(ref.current);
    }
 
    return () => {
      Iif (ref.current) {
        // eslint-disable-next-line react-hooks/exhaustive-deps
        observer.unobserve(ref.current);
      }
    };
  }, [ref, threshold]);
 
  return isVisible;
};
 
export default useVisibility;