useInViewport

useInViewport (뷰포트 노출 감지)

useInViewport 훅은 요소가 뷰포트에 보이는지 감지해요. useIntersection의 더 간단한 대안이에요.

출처: 문서

본문

useInViewport 훅은 요소가 뷰포트에 보이는지만 확인하는 useIntersection의 더 간단한 대안이에요.

import { Box, Text } from '@mantine/core';
import { useInViewport } from '@mantine/hooks';

function Demo() {
  const { ref, inViewport } = useInViewport();
  return (
    <>
      <Text ta="center" mt="md">
        {inViewport ? 'Box is visible' : 'Scroll to see box'}
      </Text>
      <Box
        ref={ref}
        style={{
          background: inViewport ? 'var(--mantine-color-teal-0)' : 'var(--mantine-color-orange-0)',
          height: 300,
          marginTop: 600,
        }}
      >
        <Text ta="center" pt="lg">A box</Text>
      </Box>
    </>
  );
}

정의 (Definition)

interface UseInViewportReturnValue {
  inViewport: boolean;
  ref: React.RefCallback;
}

function useInViewport(): UseInViewportReturnValue

Exported types

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

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

더 알아보기 (Learn more)