# svelte-actions-resize

> ResizeObserver action for Svelte 3

Latest version **0.1.1** (published 2020-03-10) · Apache-2.0 license · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2020-03-10 |
| First published | 2020-03-10 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 50.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Genji |
| Maintainers | gennnji |
| Keywords | svelte, actions, resize, observer |

## Links

- npm: https://www.npmjs.com/package/svelte-actions-resize
- Repository: https://github.com/Gennnji/svelte-actions-resize
- npm.io page: https://npm.io/package/svelte-actions-resize

## Dependencies (1)

- [@juggle/resize-observer](https://npm.io/package/@juggle/resize-observer.md) ^3.1.1

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2020-03-10
- 0.1.0 — 2020-03-10

## README

# svelte-actions-resize

ResizeObserver action plugin for [Svelte 3](https://svelte.dev).
Based on ponyfill @juggle/resize-observer.

## Installation

Install with npm or yarn:
```bash
npm install svelte-actions-resize
```
OR
```bash
yarn add svelte-actions-resize
```

## Usage

[DEMO](https://svelte.dev/repl/1a489d85e1fd4609ad86fc51d3b81d69?version=3)

```html
<style>
  section {
    border: 10px solid lightgray;
  }

  section > div {
    border: 2px solid red;
    width: 8px;
    height: 8px;
    background-color: green;
  }
</style>

<script>
  import resize from 'svelte-actions-resize';

  let elements = [{}];

  function handleResize() {
    alert('Resize done!');
  }
</script>

<button on:click={() => elements = [...elements, {}]}>Resize</button>
<section use:resize on:resize={handleResize}>
  {#each elements as element}
    <div></div>
  {/each}
</section>

```

## Options

| Name | Type | Description |
| --- | --- | --- |
| `on:resize` | `Function` | Callback to handle resize |

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