---
title: "useResizeObserver 用法與示例"
description: "使用 [ResizeObserver MDN](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) 跟蹤元素大小。"
canonical: https://reactuse.com/zh-Hant/element/useresizeobserver/
---

# useResizeObserver

使用 [ResizeObserver MDN](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) 跟蹤元素大小。

`useResizeObserver` 封裝了 [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)，在目標元素的尺寸發生變化時觸發回呼。回呼接收 `ResizeObserverEntry` 陣列，提供有關新尺寸的詳細資訊。此 hook 管理觀察器的建立、觀察和清理。

### 使用場景

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

### 注意事項

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

## Usage

```tsx live

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%%