Resize & Scroll

onResize and onScroll hooks scoped to the component lifecycle.

import { html, atom, onResize, onScroll, onWindowResize } from 'mates';

const Card = () => {
  const size = atom({ w: 0, h: 0 });

  onResize((entry) => {
    const { width, height } = entry.contentRect;
    size.set({ w: Math.round(width), h: Math.round(height) });
  });

  onWindowResize(() => {
    console.log(innerWidth, innerHeight);
  });

  return () => html`<div>${size().w} × ${size().h}</div>`;
};

Overview

onResize attaches a ResizeObserver to the host element (or an optional target) and disconnects on unmount.

onScroll listens on a target (default window). onWindowScroll uses capture so nested scroll containers are visible. onWindowResize is the window resize event.

Resize & scroll APIs

API	Target	Notes
`onResize(fn, target?)`	Host / element	ResizeObserver; default target is the component host.
`onWindowResize(fn)`	window	Viewport resize — not element size.
`onScroll(fn, target?)`	window / element	Passive scroll listener; optional target.
`onWindowScroll(fn)`	window (capture)	Capture required because scroll does not bubble.

onResize — element size tracker

onResize attaches a ResizeObserver to the component's root element. The observer is automatically disconnected when the component unmounts. Try resizing the preview pane to see the values update.

import { html, atom, onResize, renderApp } from 'mates';

const ResizeTracker = () => {

const size = atom({ w: 0, h: 0 });

// Tracks the host element size via ResizeObserver; auto-disconnects on unmount

onResize((entry) => {

const { width, height } = entry.contentRect;

size.set({ w: Math.round(width), h: Math.round(height) });

});

return () => html`

<h2 class="m-0">Resize the preview pane</h2>

<span class="overline">Width</span>

</div>

<span class="overline">Height</span>

</div>

};

renderApp(ResizeTracker, document.getElementById('app'));

API — onResize, onScroll & window variants

import { onResize, onScroll, onWindowScroll, onWindowResize } from 'mates'

Prop / Option	Type	Default	Description
`onResize(fn, target?)`*	`void`	—	Observes size changes via ResizeObserver. Default target is the host element (attached after DOM ready). fn receives ResizeObserverEntry. Auto-disconnects on unmount.
`onScroll(fn, target?)`	`void`	—	Passive scroll listener on target (default window). Auto-removed on unmount. Handler may return cleanup.
`onWindowScroll(fn)`	`void`	—	Capture-phase window scroll listener (passive). Use to intercept scroll from nested containers.
`onWindowResize(fn)`	`void`	—	Window resize listener tied to component lifetime. Auto-removed on unmount.