# watch-size

> Watch the size changes of a DOM element

Latest version **2.0.0** (published 2018-07-24) · CC0-1.0 license · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2018-07-24 |
| First published | 2018-07-23 |
| Weekly downloads | 0 |
| License | CC0-1.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Jonathan Neal |
| Maintainers | jonathantneal |
| Keywords | dark, mode, modes, light, interface, css, media, query, queries |

## Links

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

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2018-07-24
- 1.0.0 — 2018-07-23

## README

# Watch Size [<img src="https://jonathantneal.github.io/dom-logo.svg" alt="PostCSS" width="90" height="90" align="right">][Watch Size]

[![NPM Version][npm-img]][npm-url]
[![Build Status][cli-img]][cli-url]
[![Support Chat][git-img]][git-url]

[Watch Size] lets you watch the size changes of a DOM element using the
`watchSize` function.

## Usage

Add [Watch Size] to your project:

```bash
npm install watch-size
```

Use `watchSize()` to rewrite your queries:

```js
import watchSize from 'watch-size';

const stop = watchSize(
  document.querySelector('.box:nth-child(2)')
  ({ width, height }) => { /* callback */ }
);

/* use stop() to end listening */
```

## How does it work?

The `watchSize` function attaches hidden, over-sized DOM elements to your
target with `scroll` listeners that are triggered whenever the element resizes.
This allows the listener to avoid polling, and to truly respond to size changes.
This technique can be used in all browsers going back to Internet Explorer 9.

The entire script is about 400 bytes when minified and gzipped.

[cli-img]: https://img.shields.io/travis/jonathantneal/watch-size.svg
[cli-url]: https://travis-ci.org/jonathantneal/watch-size
[git-img]: https://img.shields.io/badge/support-chat-blue.svg
[git-url]: https://gitter.im/postcss/postcss
[npm-img]: https://img.shields.io/npm/v/watch-size.svg
[npm-url]: https://www.npmjs.com/package/watch-size

[Watch Size]: https://github.com/jonathantneal/watch-size

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