Skip to main content

InView

InView는 useIntersectionObserver 를 선언적으로 활용 할 수 있는 컴포넌트입니다.

Viewport에 노출될 때(onIntersectStart) 혹은 나갈 때(onIntersectEnd) 특정 action 함수를 호출 할 수 있는 컴포넌트입니다.

calledOnce를 활용하면 onIntersectStart와 onIntersectEnd를 각각 한번씩 호출 할 수 있습니다.

Intersection Observer Option을 설정할 수 있습니다.(하단 Note 참고)


Code​

🔗 실제 구현 코드 확인

Interface​

typescript
interface IntersectionObserverInit {
    root?: Element | Document | null;
    rootMargin?: string;
    threshold?: number | number[];
}

interface UseIntersectionObserverProps extends IntersectionObserverInit {
  onIntersectStart?: (entry: IntersectionObserverEntry) => void;
  onIntersectEnd?: (entry: IntersectionObserverEntry) => void;
  calledOnce?: boolean;
}

type InViewProps = React.ComponentProps<'div'> & UseIntersectionObserverProps;

const InView: React.ForwardRefExoticComponent<
  Omit<React.PropsWithChildren<InViewProps>, 'ref'> &
    React.RefAttributes<HTMLDivElement>
>;

Usage​

typescript
import { InView } from '@modern-kit/react';

const Example = () => {
  const handleIntersectStart = () => {
    /* action */
  }

  const handleIntersectEnd = () => {
    /* action */
  }

  return (
    <div>
      {/* ... */}
      <InView
        onIntersectStart={handleIntersectStart}
        onIntersectStart={handleIntersectEnd}
        calledOnce>
        Box1
      </InView>
    </div>;
  );
};

Example​

스크롤 해주세요.

Box1

브라우저 개발자 도구의 콘솔을 확인해주세요.

onIntersectStart가 최초 1회만 호출됩니다.

calledOnce: true

Box2

브라우저 개발자 도구의 콘솔을 확인해주세요.

onIntersectStart, onIntersectEnd 함수가 여러 번 호출됩니다.

calledOnce: false

Note​