# watch-resize

> Watch any DOM element for size changes without polyfills.

Latest version **3.0.2** (published 2021-03-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install watch-resize
pnpm add watch-resize
yarn add watch-resize
bun add watch-resize
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.2 |
| Published | 2021-03-01 |
| First published | 2018-12-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 28 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Ian K Smith |
| Maintainers | smithki |

## Links

- npm: https://www.npmjs.com/package/watch-resize
- Repository: https://github.com/smithki/watch-resize
- Homepage: https://github.com/smithki/watch-resize#readme
- Issues: https://github.com/smithki/watch-resize/issues
- npm.io page: https://npm.io/package/watch-resize

## Recent versions

- 3.0.2 (latest) — 2021-03-01
- 3.0.1 — 2021-02-09
- 3.0.0 — 2021-01-06
- 2.0.2 — 2019-10-14
- 2.0.1 — 2019-08-23
- 2.0.0 — 2019-08-22
- 1.3.5 — 2019-08-21
- 1.3.4 — 2019-05-24
- 1.3.3 — 2019-03-18
- 1.3.2 — 2019-03-18
- 1.3.1 — 2019-03-16
- 1.3.0 — 2019-03-15
- 1.2.0 — 2018-12-20
- 1.1.0 — 2018-12-20
- 1.0.2 — 2018-12-20
- … 3 more at https://npm.io/package/watch-resize/versions

## README

# 👀 `watchResize`

[![code style: airbnb](https://img.shields.io/badge/code%20style-airbnb-blue.svg?style=flat)](https://github.com/airbnb/javascript)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat)](https://github.com/prettier/prettier)

> Watch any DOM element for size changes without polyfills.

## 💁🏼‍♂️ Introduction

A zero-dependency, cross-compatible [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) alternative that doesn't require polyfills. You can watch any element for size changes based on its bounding box.

## 🔗 Installation

Install via `yarn` or `npm`:

```sh
yarn add watch-resize
```

```sh
npm install watch-resize
```

## 🛠️ Usage

```ts
import { watchResize } from 'watch-resize';

const target = document.getElementById('my-element');

watchResize(target, ({ element, event, prevBoundingClientRect, destroy }) => {
  // Do stuff here for each "resize"
})).then(() => {
  // Once the promise resolves, the resize watcher has successfully mounted!
});
```

An object implementing `ResizePayload` is passed to subscribe handler:

```ts
export interface ResizePayload<T extends HTMLElement> {
  element: T;
  event: UIEvent;
  prevBoundingClientRect: ClientRect | DOMRect; // The previous result of "element.getBoundingClientRect()".
  destroy: () => void; // Unobserves the element and cleans up event listeners
}
```

---
_Source: https://npm.io/package/watch-resize · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._