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, ]