Use In View

1'use client'
2 
3import { useLayoutEffect, useRef, useState } from 'react'
4 
5interface UseInViewOptions {
6  /**
7   * Intersection Observer threshold (0-1)
8   * @default 1.0
9   */
10  threshold?: number
11  /**
12   * Intersection Observer root margin
13   * @default '0px'
14   */
15  rootMargin?: string
16}
17 
18/**
19 * A hook that tracks whether an element is visible in the viewport using IntersectionObserver.
20 * @returns An object containing a ref to attach to the element and an isInView boolean state.
21 */
22export function useInView(options: UseInViewOptions = {}) {
23  const { rootMargin = '0px', threshold = 1.0 } = options
24 
25  const ref = useRef<HTMLElement | null>(null)
26  const [isInView, setIsInView] = useState(false)
27 
28  useLayoutEffect(() => {
29    const element = ref.current
30    if (!element) return
31 
32    const observer = new IntersectionObserver(
33      ([entry]) => {
34        setIsInView(entry.isIntersecting)
35      },
36      { threshold, rootMargin },
37    )
38 
39    observer.observe(element)
40 
41    return () => {
42      observer.disconnect()
43    }
44  }, [rootMargin, threshold])
45 
46  return {
47    isInView,
48    ref,
49  }
50}