useIntersection

useIntersection (교차 관찰)

useIntersection 훅은 관찰 대상 요소에 전달해야 하는 ref 함수와 IntersectionObserver 콜백이 반환하는 최신 entry를 반환해요.

출처: 문서

본문

useIntersection 훅은 관찰 대상 요소에 전달해야 하는 ref 함수와 IntersectionObserver의 콜백이 반환하는 최신 entry를 반환해요. 옵션에 대한 자세한 내용은 Intersection Observer API 문서를 확인하세요.

첫 번째 렌더링(SSR 포함)이나 관찰 중인 요소가 없을 때는 entry가 null이에요.

import { Paper } from '@mantine/core';
import { useIntersection } from '@mantine/hooks';

function Demo() {
  const { ref } = useIntersection();

  return (
    <>
      {/* With regular element: */}
      <div ref={ref}>...</div>

      {/* With Mantine component: */}
      <Paper ref={ref}>...</Paper>
    </>
  );
}

정의 (Definition)

interface UseIntersectionReturnValue {
  ref: React.RefCallback;
  entry: IntersectionObserverEntry | null;
}

function useIntersection(
  options?: IntersectionObserverInit,
): UseIntersectionReturnValue

Exported types

UseIntersectionReturnValue 타입은 @mantine/hooks 패키지에서 내보내져요.

import type { UseIntersectionReturnValue } from '@mantine/hooks';

더 알아보기 (Learn more)