Use Online Status
A React hook for monitoring network connectivity and connection quality
Installation
npx shadcn@latest add "https://reusables.vercel.app/r/use-online-status"Usage
The hook provides real-time network status monitoring with connection quality metrics.
import useOnlineStatus from "@/hooks/use-online-status"const {
isOnline,
lastChanged,
connectionQuality,
latency,
isRetrying,
checkConnectionNow,
retryConnection,
} = useOnlineStatus()Example
Network Status
OnlineQuality
unknown
Last Updated3:34:20 PM
Reference
Options
| Prop | Type | Default |
|---|---|---|
debounceTime | number | 1000 |
pingInterval | number | 30000 |
pingTimeout | number | 5000 |
pingURL | string | https://www.google.com/favicon.ico |
Return Values
| Prop | Type | Default |
|---|---|---|
isOnline | boolean | - |
lastChanged | string | - |
connectionQuality | 'excellent' | 'good' | 'poor' | 'unknown' | - |
latency | number | - |
isRetrying | boolean | - |
checkConnectionNow | () => void | - |
retryConnection | () => void | - |
Edit on GitHub
Last updated on 2/25/2025