react-use-voice

A lightweight React hook for the Web Speech API — add voice recognition to any React app in seconds.

TypeScript-first · Zero runtime dependencies · Tree-shakeable ESM + CJS

Install

npm install react-use-voice

Peer dependency: react >=17

Quick Start

import { useVoice } from 'react-use-voice';

function Dictation() {
  const {
    transcript,
    interimTranscript,
    listening,
    supported,
    error,
    start,
    stop,
    reset,
  } = useVoice({ lang: 'en-US' });

  if (!supported) return <p>Your browser does not support speech recognition.</p>;

  return (
    <div>
      <p>{transcript}<em>{interimTranscript}</em></p>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <button onClick={listening ? stop : start}>
        {listening ? '⏹ Stop' : '🎤 Start'}
      </button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

Options

| Option | Type | Default | Description | |---|---|---|---| | lang | string | 'en-US' | BCP-47 language tag | | continuous | boolean | true | Keep recognising after each utterance | | interimResults | boolean | true | Emit partial results while the user is speaking | | onResult | (transcript: string) => void | — | Callback fired with each final transcript segment | | onError | (error: string) => void | — | Callback fired on recognition error | | onStart | () => void | — | Callback fired when recognition starts | | onEnd | () => void | — | Callback fired when recognition ends |

Return Value

| Property | Type | Description | |---|---|---| | transcript | string | Accumulated final transcript | | interimTranscript | string | Live partial result (resets after each final result) | | listening | boolean | Whether the recogniser is currently active | | supported | boolean | false when the browser doesn't support SpeechRecognition | | error | string \| null | Latest error message | | start | () => void | Start voice recognition | | stop | () => void | Stop voice recognition | | reset | () => void | Clear transcript, interimTranscript, and error |

Browser Support

The Web Speech API is supported in Chromium-based browsers (Chrome, Edge, Brave, Opera) and Safari 14.1+. Firefox does not support SpeechRecognition natively. The hook gracefully degrades by returning supported: false in unsupported browsers.

SSR Compatibility

All browser API access is guarded with typeof window !== 'undefined'. The hook is fully safe for server-side rendering (Next.js, Remix, etc.) — it will simply return supported: false during SSR.

License

MIT