use-is-in-viewport useIsInViewport.ts

0% Statements 0/19

0% Branches 0/1

0% Functions 0/1

0% Lines 0/19

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { useEffect, useMemo, useState, type RefObject } from 'react';

export const useIsInViewport = (ref: RefObject<Element | null | undefined>) => {
  const [isIntersecting, setIsIntersecting] = useState(false);

  const observer = useMemo(() => new IntersectionObserver(([entry]) => setIsIntersecting(entry.isIntersecting)), []);

  useEffect(() => {
    // Note: this only works if the element is always mounted.
    // Might need to use a callback ref instead.
    observer.observe(ref.current!);

    return () => {
      observer.disconnect();
    };
  }, [ref, observer]);

  return isIntersecting;
};