# svelte-resize-observer-action

> Svelte use:action for element resize notifications using ResizeObserver.

Latest version **0.0.4** (published 2024-04-29) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2024-04-29 |
| First published | 2023-01-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 7.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 13 |
| Author | Simon Green |
| Maintainers | captaincodeman |
| Keywords | svelte, use, action, resize, resizeobserver |

## Links

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

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 0.0.4 (latest) — 2024-04-29
- 0.0.3 — 2023-06-22
- 0.0.2 — 2023-01-04
- 0.0.1 — 2023-01-04

## README

# svelte-resize-observer-action

Svelte use:action for element resize notifications using ResizeObserver.

Small. Efficient. SSR Friendly.

## Purpose

You need to know when an Element changes size, as efficiently as possible, adding as few bytes to your project as possible.

The existing packages I looked at all had one or more issues:

- Not SSR compatible. Likely developed before SvelteKit, when Svelte was primarily used for client-side components.
- Used a Svelte Component as a wrapper. This adds unnecessary overhead and bytes to your bundle.
- Included polyfills. Again, this adds extra unnecessary bytes and [ResizeObserver is now supported by all browsers](https://caniuse.com/resizeobserver) that matter.
- Dispatch events. IMO this is also unnecessary and wasted bytes. A callback passed in to an action is simpler and more efficient.
- Create a ResizeObserver instance per element. Slightly less efficient and a potential waste of runtime resources, especially if many elements need to be observed, vs using a single observer as intended.
- Only provide simple (rounded) CSS pixel dimensions, not the [complete set of ResizeObserverEntry properties](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry).
- Lack of TypeScript support.

This package is simple, fast and efficient. It is only 231 bytes minified, 195 bytes minified and gzipped. This is the built output, all it adds to your app:

```js
var r=new WeakMap,s;function b(e,t){return s=s||new ResizeObserver(i=>{for(let l of i){let n=r.get(l.target);n&&n(l)}}),r.set(e,t),s.observe(e),{destroy(){s.unobserve(e),r.delete(e)}}}export{b as resize};
```

## Usage

Import using your package manager of choice, e.g.:

    pnpm i svelte-resize-observer-action

### Within a Svelte Component

Import and apply to your HTML element. Provide the function that will be called with the `ResizeObserverEntry` object.

```svelte
<script lang="ts">
  import { resize } from 'svelte-resize-observer-action'

  let width: number
  let height: number

  function onResize(entry: ResizeObserverEntry) {
    width = entry.contentRect.width
    height = entry.contentRect.height
  }
</script>

<div use:resize={onResize}>
  {width}w x {height}h
</div>
```

### Within another Svelte `use:action`

Import inside your `use:action` module:

```ts
import { resize } from 'svelte-resize-observer-action'
```

Apply to the element passed in to your `use:action` and call the `destroy` method when your action is destroyed:

```ts
type Render = (ctx: CanvasRenderingContext2D) => void

export function panzoom(canvas: HTMLCanvasElement, render: Render) {
  const ctx = canvas.getContext('2d')!

  // use resize action to watch element size
  const resizeManager = resize(canvas, entry => {
    // handle canvas size change and re-render
    render(ctx)
  })

  // rest of use:action implementation

  return {
    destroy() {
      // remember to call destroy when this action is destroyed
      resizeManager.destroy()
    },
  }
}
```

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