@reach/observe-rect

1.2.0 • Public • Published 4 years ago

Observe the rect of a DOM element.

Installation

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

Usage

import observeRect from "@reach/observe-rect";

let node = document.getElementById("some-node");

let rectObserver = observeRect(node, rect => {
  console.log("left", rect.left);
  console.log("top", rect.top);
  console.log("height", rect.height);
  console.log("width", rect.width);
});

// start observing
rectObserver.observe();

// stop observing
rectObserver.unobserve();

About

A lot of things can change the position or size of an element, like scrolling, content reflows and user input. This utility observes and notifies you when your element's rect changes.