---
title: "Hooks and Call State | Micdrop"
description: "React hooks to read the Micdrop call state, react to errors and to the end of a call, and draw microphone and speaker level meters."
url: "https://micdrop.dev/docs/react-native/hooks"
---

*   [Getting Started](/docs/getting-started)
*   [Client (Browser)](/docs/client)
    
    *   [Installation](/docs/client/installation)
    *   [React Hooks](/docs/client/react-hooks)
    *   [Start/Stop Call](/docs/client/start-stop-call)
    *   [Pause/Resume Call](/docs/client/pause-resume-call)
    *   [Mute/Unmute Call](/docs/client/mute-unmute-call)
    *   [Call State](/docs/client/call-state)
    *   [Display Conversation Messages](/docs/client/display-conversation-messages)
    *   [Handling Tool Calls](/docs/client/handling-tool-calls)
    *   [Device Management](/docs/client/devices-management)
    *   [Voice Activity Detection (VAD)](/docs/client/vad)
    *   [Error Handling](/docs/client/error-handling)
    *   Utility Classes
        
        *   [Mic](/docs/client/utility-classes/mic)
        *   [MicdropClient](/docs/client/utility-classes/micdrop-client)
        *   [MicRecorder](/docs/client/utility-classes/mic-recorder)
        *   [Speaker](/docs/client/utility-classes/speaker)
        
    
*   [Client (React Native)](/docs/react-native)
    
    *   [Installation](/docs/react-native/installation)
    *   [Hooks and Call State](/docs/react-native/hooks)
    *   [Audio Output and Devices](/docs/react-native/audio-output)
    *   [Voice Activity Detection (VAD)](/docs/react-native/vad)
    *   [Using Another Audio Library](/docs/react-native/custom-audio)
    
*   [Server (Node.js)](/docs/server)
    
    *   [Installation](/docs/server/installation)
    *   [With Fastify](/docs/server/with-fastify)
    *   [With NestJS](/docs/server/with-nestjs)
    *   [Auth and Parameters](/docs/server/auth-and-parameters)
    *   [First Message](/docs/server/first-message)
    *   [Save Messages](/docs/server/save-messages)
    *   [Resume a Conversation](/docs/server/resume-conversation)
    *   [Recording Audio](/docs/server/recording-audio)
    *   [Error Handling](/docs/server/error-handling)
    *   [Tools](/docs/server/tools)
    *   [Extract Value from Answer](/docs/server/extract)
    *   [Auto End Call](/docs/server/auto-end-call)
    *   [Semantic Turn Detection](/docs/server/semantic-turn-detection)
    *   [Noise Filtering](/docs/server/noise-filtering)
    *   [Micdrop Protocol](/docs/server/protocol)
    
*   [AI Integrations](/docs/ai-integration)
    
    *   Provided Integrations
        
        *   [AI SDK](/docs/ai-integration/provided-integrations/ai-sdk)
        *   [Cartesia](/docs/ai-integration/provided-integrations/cartesia)
        *   [ElevenLabs](/docs/ai-integration/provided-integrations/elevenlabs)
        *   [Gladia](/docs/ai-integration/provided-integrations/gladia)
        *   [Gradium](/docs/ai-integration/provided-integrations/gradium)
        *   [Kokoro](/docs/ai-integration/provided-integrations/kokoro)
        *   [Mistral](/docs/ai-integration/provided-integrations/mistral)
        *   [OpenAI](/docs/ai-integration/provided-integrations/openai)
        *   [Piper](/docs/ai-integration/provided-integrations/piper)
        *   [Pocket TTS](/docs/ai-integration/provided-integrations/pocket-tts)
        *   [Whisper](/docs/ai-integration/provided-integrations/whisper)
        
    *   Custom Integrations
        
        *   [Agent (LLM)](/docs/ai-integration/custom-integrations/custom-agent)
        *   [Speech-to-Text (STT)](/docs/ai-integration/custom-integrations/custom-stt)
        *   [Text-to-Speech (TTS)](/docs/ai-integration/custom-integrations/custom-tts)
        
    *   Fallback Strategies
        
        *   [FallbackAgent](/docs/ai-integration/fallback-strategies/agent-fallback)
        *   [FallbackSTT](/docs/ai-integration/fallback-strategies/stt-fallback)
        *   [FallbackTTS](/docs/ai-integration/fallback-strategies/tts-fallback)
        
    *   [Local Models](/docs/ai-integration/local-models)
        
        *   [Choosing the Models](/docs/ai-integration/local-models/choosing-models)
        *   [Latency and Memory](/docs/ai-integration/local-models/performance)
        *   [Explorations](/docs/ai-integration/local-models/explorations)
        
    *   [IA Vocale Souveraine 🇫🇷🇪🇺](/docs/ai-integration/sovereign-voice-ai)
    
