# svelte-resize-observer

> Element resize observer to Svelte

Latest version **2.0.0** (published 2021-08-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install svelte-resize-observer
pnpm add svelte-resize-observer
yarn add svelte-resize-observer
bun add svelte-resize-observer
```

## 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 | 2.0.0 |
| Published | 2021-08-17 |
| First published | 2019-11-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 55.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 13 |
| Author | André Lins |
| Maintainers | andrelmlins |
| Keywords | svelte, resize, observer |

## Links

- npm: https://www.npmjs.com/package/svelte-resize-observer
- Repository: https://github.com/andrelmlins/svelte-resize-observer
- Homepage: https://svelte-resize-observer.netlify.com/
- Issues: https://github.com/andrelmlins/svelte-resize-observer/issues
- npm.io page: https://npm.io/package/svelte-resize-observer

## Dependencies (1)

- [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) ^1.5.1

## Recent versions

- 2.0.0 (latest) — 2021-08-17
- 1.1.0 — 2020-03-28
- 1.0.0 — 2020-02-16
- 0.1.2 — 2019-11-20
- 0.1.1 — 2019-11-20
- 0.1.0 — 2019-11-20

## README

# Svelte Resize Observer

[![npm version](https://badge.fury.io/js/svelte-resize-observer.svg)](https://www.npmjs.com/package/svelte-resize-observer) • [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/andrelmlins/svelte-resize-observer/blob/master/LICENSE) • [![Build Status](https://travis-ci.com/andrelmlins/svelte-resize-observer.svg?branch=master)](https://travis-ci.com/andrelmlins/svelte-resize-observer) • [![Netlify Status](https://api.netlify.com/api/v1/badges/fbeb8033-5f7e-47cb-83e0-0fc7e89ad54b/deploy-status)](https://app.netlify.com/sites/svelte-resize-observer/deploys) • [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/andrelmlins/svelte-resize-observer.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/andrelmlins/svelte-resize-observer/context:javascript)

Element resize observer to Svelte

## Installation

```
npm i svelte-resize-observer
// OR
yarn add svelte-resize-observer
```

<em>Note: to use this library in sapper, install as devDependency. See the [link](https://github.com/sveltejs/sapper-template#using-external-components).</em>

## Demo [Link](https://svelte-resize-observer.netlify.com/)

Local demo:

```
git clone https://github.com/andrelmlins/svelte-resize-observer.git
cd svelte-resize-observer
npm install && npm run dev
```

## Examples

An example of how to use the library:

```js
<script>
  import ResizeObserver from "svelte-resize-observer";
</script>

<style>
  div {
    width: 400px;
    height: 400px;
  }
</style>

<div>
  <ResizeObserver on:resize={(e) => console.log(e.detail.target)} />
</div>
```

## Properties

Component props:

| Prop          | Type | Description            |
| ------------- | ---- | ---------------------- |
| elementResize | node | Element to bind resize |
| resize        | func | Call with resize       |

## NPM Statistics

Download stats for this NPM package

[![NPM](https://nodei.co/npm/svelte-resize-observer.png)](https://nodei.co/npm/svelte-resize-observer/)

## License

Svelte Resize Observer is open source software [licensed as MIT](https://github.com/andrelmlins/svelte-resize-observer/blob/master/LICENSE).

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