useVisible - Empreint

Detect when a target element enters or leaves the viewport. Built on IntersectionObserver. Useful for lazy loading, infinite scrolling, or scroll-triggered animations.

import { useVisible } from "@empreint/ui";
import { useRef } from "react";

const ref = useRef<HTMLDivElement>(null);
const isVisible = useVisible(ref);

<div ref={ref}>{isVisible ? "I'm in view" : "Off-screen"}</div>;

Parameters

Prop

Type

Returns

boolean — true when the target intersects the viewport.