useWindowSize

跟蹤視窗大小的 React Hook。

useWindowSize 響應式追蹤瀏覽器視窗的 width 和 height。值在視窗調整大小時自動更新。它使用 resize 事件監聽器並回傳一個包含當前尺寸的物件。

使用場景

• 根據視窗尺寸有條件地渲染不同的佈局或元件
• 計算依賴視窗尺寸的動態樣式值
• 配合斷點邏輯建構響應式行為

注意事項

• SSR 安全：在伺服器端渲染時回傳初始值（可自訂）。伺服器上不會附加 resize 事件監聽器。
• 節流：對於頻繁調整大小的場景，請考慮搭配 useThrottleFn 使用以限制更新頻率。
• 相關 hooks：另請參閱 useElementSize 追蹤特定元素的尺寸，以及 useMediaQuery 用於斷點偵測。

Usage

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

  return (
    <div>
      <p>
        寬度: {width}, 高度: {height}
      </p>
    </div>
  );
};

API

useWindowSize

Returns

{ readonly width: number; readonly height: number; }: 包含以下元素的對象：

• width：當前視窗寬度。
• height： 當前視窗高度。

Arguments