https://github.com/reach/observe-rect
Observe the Rect of a DOM Element
https://github.com/reach/observe-rect
Last synced: 6 months ago
JSON representation
Observe the Rect of a DOM Element
- Host: GitHub
- URL: https://github.com/reach/observe-rect
- Owner: reach
- Created: 2018-06-02T07:04:29.000Z (over 7 years ago)
- Default Branch: develop
- Last Pushed: 2023-01-07T04:05:12.000Z (almost 3 years ago)
- Last Synced: 2025-05-15T11:06:28.168Z (6 months ago)
- Language: JavaScript
- Size: 2.76 MB
- Stars: 401
- Watchers: 4
- Forks: 15
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-list - observe-rect
README
Observe the rect of a DOM element.
## Installation
```
npm install @reach/observe-rect
# or
yarn add @reach/observe-rect
```
## Usage
```js
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.
## Legal
MIT License
Copyright (c) 2018-present, Ryan Florence