useNetworkStatus

Monitors the browser’s network connectivity status. Useful for showing offline indicators or pausing functionality when the user loses internet.

Import


import { useNetworkStatus } from '@vocobase/voice-client-sdk'

Requirements

Must be used within a VoiceSessionProvider.

Return Value


const {
  isOnline,     // boolean
  lastChanged   // Date | null
} = useNetworkStatus()

`isOnline`

true if the browser reports being online, false otherwise.

`lastChanged`

The Date when the network status last changed, or null if it hasn’t changed since the component mounted.

Example


function NetworkIndicator() {
  const { isOnline } = useNetworkStatus()
 
  return (
    <div className={isOnline ? 'online' : 'offline'}>
      {isOnline ? '🟢 Online' : '🔴 Offline'}
    </div>
  )
}

Offline Banner


function OfflineBanner() {
  const { isOnline } = useNetworkStatus()
 
  if (isOnline) return null
 
  return (
    <div className="offline-banner">
      You're offline. Voice calls require an internet connection.
    </div>
  )
}

Disable Connect When Offline


function ConnectButton() {
  const { isOnline } = useNetworkStatus()
  const { connect } = useVoiceSession()
  const { isConnecting } = useConnectionState()
 
  return (
    <button
      onClick={connect}
      disabled={!isOnline || isConnecting}
      title={!isOnline ? 'No internet connection' : undefined}
    >
      {!isOnline ? 'Offline' : isConnecting ? 'Connecting...' : 'Start Call'}
    </button>
  )
}

Limitations

The navigator.onLine API has known limitations:

May report true even if actual internet is unreachable
Behavior varies slightly across browsers

For critical applications, consider additional connectivity checks.