useIntersection

useIntersection.ts

import { useEffect, useState } from "react"

function useIntersection() {
	const [element, setElement] = useState<Element>()
	const [isIntersecting, setIntersecting] = useState(false)

	useEffect(() => {
		if (!element) return

		const observer = new IntersectionObserver(([entry]) => {
			setIntersecting(entry.isIntersecting)
		})
		observer.observe(element)
		return () => observer.disconnect()
	}, [element])

	return [setElement, isIntersecting] as const
}

function Comp() {
	const [ref, isIntersecting] = useIntersection()
	return <div ref={ref} />
}