Web quick start

Render <OfflineDetector> once, near the root. It needs no provider and no adapter.

import { OfflineDetector } from '@rogeriodocarmo/offline-detector-web';

export function Root() {
  return (
    <OfflineDetector>
      <App />
    </OfflineDetector>
  );
}

That is the whole setup. The app launches online and shows nothing. When the connection drops, a snackbar ("No internet", with Retry), a banner and an indicator appear. When it returns, a "Back online" snackbar shows for four seconds.

Try it in the live demo, or open your browser's DevTools, Network tab, and choose Offline.

Read the status anywhere

The hooks work anywhere inside <OfflineDetector>, and the web package exports them:

import { useNetworkStatus } from '@rogeriodocarmo/offline-detector-web';

function SaveButton() {
  const { isOnline, reason, checkNow } = useNetworkStatus();
  return (
    <button disabled={!isOnline} onClick={() => void checkNow()}>
      {isOnline ? 'Save' : `Offline (${reason})`}
    </button>
  );
}

The web package re-exports the hooks of the React layer, so it is the only package to install and import from. See the react reference for every hook.

Common options

<OfflineDetector
  locale="pt-BR"
  distinguishReason
  fullScreen={{ continueOffline: true }}
  probe={{ urls: ['https://example.com/health'], intervalMs: 60000 }}
  onOffline={(state) => console.log('offline', state.reason)}
>
  <App />
</OfflineDetector>

Option	What it does
locale	en, pt-BR or es. Variants such as pt and es-MX resolve.
distinguishReason	Say why: "No network connection" or "Connected, but no internet".
fullScreen	An opt-in full-screen state with Try again and, optionally, an escape.
probe	Probe URLs, timeout, interval, method and mode. See Privacy.
onContinueOffline	Called when the user presses "Continue offline" (or Escape) on the full-screen state.
nonce	CSP nonce for the inline <style> element. See Server rendering.
dismissible	Turn swipe and Dismiss off for every piece. See Dismissal.

The full list is in the web reference. On Next.js, read the notes on server rendering: the component must live in a client component.