useElementBounding
A React Hook that returns the bounding client rect of an element.
Demo
Try to scroll the page or resize the textarea to see the state changes.
Usage
See API for more details.
Source
Click links below to view source on GitHub.
API
const { update, ...bounding } = useElementBounding(elementTarget, options)
ElementTarget
ElementTarget is a union type that represents various kinds of elements that can be targeted.
See ElementTarget or ElementTarget Types for more details.
Options
export type UseElementBoundingOptions = {
/**
* Reset the bounding box when the element is not found
*
* @defaultValue true
*/
reset?: boolean
/**
* Update the bounding box when the window is resized
*
* @defaultValue true
*/
windowResize?: boolean
/**
* Update the bounding box when the window is scrolled
*
* @defaultValue true
*/
windowScroll?: boolean
}
Returns
export type UseElementBoundingReturns = [
{
/**
* The height of the element
*/
height: number
/**
* The bottom position of the element
*/
bottom: number
/**
* The left position of the element
*/
left: number
/**
* The right position of the element
*/
right: number
/**
* The top position of the element
*/
top: number
/**
* The width of the element
*/
width: number
/**
* The x position of the element
*/
x: number
/**
* The y position of the element
*/
y: number
},
/**
* Update the bounding box of the element
*/
update: () => void,
]
