useSpeechRecognition

import { useSpeechRecognition } from '@vincent.ri/react-tils'
// or only this hook
import { useSpeechRecognition } from '@vincent.ri/react-tils/useSpeechRecognition'

const speech = useSpeechRecognition({ lang: 'en-US' })
useEffect(() => {
  if (speech.transcript) setQuery(speech.transcript)
}, [speech.transcript])
if (!speech.supported) return null
return (
  <button onClick={speech.listening ? speech.stop : speech.start}>
    {speech.listening ? 'Stop' : '🎤 Dictate'}
  </button>
)

function useSpeechRecognition(options?: SpeechRecognitionOptions): SpeechRecognitionState

export type SpeechRecognitionOptions = {
  /** BCP 47 language, e.g. `'en-US'`. Default: the page's language. */
  lang?: string;
  /** Keep listening across pauses instead of stopping after the first phrase. Default `false`. */
  continuous?: boolean;
};
export type SpeechRecognitionState = {
  /** `false` on the server, during hydration, and in browsers without speech recognition (Firefox). */
  supported: boolean;
  listening: boolean;
  /** Everything recognized so far, final words only. */
  transcript: string;
  /** Words still being recognized; they may change before becoming final. */
  interim: string;
  /** e.g. `'not-allowed'` (microphone blocked), `'no-speech'`, `'network'`. */
  error: string | null;
  /** Start listening. Call it from a click: browsers ask for the microphone. */
  start: () => void;
  /** Stop and keep the words heard so far. */
  stop: () => void;
  /** Clear the transcript. */
  reset: () => void;
};