offline-detector web demo

Simulate

Kind of offlineConnected, but no internetNo network connection

Only visible in the message when Distinguish the reason is on.

Live state

Status: unknown
Reason: none
Checking: no
isOnline: true

Re-check on return

Re-probing when the user comes back to the tab is opt-in per screen, with useRecheckOnReturn. With brief the pieces show a short “Checking…” while that background probe runs; with none it stays invisible.

Mount the screen that uses the hook

checkingFeedback

Stub probe latency (ms)

How long the stub takes to answer, so Checking is visible.

Options

Text

locale

distinguishReason

Say what is wrong instead of plain No internet.

strings.retry (override)

Any string can be overridden; this one changes the Retry button.

Look and motion

colorScheme

motion

recoveryMs

How long Back online stays.

Custom snackbar (slots.snackbar)

Replaces the bundled snackbar with the component in this demo.

Pieces

fullScreenOffOnOn, with Continue offline

dismissible (global)

Swipe, Dismiss button and Escape on the indicator.

snackbar.dismissible

banner.dismissible

indicator.dismissible

banner.overlay

Float the banner over the content.

indicator.position

indicator.variant

Probe (restarts the detector when changed)

probe.urls (one per line)

Tried in order; the first success wins. Not contacted while the stub is on.

probe.intervalMs

probe.timeoutMs

probe.method

probe.mode

With interface-only, only the Simulate kind No network connection works.

initialStatus (SSR hint)

Use the real network probe

Off by default. When on, the library contacts the probe URLs above, and Simulate only affects the network interface.

Callbacks

onOffline, onOnline, onChange, onDismiss, onContinueOffline and onError write here, newest first.

Nothing yet.