Skip to main content

useIntersectionObserver

ref를 할당한 타겟 엘리먼트가 Viewport에 노출될 때(onIntersectStart) 혹은 나갈 때(onIntersectEnd) 특정 action 함수를 호출 할 수 있는 컴포넌트입니다.

calledOnce옵션을 true로 설정하면 onIntersectStart와 onIntersectEnd를 각각 한번씩 호출 할 수 있습니다.

enabled옵션을 통해 onIntersect* 콜백 함수들의 호출을 제어 할 수 있습니다. false라면 타겟 엘리먼트가 Viewport에 노출하더라도 실행되지 않습니다.

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;
  enabled?: boolean;
}
typescript
const useIntersectionObserver: <T extends HTMLElement>({
  onIntersectStart,
  onIntersectEnd,
  enabled, // default: true
  calledOnce, // default: false
  root, // default: null
  threshold, // default: 0
  rootMargin, // default: '0px 0px 0px 0px'
}: UseIntersectionObserverProps) => { 
  ref: React.RefCallback<T> 
};

Usage​

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

const Example = () => {
  const [enabled, setEnabled] = useState(false);
  const { ref: targetRef } = useIntersectionObserver({
    onIntersectStart: (entry) => {
      console.log("onIntersectStart: ", entry);
    },
    onIntersectEnd: (entry) => {
      console.log("onIntersectEnd: ", entry);
    },
    enabled,
  });
  const boxStyle = {
    height: "800px", 
    backgroundColor: "teal"
  }

  return (
    <div>
      <button onClick={() => setEnabled(!enabled)}>Toggle Enabled: {`${enabled}`}</button>
      <div style={boxStyle} />
      <div ref={targetRef} style={{ color: "white", fontSize: "24px", backgroundColor: "blue" }}>
        타겟 요소<br />
        개발자 도구 콘솔을 확인해주세요.
      </div>
      <div style={boxStyle} />
    </div>
  );
};

Exmaple​

타겟 요소
개발자 도구 콘솔을 확인해주세요.

Note​