Skip to content

@reach/rect

useRect - Rect

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

Installation

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

And then import it:

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

useRect

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.

null
Edit this to change the size!

Rect

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

Rect Props

PropType
childrenfunc
observebool
onChangefunc

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>
      <div>
        Edit this code and change it to <code>true</code>
      </div>
      <pre>{JSON.stringify(rect, null, 2)}</pre>
    </div>
  )}
</Rect>

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}/>
  )}
</Rect>