Observer

Observer renders children only when the element becomes visible in the viewport. Provide a fallback for the hidden state and optionally react to intersections.

const Observer: ForwardRefExoticComponent<{
  children?: React.ReactNode | ((isIntersecting: boolean) => React.ReactNode);
  fallback?: React.ReactNode;
  threshold?: number | number[];
  rootMargin?: string;
  triggerOnce?: boolean;
  onIntersect?: (isIntersecting: boolean, entry: IntersectionObserverEntry) => void;
} & RefAttributes<HTMLDivElement>>

Basic usage#

Render a placeholder with fallback and mount heavy content only after the element intersects.

import { Observer } from '@ilokesto/utilinent';

function InfiniteScrollTrigger({ onLoadMore }) {
  return (
    <Observer 
      onIntersect={(isVisible) => {
        if (isVisible) {
          onLoadMore();
        }
      }}
    >
      <Spinner />
    </Observer>
  );
}

Trigger once and callbacks#

Set triggerOnce to stop observing after the first intersection and use onIntersect for side effects.

function SomeSection({ productId }) {
  return (
    <>
      <Observer
        triggerOnce
        onIntersect={(isVisible) => {
          if (isVisible) {
            // 분석 이벤트 전송
            analytics.track('Product Section Viewed', { productId });
          }
        }}
      />
    </>
  );
}

useIntersectionObserver hook#

The hook exposes ref, isIntersecting, and the latest entry for custom intersection-driven behavior.

function useIntersectionObserver(options?: {
  threshold?: number | number[];
  root?: Element | null;
  rootMargin?: string;
  freezeOnceVisible?: boolean;
  initialIsIntersecting?: boolean;
  onChange?: (isIntersecting: boolean, entry: IntersectionObserverEntry) => void;
}): {
  ref: (node: HTMLElement | null) => void;
  isIntersecting: boolean;
  entry: IntersectionObserverEntry | undefined;
};