onCountdown

Pausable countdown with progress ticks; auto-stopped on unmount.

import { onCountdown } from 'mates';

const Toast = () => {
  const t = onCountdown(() => dismiss(), 6000, {
    onTick: ({ progress }) => bar.set(progress),
  });
  t.start();

  return () => html`
    <div
      @pointerenter=${() => t.pause()}
      @pointerleave=${() => t.resume()}
    >Toast</div>
  `;
};

Overview

onCountdown(callback, duration, options?) creates a Countdown handle scoped to the component. Call start() (or restart()) to begin — the timer does not auto-start.

Supports pause / resume, optional onTick progress, and is stopped automatically on unmount. On SSR, returns a noop countdown that ignores control calls.

vs other timers

API	Control	Notes
`onTimeout`	TimerHandle	Fires once; pause/resume; auto-starts.
`onInterval`	TimerHandle	Repeats; pause/resume; auto-starts.
`onCountdown`	Countdown	Must start(); progress ticks; toast-friendly.

Pausable countdown with progress

Start a 4s countdown with onTick progress. Pause, resume, or restart. Stops automatically if the component unmounts.

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

const Toast = () => {

const progress = atom(0);

const done = atom(false);

const t = onCountdown(() => done.set(true), 4000, {

onTick: ({ progress: p }) => progress.set(Math.round(p * 100)),

});

t.start();

return () => html`

<button class="btn-ghost" @click=${() => t.pause()}>Pause</button>

<button class="btn-ghost" @click=${() => t.resume()}>Resume</button>

<button class="btn-primary" @click=${() => { done.set(false); progress.set(0); t.restart(); }}>Restart</button>

</div>

${done() ? 'Done!' : 'Progress: ' + progress() + '%'}

</div>

};

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

API — onCountdown

import { onCountdown } from 'mates'

Prop / Option	Type	Default	Description
`onCountdown(cb, duration, options?)`*	`Countdown`	—	Create a component-scoped countdown. cb runs when duration elapses. Auto-stopped on unmount. SSR: noop handle.
`options.onTick`	`(snapshot) => void`	—	Called periodically while running with { remaining, elapsed, progress, state }.
`options.tickInterval`	`number`	`50`	Ms between onTick calls when onTick is set.

Countdown handle

Prop / Option	Type	Default	Description
`start() / restart()`	`void`	—	Begin from full duration / reset and begin.
`pause() / resume()`	`void`	—	Freeze / continue remaining time.
`stop() / end()`	`void`	—	Cancel permanently (also on unmount).
`state`	`'idle' \| 'running' \| 'paused' \| 'stopped'`	—	Current timer state.