# Resize Observer

> Source: https://design.nanatec.co.ke/components/resize-observer/
> Watches its slotted content for size changes via `ResizeObserver` and emits `nana-resize` with the observer entries. Useful for building container-aware layouts and reacting to element resizes without wiring observers by hand.

Watches its slotted content for size changes via `ResizeObserver` and emits `nana-resize` with the observer entries. Useful for building container-aware layouts and reacting to element resizes without wiring observers by hand.

## Preview

```html
<nana-resize-observer>
  <div>Resizable content</div>
</nana-resize-observer>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/resize-observer";
```

## Basic usage

```html
<nana-resize-observer>
  <div>Resizable content</div>
</nana-resize-observer>
```

## API

## Events

| Event | Type | Description |
|---|---|---|
| `nana-resize` | `CustomEvent` | Fired on resize (`detail.entries`, `detail.contentRect`) |

## Slots

| Slot | Description |
|---|---|
| `(default)` | The content to observe |

## Related components

<ul class="related not-content">
  <li><a href="/components/mutation-observer/">Mutation Observer</a></li>
  <li><a href="/components/include/">Include</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-resize-observer--docs