# @svelte-put/resize

> Svelte action wrapper for ResizeObserver

Latest version **4.0.0** (published 2024-10-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install @svelte-put/resize
pnpm add @svelte-put/resize
yarn add @svelte-put/resize
bun add @svelte-put/resize
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; has provenance; high maintenance score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2024-10-25 |
| First published | 2023-01-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 1039 |
| Author | Quang Phan |
| Maintainers | vnphanquang |
| Keywords | svelte, action, resize, observer, ResizeObserver |

## Links

- npm: https://www.npmjs.com/package/@svelte-put/resize
- Repository: https://github.com/vnphanquang/svelte-put
- Homepage: https://github.com/vnphanquang/svelte-put/tree/next/packages/resize
- Issues: https://github.com/vnphanquang/svelte-put/issues
- npm.io page: https://npm.io/package/@svelte-put/resize

## 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

- 4.0.0 (latest) — 2024-10-25
- 4.0.0-next.3 (next) — 2024-08-10
- 4.0.0-next.2 — 2024-07-11
- 3.1.0 — 2024-07-09
- 4.0.0-next.1 — 2024-06-15
- 4.0.0-next.0 — 2024-05-31
- 3.0.1 — 2024-05-17
- 3.0.0 — 2023-07-16
- 2.0.0 — 2023-02-17
- 1.0.1 — 2023-02-06
- 1.0.0 — 2023-01-12

## README

<div align="center">

# `@svelte-put/resize`

[![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![docs.badge]][docs]

Svelte action `use:resize` wrapper for [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).

</div>

## `svelte-put`

This package is part of the [@svelte-put][github.monorepo] family. For contributing guideline and more, refer to its [readme][github.monorepo].

## Usage & Documentation

[See the dedicated documentation page here][docs].

## Quick Start

```html
<script lang="ts">
	import { resize } from '@svelte-put/resize';
	import type { ResizeDetail } from '@svelte-put/resize';

	function onResized(e: CustomEvent<ResizeDetail>) {
		console.log(e.detail);
	}
</script>

<div use:resize on:resized="{onResized}" />
```

## [Changelog][github.changelog]

<!-- github specifics -->

[github.monorepo]: https://github.com/vnphanquang/svelte-put
[github.changelog]: https://github.com/vnphanquang/svelte-put/blob/next/packages/resize/CHANGELOG.md
[github.issues]: https://github.com/vnphanquang/svelte-put/issues?q=

<!-- heading badge -->

[npm.badge]: https://img.shields.io/npm/v/@svelte-put/resize
[npm]: https://www.npmjs.com/package/@svelte-put/resize
[bundlephobia.badge]: https://img.shields.io/bundlephobia/minzip/@svelte-put/resize?label=minzipped
[bundlephobia]: https://bundlephobia.com/package/@svelte-put/resize
[docs]: https://svelte-put.vnphanquang.com/docs/resize
[docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue

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