上手指南
Hooks 列表
后期规划
上手指南
Hooks 列表
后期规划
简体中文

useWindowSize

Tags:
Browser

一个 React Hook，用于追踪窗口的高度和内部宽度，并且可选地监听方向媒体查询。

演示

尝试调整窗口大小以查看效果。

源码
Width:
Infinity
Height:
Infinity

用法

请查看 API。

源码

点击下方链接跳转 GitHub 查看源代码。

🪝 Hook🎨 Demo📄 Document

API

const size = useWindowSize(options)

选项 Options

export interface UseWindowSizeOptions {
  /**
   * 窗口的初始宽度。
   *
   * @defaultValue Number.POSITIVE_INFINITY
   */
  initialWidth?: number
  /**
   * 窗口的初始高度。
   *
   * @defaultValue Number.POSITIVE_INFINITY
   */
  initialHeight?: number
  /**
   * 是否监听方向变化。
   *
   * @defaultValue true
   */
  listenOrientation?: boolean
  /**
   * 是否包括滚动条宽度。
   *
   * @defaultValue true
   */
  includeScrollbar?: boolean
}

返回值

export interface WindowSize {
  width: number
  height: number
}

export interface UseWindowSizeReturns extends Size {
  /**
   * 更新窗口大小。
   */
  update(): void
}