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.
Preview
Section titled “Preview”Resizable content
<nana-resize-observer>
<div>Resizable content</div>
</nana-resize-observer>Installation
Section titled “Installation”npm install @nana-tec/ui-componentsImport
Section titled “Import”import "@nana-tec/ui-components/resize-observer";Basic usage
Section titled “Basic usage”<nana-resize-observer> <div>Resizable content</div></nana-resize-observer>| Property | Type | Default | Description |
|---|---|---|---|
box | ResizeObserverBoxOptions | 'content-box' | Which box model to observe |
disabled | boolean | false | Stop observing |
Events
Section titled “Events”| Event | Type | Description |
|---|---|---|
nana-resize | CustomEvent | Fired on resize (detail.entries, detail.contentRect) |
| Slot | Description |
|---|---|
(default) | The content to observe |
Related components
Section titled “Related components”Storybook
Section titled “Storybook” Explore Resize Observer interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook