简体中文

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
}

ON THIS PAGE

#useWindowSize

#演示

#用法

#源码

#API

#选项 Options

#返回值

useWindowSize

演示

用法

源码

API

选项 Options

返回值