Skip to content


useRect - Rect

Measures DOM elements (aka. bounding client rect). See also Element.getBoundingClientRect()


npm install @reach/rect
# or
yarn add @reach/rect

And then import it:

import Rect, { useRect } from "@reach/rect";


rect = useRect(ref [, observe=true, onChange=undefined ])

Hook that observes and returns the measurements (ClientRect) of a DOM element. Pass it the ref that placed on the element to be measured.

If observe is false, the element's rect will no longer be observed, pass it true again and it will. This is mostly used for things like popovers and animations, so you can usually observe when you need to, and stop observing when you don't.

Edit this to change the size!


Render prop component for use in class components to observe element measurements.

Rect Props


Rect children

Type: func: ({ ref, rect }) => node

A function that calls back to you with a ref to place on an element and the rect measurements of the dom node.

Note: On the first render rect will be undefined because we can't measure a node that has not yet been rendered. Make sure your code accounts for this.

Rect observe

Type: bool default true

Tells Rect to observe the position of the node or not. While observing, the children render prop may call back very quickly (especially while scrolling) so it can be important for performance to avoid observing when you don't need to.

This is typically used for elements that pop over other elements (like a dropdown menu), so you don't need to observe all the time, only when the popup is active.

Pass true to observe, false to ignore.

<Rect observe={false}>
  {({ rect, ref }) => (
    <div ref={ref}>
      <div>Will not measure the element when false</div>
        Edit this code and change it to <code>true</code>
      <pre>{JSON.stringify(rect, null, 2)}</pre>

Rect onChange

Type: func: (rect) => void

Calls back whenever the rect of the element changes.

<Rect onChange={rect => console.log(rect)}/>
  {({ rect, ref }) => (
    <div ref={ref}/>