naystack - v1.5.10
    Preparing search index...

    Function useVisibility

    • Tracks when a DOM element enters the viewport and calls a callback. Uses IntersectionObserver with rootMargin: "100px" and threshold: 0.1.

      Attach the returned ref to the element you want to observe.

      Parameters

      • OptionalonVisible: () => void

        Optional callback invoked once when the observed element becomes visible.

      Returns RefObject<null>

      A ref object to attach to the observed element (e.g. <div ref={ref}>).

      Example: Lazy-load content when a section enters the viewport:

      import { useVisibility } from "naystack/client";

      function LazySection() {
        const [loaded, setLoaded] = useState(false);
        const ref = useVisibility(() => setLoaded(true));

        return (
          <section ref={ref}>
            {loaded ? <HeavyContent /> : <Placeholder />}
          </section>
        );
      }

      const ref = useVisibility(() => trackImpression("hero-banner"));
      return <div ref={ref}>...</div>;

    Settings

    Member Visibility