Documentation

useIntersectionObserver

Detect element visibility in viewport for lazy loading and infinite scroll.

Installation

pnpm add @rouf-dev/pantheon-ui

Usage

"use client";

import { useIntersectionObserver } from "@rouf-dev/pantheon-ui";
import { useRef } from "react";

export function LazyImageDemo() {
  const ref = useRef(null);
  const isVisible = useIntersectionObserver(ref, { threshold: 0.5 });

  return (
    <div ref={ref}>
      {isVisible && <img src="/image.jpg" alt="Lazy loaded" />}
    </div>
  );
}

Parameters

ref: React ref for the target element

options: IntersectionObserver options (threshold, root, rootMargin)