ilokesto

useResizeObserver

useResizeObserver는 ResizeObserver를 통해 element의 크기를 추적합니다. ref callback과 현재 width, height를 반환합니다.

import { useResizeObserver } from '@ilokesto/utilinent/hooks';

function SizeBox() {
  const { ref, width, height } = useResizeObserver();
  return <div ref={ref}>{width}×{height}</div>;
}

Options

Option설명
boxObserver box model입니다. 기본값은 content-box입니다.
initialSize첫 observation 이전의 initial size입니다.

반환값

ref는 callback ref입니다. width와 height는 number(기본값 0)입니다. entry는 사용 가능한 최신 ResizeObserverEntry입니다. SSR-safe: ResizeObserver가 없으면 0을 반환합니다.

목차