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;
}

interface UseIntersectionObserverReturnType<T extends HTMLElement> {
  ref: React.RefCallback<T>;
  isIntersecting: boolean;
  hasIntersected: boolean;
}
typescript
function 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 = {}): UseIntersectionObserverReturnType<T>;

Usage​

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

const Example = () => {
  const [value, setValue] = useState(0);
  const [enabled, setEnabled] = useState(true);
  
  const { ref: targetRef, isIntersecting, hasIntersected } = useIntersectionObserver({
    onIntersectStart: (entry) => {
      console.log("onIntersectStart: ", entry);
      setValue(value + 1);
    },
    onIntersectEnd: (entry) => {
      console.log("onIntersectEnd: ", entry);
      setValue(value + 1);
    },
    enabled,
  });

  const boxStyle = {
    height: "800px", 
    backgroundColor: "teal"
  }

  return (
    <div>
      <button onClick={() => setEnabled(!enabled)}>Enabled: {`${enabled}`}</button>
      <p>isIntersecting: {`${isIntersecting}`}</p>
      <p>hasIntersected: {`${hasIntersected}`}</p>

      <div style={boxStyle} />
      <div ref={targetRef} style={{ color: "white", fontSize: "24px", backgroundColor: "blue" }}>
        <div>타겟 요소 <br/> value: {value}</div>
      </div>

      <div style={boxStyle} />
    </div>
  );
};

Example​

isIntersecting: false

hasIntersected: false

타겟 요소
value: 0

Note​