Viewport Observer React Component

ViewportObserver.react.tsx

import { Slot } from "@radix-ui/react-slot";

type Props = React.ComponentPropsWithoutRef<"div"> & {
    asChild?: boolean;
    options?: IntersectionObserverInit;
    onAppear?: () => void;
    onDisappear?: () => void;
};

export function ViewportObserver({
    asChild = false,
    options,
    onAppear,
    onDisappear,
    ...props
}: Props) {
    const Comp = asChild ? Slot : "div";
    const handleIntersect: IntersectionObserverCallback = (entries) => {
        const entry = entries.length > 0 ? entries[0]! : undefined;
        if (entry !== undefined) {
            if (entry.isIntersecting) {
                onAppear?.();
            } else {
                onDisappear?.();
            }
        }
    };
    const observer = React.useRef(new IntersectionObserver(handleIntersect, options));
    const ref = (el: HTMLDivElement | null) => {
        if (el) {
            observer.current.observe(el);
            return () => observer.current.unobserve(el);
        }
    };

    return <Comp ref={ref} {...props} />;
}