useElementBounding

Tags:

useElementBounding 是一个 React 钩子(Hook),它返回一个元素的 边界客户端矩形(bounding client rect)

演示

尝试滚动页面或调整 textarea 的大小,以查看状态的变化。

源码

用法

请查看 API。

源码

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

API

const { update, ...bounding } = useElementBounding(elementTarget, options)

元素目标 ElementTarget

ElementTarget 是一个联合类型,代表可以被定位的各种元素。

更多详情,请参见 ElementTargetElementTarget 类型

选项 Options

export type UseElementBoundingOptions = {
  /**
   * 当找不到元素时重置边界框
   *
   * @defaultValue true
   */
  reset?: boolean
  /**
   * 当窗口大小调整时更新边界框
   *
   * @defaultValue true
   */
  windowResize?: boolean
  /**
   * 当窗口滚动时更新边界框
   *
   * @defaultValue true
   */
  windowScroll?: boolean
}

返回值

export type UseElementBoundingReturns = [
  {
    /**
     * 元素的高度
     */
    height: number
    /**
     * 元素的底部位置
     */
    bottom: number
    /**
     * 元素的左侧位置
     */
    left: number
    /**
     * 元素的右侧位置
     */
    right: number
    /**
     * 元素的顶部位置
     */
    top: number
    /**
     * 元素的宽度
     */
    width: number
    /**
     * 元素的 x 位置
     */
    x: number
    /**
     * 元素的 y 位置
     */
    y: number
  },
  /**
   * 更新元素的边界框
   */
  update: () => void,
]