# watch-element-resize

> A (yet another) cross-browser, event-based, element resize watcher.

Latest version **2.0.6** (published 2017-10-31) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.6 |
| Published | 2017-10-31 |
| First published | 2017-03-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Jonatas Walker |
| Maintainers | malikba |
| Keywords | resize, watch, watcher, element, events |

## Links

- npm: https://www.npmjs.com/package/watch-element-resize
- Repository: https://github.com/M6Web/watch-element-resize.js
- Issues: https://github.com/jonataswalker/watch-element-resize.js/issues
- npm.io page: https://npm.io/package/watch-element-resize

## Alternatives

- [async-exit-hook](https://npm.io/package/async-exit-hook.md) — 3.7M weekly downloads
- [evnty](https://npm.io/package/evnty.md) — 7.2K weekly downloads
- [eleventy-plugin-asciidoc](https://npm.io/package/eleventy-plugin-asciidoc.md) — 3.5K weekly downloads
- [@jswork/next-get2get](https://npm.io/package/@jswork/next-get2get.md) — 945 weekly downloads
- [@dashersw/axon](https://npm.io/package/@dashersw/axon.md) — 934 weekly downloads

## Recent versions

- 2.0.6 (latest) — 2017-10-31
- 2.0.5 — 2017-03-08
- 2.0.4 — 2017-03-08
- 2.0.3 — 2017-03-07
- 2.0.1 — 2017-03-07

## README

# watch-element-resize.js

[![Build Status](https://travis-ci.org/jonataswalker/watch-element-resize.js.svg?branch=master)](https://travis-ci.org/jonataswalker/watch-element-resize.js)

A (yet another) cross-browser, event-based, element resize watcher. This is kind of a (improved) fork of [sdecima/javascript-detect-element-resize](https://github.com/sdecima/javascript-detect-element-resize).

### Demo
See [here a demo](http://rawgit.com/jonataswalker/watch-element-resize.js/master/examples/example.html).

## How to use it?

##### CDN Hosted - [jsDelivr](http://www.jsdelivr.com/projects/watch-element-resize.js)
Load Javascript:
```HTML
<script src="//cdn.jsdelivr.net/watch-element-resize.js/latest/watch-element-resize.min.js"></script>
```

##### Self hosted
Download [latest release](https://github.com/jonataswalker/watch-element-resize.js/releases/latest).

##### Instantiate with some options and listen to changes
```javascript
var watchResize = new WatchElementResize(['field1', 'field2']);
watchResize.on('resize', function(evt){
  console.info(evt);
  
  // the DOM element
  var resized_element = evt.element.target;
  
  // the element offset (width, height, top, left) 
  var offset = evt.element.offset;
  
  // the window dimensions -- just in case you need
  var window_size = evt.window;
});
```

# API

## Constructor

#### `new WatchElementResize(target)`

###### `target` can be:
`{String|Array<String>|Element|Array<Element>}` String or array of string, DOM node or array of nodes.

## Methods

#### watchResize.reAddListener()
#### watchResize.removeListener()

## Events

```javascript
watchResize.on('resize', function(evt){

});
```

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