useElementSize
React hook to track the size of an element. Pass an element ref
that you’d like to observe. Its initial and changing width
and height
are returned.
Example
const ParentComponent = () => {
const parentRef = useRef(null)
const [width, height] = useElementSize(parentRef, [300, 100])
return (
<div ref={parentRef}>
<MyComponent parentWidth={width} parentHeight={height} />
</div>
)
}
Arguments
-
ref
: The element ref to watch for size changes. -
defaultSize
(optional): Provide a default size to return if a measurement isn’t yet available. Helpful for server-side rendering.