Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProTrue while the browser reports a network connection, updating when it goes offline or comes back, safe for server rendering.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it to show an offline banner, disable actions that need a server, queue writes while offline or retry when the connection returns.
Do not treat true as proof the server is reachable; the browser only knows about the network interface. Confirm with a real request for critical paths.
import { useOnlineStatus } from "@/hooks/use-online-status"const online = useOnlineStatus()
{
!online && <p role="status">You are offline. Changes will sync later.</p>
}useOnlineStatus(): boolean
Returns navigator.onLine, and true on the server and during hydration. It listens to the online and offline window events and uses useSyncExternalStore.
A hook has no markup. Announce the change with role="status" (polite) text, not only a colour or an icon, and explain what still works offline.
The hook ships with renderHook tests (use-online-status.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.