https://github.com/reach/observe-rect

Observe the Rect of a DOM Element
https://github.com/reach/observe-rect

Last synced: 6 days 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 6 years ago)
• Default Branch: develop
• Last Pushed: 2023-01-07T04:05:12.000Z (about 2 years ago)
• Last Synced: 2024-05-18T00:02:53.576Z (9 months ago)
• Language: JavaScript
• Size: 2.76 MB
• Stars: 398
• Watchers: 5
• 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