useOnline

About

Track the browser's navigator.onLine hint and update after online and offline events.

Examples

import { useOnline } from "rooks";

function App() {
  const online = useOnline();
  return (
    <p role="status">
      {online === null ? "Checking connection…" : online ? "Online" : "Offline"}
    </p>
  );
}

export default App;

import { useOnline } from "rooks";

function ConnectionBanner() {
  const isOnline = useOnline();

  return (
    <div
      style={{
        padding: "12px 16px",
        borderRadius: 8,
        background: isOnline ? "#dcfce7" : "#fee2e2",
        color: isOnline ? "#166534" : "#991b1b",
      }}
    >
      {isOnline
        ? "Connected. Changes will sync normally."
        : "Offline mode. Changes will sync when you reconnect."}
    </div>
  );
}

Return value

Returns boolean | null: null for the server snapshot, then the current value of navigator.onLine in the browser.

Behavior and lifecycle

All instances share a useSyncExternalStore subscription. The first subscriber adds online and offline listeners; the last unsubscribe removes them. The browser value is read again for each event rather than inferred from the event name.

Parameters

This hook takes no parameters.

Compatibility and accessibility

navigator.onLine reports whether the browser believes it has a network connection, not whether the internet or your service is reachable. Confirm important operations with the actual request and handle failures. Render a neutral null fallback during hydration and announce meaningful connection changes without relying only on color. See SSR and browser APIs.

Related

• Browse all hooks