use-in-viewport

1import { useState } from 'react'
2import { useEffectWithTarget } from '@/registry/hooks/use-effect-with-target'
3import { getTargetElement } from '@/registry/lib/create-effect-with-target'
4import type { BasicTarget } from '@/registry/lib/create-effect-with-target'
5 
6type CallbackType = (entry: IntersectionObserverEntry) => void
7 
8export interface UseInViewportOptions {
9  rootMargin?: string
10  threshold?: number | number[]
11  root?: BasicTarget<Element>
12  callback?: CallbackType
13}
14 
15export function useInViewport(
16  target: BasicTarget | BasicTarget[],
17  options?: UseInViewportOptions,
18) {
19  const { callback, ...option } = options || {}
20 
21  const [state, setState] = useState<boolean>()
22  const [ratio, setRatio] = useState<number>()
23 
24  useEffectWithTarget(
25    () => {
26      const targets = Array.isArray(target) ? target : [target]
27      const els = targets
28        .map((element) => getTargetElement(element))
29        .filter(Boolean)
30 
31      if (!els.length) {
32        return
33      }
34 
35      const observer = new IntersectionObserver(
36        (entries) => {
37          for (const entry of entries) {
38            setRatio(entry.intersectionRatio)
39            setState(entry.isIntersecting)
40            callback?.(entry)
41          }
42        },
43        {
44          ...option,
45          root: getTargetElement(options?.root),
46        },
47      )
48 
49      els.forEach((el) => observer.observe(el!))
50 
51      return () => {
52        observer.disconnect()
53      }
54    },
55    [options?.rootMargin, options?.threshold, callback],
56    target,
57  )
58 
59  return [state, ratio] as const
60}