https://github.com/samthor/viz-observer
Notifies your code on DOM node move or resize
https://github.com/samthor/viz-observer
dom javascript
Last synced: 3 months ago
JSON representation
Notifies your code on DOM node move or resize
- Host: GitHub
- URL: https://github.com/samthor/viz-observer
- Owner: samthor
- License: apache-2.0
- Created: 2021-01-22T05:49:33.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-04-29T20:51:14.000Z (about 2 years ago)
- Last Synced: 2025-09-22T15:23:26.683Z (9 months ago)
- Topics: dom, javascript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/viz-observer
- Size: 23.4 KB
- Stars: 34
- Watchers: 5
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
This is an ES Module which exports the default method `vizObserver`.
It notifies you when an element is resized or moved on a page, including when it appears or disappears (similar to but _not quite_ being added/removed from the DOM).
See [this post](https://whistlr.info/2021/observing-dom/) for an explanation, or watch the animation:
## Usage
Install as "viz-observer".
```js
import vizObserver from 'viz-observer';
const cleanup = vizObserver(yourElement, (rect) => {
console.info('element is now at', rect);
});
// later
cleanup();
```
This returns a cleanup method which you _must_ call when done, otherwise you risk memory leaks.
You can instead pass an `AbortSignal` as `{signal}` in the third argument:
```js
const ac = new AbortController();
vizObserver(yourElement, yourCallback, {signal: ac.signal});
// later
ac.abort();
```
## Requirements
This requires `IntersectionObserver`, which [is pretty widely supported](https://caniuse.com/intersectionobserver).
It also requires `ResizeObserver` but this was released before `IntersectionObserver` in all browsers bar one.
For Safari 12.x, which was the only browser to introduce `IntersectionObserver` _before_ `ResizeObserver`, it supports working in a slightly restricted mode: it won't report elements shrinking.
It'll only report elements when they grow, move or are removed/added from the page.
## Notes
This works totally fine inside Shadow DOM.
It's how the author uses it: I report the location of interesting elements and "attach" unrelated elements to them, such as for a popup or tooltip.