useInViewport

1"use client"
2 
3import * as React from "react"
4 
5/**
6 * Whether the element is on screen. A looping animation that nobody can see is
7 * work the browser does for nothing: CSS animations keep ticking while they are
8 * scrolled away, and the compositor keeps the layers alive to do it.
9 *
10 * Starts `true` so the first paint is never a paused one, on the server or
11 * where `IntersectionObserver` is missing.
12 */
13export function useInViewport<T extends Element>(
14  ref: React.RefObject<T | null>,
15  /** Grown by this much, so a loop is already running as it scrolls in. */
16  margin = "200px"
17) {
18  const [visible, setVisible] = React.useState(true)
19 
20  React.useEffect(() => {
21    const node = ref.current
22    if (!node || typeof IntersectionObserver === "undefined") return
23 
24    const observer = new IntersectionObserver(
25      ([entry]) => setVisible(entry.isIntersecting),
26      { rootMargin: margin }
27    )
28 
29    observer.observe(node)
30    return () => observer.disconnect()
31  }, [ref, margin])
32 
33  return visible
34}