useConnectionState

Provides detailed information about the current connection status, including reconnection attempts.

Import


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

Requirements

Must be used within a VoiceSessionProvider.

Return Value


const {
  state,                // ConnectionState
  isConnected,          // boolean
  isConnecting,         // boolean
  isReconnecting,       // boolean
  isDisconnected,       // boolean
  reconnectAttempt,     // number
  maxReconnectAttempts  // number
} = useConnectionState()

`state`

The current connection state:


type ConnectionState =
  | 'idle'           // Initial state, ready to connect
  | 'connecting'     // Establishing connection
  | 'connected'      // Active voice session
  | 'reconnecting'   // Lost connection, attempting to restore
  | 'disconnecting'  // Gracefully ending session
  | 'disconnected'   // Cleanly disconnected
  | 'error'          // Fatal error occurred

Boolean Helpers

Property	True when `state` equals
`isConnected`	`'connected'`
`isConnecting`	`'connecting'`
`isReconnecting`	`'reconnecting'`
`isDisconnected`	`'idle'`, `'disconnected'`, or `'error'`

Example


function StatusIndicator() {
  const { state, isConnected, isConnecting } = useConnectionState()
  const { connect, disconnect } = useVoiceSession()
 
  return (
    <div>
      <div className={`status status-${state}`}>
        Status: {state}
      </div>
 
      <button
        onClick={isConnected ? disconnect : connect}
        disabled={isConnecting}
      >
        {isConnecting ? 'Connecting...' : isConnected ? 'Disconnect' : 'Connect'}
      </button>
    </div>
  )
}

Showing Reconnection Progress


function ReconnectionBanner() {
  const { isReconnecting, reconnectAttempt, maxReconnectAttempts } = useConnectionState()
 
  if (!isReconnecting) return null
 
  return (
    <div className="reconnection-banner">
      Connection lost. Reconnecting... ({reconnectAttempt}/{maxReconnectAttempts})
    </div>
  )
}