useElementSize

useElementSize (요소 크기 측정)

useElementSize 훅은 관찰 대상 요소의 너비와 높이를 반환해요. useResizeObserver 훅의 더 간단한 버전이에요.

출처: 문서

본문

import { useElementSize } from '@mantine/hooks';

function Demo() {
  const { ref, width, height } = useElementSize();

  return (
    <>
      <div ref={ref} style={{ border: '1px solid gray', padding: 20, resize: 'both', overflow: 'auto' }}>
        Width: {width}, height: {height}
      </div>
    </>
  );
}

API

useElementSize는 useResizeObserver 훅의 더 간단한 버전이에요. 이 훅은 관찰 대상 요소에 전달해야 하는 ref 객체와 요소의 height, width를 반환해요. 첫 번째 렌더링(SSR을 포함)이나 관찰 중인 요소가 없을 때는 width와 height가 0이에요.

import { useElementSize } from '@mantine/hooks';

const { ref, width, height } = useElementSize();

정의 (Definition)

interface UseElementSizeReturnValue {
  ref: React.RefObject;
  width: number;
  height: number;
}

function useElementSize(): UseElementSizeReturnValue;

더 알아보기 (Learn more)