useResizeObserver

使用 ResizeObserver MDN 跟蹤元素大小。

useResizeObserver 封裝了 ResizeObserver API，在目標元素的尺寸發生變化時觸發回呼。回呼接收 ResizeObserverEntry 陣列，提供有關新尺寸的詳細資訊。此 hook 管理觀察器的建立、觀察和清理。

使用場景

• 建構容器查詢式的邏輯——根據容器寬度而非視窗寬度調整佈局
• 在元素調整大小時重新計算依賴尺寸的值（例如 canvas 解析度）
• 監控多個元素的尺寸變更以實現複雜的響應式佈局

注意事項

• SSR 安全：在伺服器端渲染時為空操作。伺服器上不會建立 ResizeObserver。
• 盒模型：透過 box 選項可選擇觀察 content-box、border-box 或 device-pixel-content-box。
• 相關 hooks：另請參閱 useElementSize 和 useMeasure 用於簡化的尺寸追蹤，以及 useElementBounding 獲取完整的位置和尺寸資訊。

Usage

function Demo() {
  const ref = useRef<HTMLTextAreaElement>(null);
  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);
  const stop = useResizeObserver(ref, (entries) => {
    const [entry] = entries;
    const { width, height } = entry.contentRect;
    setWidth(width);
    setHeight(height);
  });

  return (
    <div>
      <div>調整方框大小以查看變化</div>
      <div>
        <button onClick={() => stop()}>停止觀察</button>
      </div>
      <br />
      <textarea
        ref={ref}
        disabled
        style={{ width: 286, height: 166 }}
        value={`寬度: ${width}\n高度: ${height}`}
      />
    </div>
  );
};

API

useResizeObserver

Returns

() => void

Arguments

BasicTarget

export type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;

TargetValue

type TargetValue<T> = T | undefined | null;

TargetType

type TargetType = HTMLElement | Element | Window | Document | EventTarget;