Version: v3.6.0


A hook that tracks the boundingclientrect of an element. It returns a callbackRef so that the element node if changed is easily tracked.#

Build Status


npm install --save @rooks/use-boundingclientrect-ref

Importing the hook#

import useBoundingclientrectRef from "@rooks/use-boundingclientrect-ref"


function Demo() {
const [myRef, boundingClientRect] = useBoundingclientrectRef();
const [XOffset, setXOffset] = useState(0);
const [YOffset, setYOffset] = useState(300);
const displayString = JSON.stringify(boundingClientRect, null, 2);
return (
width: 300,
background: "lightblue",
padding: "10px",
position: "absolute",
left: XOffset,
top: YOffset
resize: "both",
overflow: "auto",
background: "white",
color: "blue",
maxWidth: "100%"
Resize this div as you see fit. To demonstrate that it also updates
on child dom nodes resize
<button onClick={() => setXOffset(XOffset - 5)}> Move Left </button>
<button onClick={() => setXOffset(XOffset + 5)}> Move Right </button>
<button onClick={() => setYOffset(YOffset - 5)}> Move Up </button>
<button onClick={() => setYOffset(YOffset + 5)}> Move Down </button>
<div style={{ height: 500 }}>



Returns an array of 3 values#

Return valueTypeDescriptionDefault value
refCallback refA callback ref function to use as a ref for the component that needs to be tracked() => null
valueDOMRectDOMRect Object containing x,y, width, height, left,right,top and bottom keysnull
updateFunctionFunction that can be called at any time to force a recalculation of the clientrectnull
Last updated on by imbhargav5