*   [Migration](/docs/migration)
    
    *   [Upgrade to v3](/docs/migration/v3)
    

[Micdrop](/) › [Documentation](/docs/getting-started)

# Hooks and Call State

The hooks live in `@micdrop/react` and are the same ones a web app uses, since the call state is the same on both platforms.

Terminal window

```
npm install @micdrop/react
```

## useMicdropState

Returns the whole state of the call, and re-renders when any of it changes.

```
import { useMicdropState } from '@micdrop/react'import { Text } from 'react-native'
function CallStatus() {  const state = useMicdropState()
  if (state.isReconnecting) return <Text>Reconnecting</Text>  if (state.isStarting) return <Text>Starting</Text>  if (!state.isStarted) return <Text>Ready</Text>  if (state.isUserSpeaking) return <Text>Listening</Text>  if (state.isAssistantSpeaking) return <Text>Speaking</Text>  if (state.isProcessing) return <Text>Thinking</Text>  return <Text>Your turn</Text>}
```

Field

Type

Meaning

`isStarting`

`boolean`

The call is opening

`isStarted`

`boolean`

The call is running

`isReconnecting`

`boolean`

The connection dropped and is being retried

`isListening`

`boolean`

Waiting for the user to speak

`isUserSpeaking`

`boolean`

The user is speaking right now

`isProcessing`

`boolean`

The server is working on an answer

`isAssistantSpeaking`

`boolean`

The answer is being played

`isMuted`

`boolean`

The microphone is off, the call is running

`isPaused`

`boolean`

Both sides are on hold

`isMicStarted`

`boolean`

The microphone is capturing

`conversation`

`MicdropConversation`

Everything said so far

`speakerDeviceId`

`'speaker' | 'earpiece'`

Where the voice is played

`micDevices`

`MicdropDevice[]`

Inputs the OS offers

`speakerDevices`

`MicdropDevice[]`

Outputs the OS offers

`micDeviceId`

`string | undefined`

Input in use

`error`

`MicdropClientError`

The last error, if any

## useMicdropError

Called when the microphone is refused, the server is unreachable, or the call is rejected. The codes are the same as in the browser, see [Error handling](/docs/client/error-handling).

```
import { useMicdropError } from '@micdrop/react'import { useCallback, useState } from 'react'
function CallScreen() {  const [message, setMessage] = useState<string>()
  useMicdropError(    useCallback((error) => setMessage(error.message || error.code), [])  )
  return <Text>{message}</Text>}
```

Wrap the callback in `useCallback`, the hook resubscribes whenever it changes.

## useMicdropEndCall

Called when the assistant hangs up on its own, see [Auto end call](/docs/server/auto-end-call).

```
import { useMicdropEndCall } from '@micdrop/react'import { Micdrop } from '@micdrop/react-native'import { useCallback } from 'react'
function CallScreen() {  useMicdropEndCall(    useCallback(() => {      Micdrop.stop()      navigation.goBack()    }, [navigation])  )}
```

## useMicdropToolCall

Called when the agent runs one of its [tools](/docs/server/tools), with its name, parameters and output.

```
import { useMicdropToolCall } from '@micdrop/react'import { useCallback } from 'react'
function CallScreen() {  useMicdropToolCall(    useCallback((toolCall) => {      if (toolCall.name === 'openMap') {        showMap(toolCall.parameters.place)      }    }, [])  )}
```

## useMicVolume and useSpeakerVolume

Levels in decibels, updated about ten times a second, for a meter or a pulsing avatar. Silence reads as `-Infinity`, so map the range you care about.

```
import { useMicVolume } from '@micdrop/react'import { View } from 'react-native'
function MicMeter() {  const { micVolume } = useMicVolume()  const ratio = Math.max(0, Math.min(1, (micVolume + 60) / 60))
  return <View style={{ width: `${ratio * 100}%`, height: 8 }} />}
```

`useSpeakerVolume` works the same way for the assistant voice, and follows what is being heard rather than what has arrived, so a burst of audio does not light the meter up all at once.

[Previous← Installation](/docs/react-native/installation)[NextAudio Output and Devices →](/docs/react-native/audio-output)

On this page

*   [useMicdropState](#usemicdropstate)
*   [useMicdropError](#usemicdroperror)
*   [useMicdropEndCall](#usemicdropendcall)
*   [useMicdropToolCall](#usemicdroptoolcall)
*   [useMicVolume and useSpeakerVolume](#usemicvolume-and-usespeakervolume)