Hooks
useIntersectionObserver
A hook that provides a way to detect when an element enters or leaves the viewport using the Intersection Observer API.
npx shadcn@latest add https://hookagain.vercel.app/r/use-intersection-observer.json
import { useIntersectionObserver } from "@/hooks/use-intersection-observer"
function Example() {
const ref = React.useRef(null)
const entry = useIntersectionObserver(ref, {
threshold: 0.5,
rootMargin: "20px"
})
const isIntersecting = entry?.isIntersecting
return (
<div ref={ref}>
{isIntersecting ? "Element is visible" : "Element is not visible"}
</div>
)
}