useOnlineStatus

Tracks browser online and offline status with an SSR-safe snapshot.

Code

useOnlineStatus.ts

import { useSyncExternalStore } from "react";

const subscribeToOnlineStatus = (notify: () => void): (() => void) => {
  if (typeof window === "undefined") return () => {};
  window.addEventListener("online", notify);
  window.addEventListener("offline", notify);
  return () => {
    window.removeEventListener("online", notify);
    window.removeEventListener("offline", notify);
  };
};

const getOnlineStatus = (): boolean =>
  typeof navigator === "undefined" ? true : navigator.onLine;

/** Tracks browser online/offline events with an SSR-safe snapshot. */
export const useOnlineStatus = (): boolean =>
  useSyncExternalStore(subscribeToOnlineStatus, getOnlineStatus, () => true);

Download

wget

Terminal

wget -O src/hooks/useOnlineStatus.ts https://raw.githubusercontent.com/jrTilak/lazykit/HEAD/registry/react-hooks/useOnlineStatus.ts

degit

Terminal

temp_dir="$(mktemp -d)" && bunx degit jrTilak/lazykit/registry/react-hooks "$temp_dir" && mv "$temp_dir/useOnlineStatus.ts" src/hooks/useOnlineStatus.ts && rm -r "$temp_dir"

Examples

useOnlineStatus.example.tsx

import { useOnlineStatus } from "./useOnlineStatus";

export const OnlineStatusExample = () => {
  const isOnline = useOnlineStatus();
  return <p role="status">{isOnline ? "Online" : "Offline"}</p>;
};

Props

This hook takes no arguments.

Returns

A boolean from navigator.onLine; the server snapshot is optimistically true. This is the browser’s connectivity signal, not proof that a particular server is reachable.