DOM & Event Hooks

Component-scoped event hooks: timers, resize, scroll, keyboard, clipboard, network, and more.

import { html, atom, onInterval, onKeyDown, onClickAway, onWindow } from 'mates';

const Panel = () => {
  const tick = atom(0);

  // Outer function only — auto-removed on unmount
  onInterval(() => tick.set(n => n + 1), 1000);
  onKeyDown((e) => { if (e.key === 'Escape') console.log('esc'); });
  onClickAway(() => console.log('outside'));
  onWindow('beforeunload', (e) => { e.preventDefault(); });

  return () => html`<p>${tick()}</p>`;
};

Overview

Mates event hooks follow one contract: call them in the outer function, and listeners / timers are removed automatically on unmount. You never call removeEventListener yourself.

Most handlers may return a cleanup function — it runs before the next invocation and on unmount. Nearly all DOM/window hooks are SSR no-ops (return early when isServer()).

Lifecycle mount/paint/error hooks live under Lifecycle. This section covers browser APIs scoped to the component host.

Hook groups

Group	APIs	Scope
Ready / update	onDOMReady, onUpdate	After render (microtask) / sync after flush
Timers	onInterval, onTimeout, onCountdown	Component-scoped; return TimerHandle / Countdown
Size / scroll	onResize, onScroll, onWindow*	Host ResizeObserver or window listeners
Input	keyboard, focus, click-away	Window / document, auto-cleaned
I/O	files, clipboard, socket, storage	Drop, paste, ws, cross-tab storage
Generic window	onWindow, onWindowCapture	Any WindowEventMap (+ wheelUp/Down)

Timers — onInterval

Component-scoped interval that clears itself on unmount.

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

const Clock = () => {

const time = atom(new Date().toLocaleTimeString());

onInterval(() => {

time.set(new Date().toLocaleTimeString());

}, 1000);

return () => html`

<p class="label">onInterval — auto-clears on unmount</p>

</div>

};

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

Keyboard — onKeyDown

Window keydown while the component is mounted. Click the preview first.

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

const Keys = () => {

const last = atom('—');

onKeyDown((e) => {

last.set(e.key === ' ' ? 'Space' : e.key);

});

return () => html`

<p class="muted">Click preview, press a key</p>

</div>

};

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

API — Hooks family (map)

import { onInterval, onWindow, onCountdown, onUpdate, onKeyDown } from 'mates'

Prop / Option	Type	Default	Description
`onDOMReady(fn)`	`CleanupFn`	—	After each render (microtask). See /docs/hooks/dom-ready.
`onInterval / onTimeout`	`TimerHandle`	—	See /docs/hooks/timers.
`onCountdown`	`Countdown`	—	See /docs/hooks/countdown.
`onResize / onScroll / …`	`void`	—	See /docs/hooks/resize-scroll.
`onWindow / onWindowCapture`	`void`	—	See /docs/hooks/window.
`onUpdate(fn)`	`void`	—	See /docs/hooks/on-update.
`onSocket(fn, sockets)`	`void`	—	See /docs/hooks/socket-hook.