pota/use/resize

pota/use/resize exposes document-level and element-level resize behind one use* / on* Emitter pattern. Document size tracks the window resize event; element size is backed by a ResizeObserver. Each pair gives you a reactive accessor (use*) and a plain callback registration (on*), and the module also ships two use:ref helpers — the resize(handler) factory for per-element callbacks and ensureInBounds, a ref used directly to clamp a floating element to the viewport.

The module's own resize export is documented inline below.

Exports

• resize(handler) — concise use:ref element-resize factory (documented below)
• documentSize() — { width, height } viewport snapshot
• onDocumentSize(fn) — callback on viewport resize
• useDocumentSize() — reactive viewport size accessor
• useElementSize(node) — reactive element size accessor
• onElementSize(node, fn) — callback on element resize
• ensureInBounds — ref: clamp an element to the viewport

Arguments

resize(handler) returns a use:ref factory.

Argument	Type	Description
handler	(entry: ResizeObserverEntry) => void	Called with the latest entry whenever the element resizes.

Returns: a ref function (node: Element) => void for use:ref.

Multiple subscribers on the same node share a single ResizeObserver.

Examples

Element resize via use:ref

The most concise form: attach with use:ref and the handler receives each ResizeObserverEntry. Drag the box corner to see the reported size update.

import { render, signal } from 'pota'
import { resize } from 'pota/use/resize'

function App() {
	const size = signal({ width: 0, height: 0 })

	return (
		<div
			use:ref={resize(entry => {
				size.write({
					width: Math.round(entry.contentRect.width),
					height: Math.round(entry.contentRect.height),
				})
			})}
			style={{
				resize: 'both',
				overflow: 'auto',
				width: '300px',
				height: '200px',
				padding: '1rem',
				border: '1px solid #aaa',
			}}
		>
			drag the bottom-right corner to resize. current:{' '}
			<mark>
				{() => size.read().width}×{() => size.read().height}
			</mark>
		</div>
	)
}

render(App)