useIsInViewport

1'use client'
2 
3import * as React from 'react'
4 
5export function useIsInViewport(
6  ref: React.RefObject<Element | null>,
7  visibility: 'full' | 'partial' | number = 'partial',
8) {
9  const [isVisible, setIsVisible] = React.useState(false)
10 
11  React.useEffect(() => {
12    if (!ref.current)
13      return
14 
15    const observer = new IntersectionObserver(
16      ([entry]) => {
17        setIsVisible(entry.isIntersecting)
18      },
19      {
20        threshold: typeof visibility === 'number' ? visibility : visibility === 'full' ? 1 : 0,
21      },
22    )
23 
24    observer.observe(ref.current)
25 
26    return () => {
27      observer.disconnect()
28    }
29  }, [ref, visibility])
30 
31  return isVisible
32}