Network & Visibility

onOnline, onOffline, and onVisibilityChange hooks.

import { html, atom, onOnline, onOffline, onVisibilityChange } from 'mates';

const Status = () => {
  const online = atom(navigator.onLine);

  onOnline(() => online.set(true));
  onOffline(() => online.set(false));

  onVisibilityChange((hidden) => {
    if (hidden) pausePolling();
    else resumePolling();
  });

  return () => html`<span>${online() ? 'Online' : 'Offline'}</span>`;
};

Overview

onOnline / onOffline listen for browser connectivity changes on window.

onVisibilityChange uses the Page Visibility API on document. The handler receives true when the tab is hidden and false when visible again — useful for pausing polling or media.

Network & visibility

API	Signal	Notes
`onOnline(fn)`	window online	Browser regained connectivity.
`onOffline(fn)`	window offline	Browser lost connectivity.
`onVisibilityChange(fn)`	document visibilitychange	fn(hidden: boolean) — true when tab is hidden.

onOnline / onOffline + onVisibilityChange

These hooks wire up window online/offline events and the Page Visibility API. Try switching browser tabs or toggling your network connection to see the event log update.

import { html, atom, onOnline, onOffline, onVisibilityChange, renderApp } from 'mates';

const NetworkStatus = () => {

const online = atom(navigator.onLine);

const visible = atom(!document.hidden);

const log = atom([]);

const addLog = (msg) => log.set(prev => [...prev.slice(-4), msg]);

onOnline(() => {

online.set(true);

addLog('Network: back online');

});

onOffline(() => {

online.set(false);

addLog('Network: went offline');

});

onVisibilityChange((hidden) => {

visible.set(!hidden);

addLog(hidden ? 'Tab hidden' : 'Tab visible');

});

return () => html`

${online() ? '● Online' : '● Offline'}

</span>

${visible() ? 'Visible' : 'Hidden'}

</span>

</div>

Switch tabs or disconnect network to see events fire.

API — onOnline, onOffline & onVisibilityChange

import { onOnline, onOffline, onVisibilityChange } from 'mates'

Prop / Option	Type	Default	Description
`onOnline(fn)`*	`void`	—	Fires when the browser goes online. Listener removed on unmount. May return cleanup.
`onOffline(fn)`*	`void`	—	Fires when the browser goes offline. Listener removed on unmount. May return cleanup.
`onVisibilityChange(fn)`*	`void`	—	Fires on document visibilitychange. fn receives hidden: boolean (true when the tab is hidden). Listener removed on unmount.