Hook
useNetworkStatus
useNetworkStatus provides a small SSR-safe wrapper around navigator.onLine and its change events while preserving an honest unknown state during server rendering.
Preview
Current network status
Browser hint
Online
This is a browser hint, not proof that a particular server is reachable.
Installation
pnpm dlx shadcn@latest add https://pwaui.com/r/use-network-status.jsonUsage
"use client"
import { useNetworkStatus } from "@/hooks/use-network-status"
export function NetworkStatus() { const { status } = useNetworkStatus()
return <p>Network: {status}</p>}Returns
status- unknown during server rendering, then online or offline in the browser.
isOnline- null while unknown, otherwise the boolean browser hint.
Behavior notes
- The browser signal does not prove that your API or the public internet is reachable.
- Use it to explain likely connectivity trouble, not to permanently disable user actions.
- A real request remains the authoritative test for whether a particular service can be reached.