{"id":11864,"library":"react-speech-recognition","title":"React Speech Recognition Hook","description":"react-speech-recognition is an open-source React library that simplifies integrating browser-based speech recognition into React applications. It provides a `useSpeechRecognition` hook and a `SpeechRecognition` object, abstracting the complexities of the underlying Web Speech API to enable real-time transcription from a user's microphone. The library is currently stable at version 4.0.1, with releases occurring as needed to address bugs or add features. It is actively maintained. Key differentiators include its easy-to-use hook API, built-in handling for browser support detection, microphone access states, and a mechanism for defining voice commands. While it leverages the Web Speech API, which has best support in Chromium-based browsers, the library itself is designed for broad compatibility, recommending polyfills for wider cross-browser functionality.","status":"active","version":"4.0.1","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","react","reactjs","speech","recognition"],"install":[{"cmd":"npm install react-speech-recognition","lang":"bash","label":"npm"},{"cmd":"yarn add react-speech-recognition","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-speech-recognition","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React Hooks functionality.","package":"react","optional":false},{"reason":"Required for older environments or specific bundler configurations (e.g., Next.js) to resolve 'regeneratorRuntime is not defined' errors.","package":"regenerator-runtime","optional":true}],"imports":[{"note":"The primary hook for accessing speech recognition state and functions. It's often imported alongside the `SpeechRecognition` object, which provides global control methods.","wrong":"import { useSpeechRecognition } from 'react-speech-recognition'; // Missing default export for SpeechRecognition object","symbol":"useSpeechRecognition","correct":"import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';"},{"note":"This is the default export, providing global methods like `startListening`, `stopListening`, and `applyPolyfill`. It should be imported as a default, not a named export.","wrong":"import { SpeechRecognition } from 'react-speech-recognition'; // Incorrectly imported as a named export","symbol":"SpeechRecognition","correct":"import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';"},{"note":"The `applyPolyfill` method is a static method on the default `SpeechRecognition` object, used to integrate custom Web Speech API implementations for broader browser support.","wrong":"import { applyPolyfill } from 'react-speech-recognition';","symbol":"applyPolyfill","correct":"import SpeechRecognition from 'react-speech-recognition';\nSpeechRecognition.applyPolyfill(MyCustomSpeechRecognition);"}],"quickstart":{"code":"import React from 'react';\nimport SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';\n\nconst Dictaphone = () => {\n  const commands = [\n    {\n      command: ['hello', 'hi'],\n      callback: () => alert('Hello there!')\n    },\n    {\n      command: 'open * website',\n      callback: (website) => {\n        window.open(`https://www.${website.split(' ').join('')}.com`);\n      }\n    },\n    {\n      command: ['clear', 'reset'],\n      callback: () => resetTranscript()\n    }\n  ];\n\n  const { \n    transcript, \n    listening, \n    resetTranscript, \n    browserSupportsSpeechRecognition, \n    isMicrophoneAvailable,\n    finalTranscript\n  } = useSpeechRecognition({\n    commands,\n    continuous: false // Set to true for continuous listening, but be aware of browser quirks\n  });\n\n  if (!browserSupportsSpeechRecognition) {\n    return <span>Browser doesn't support speech recognition. Consider a polyfill.</span>;\n  }\n\n  if (!isMicrophoneAvailable) {\n    return <span>Microphone is not available or permission was denied.</span>;\n  }\n\n  return (\n    <div>\n      <p>Microphone: {listening ? 'ON' : 'OFF'}</p>\n      <button onClick={() => SpeechRecognition.startListening({ language: 'en-US' })}>Start</button>\n      <button onClick={SpeechRecognition.stopListening}>Stop</button>\n      <button onClick={resetTranscript}>Reset Transcript</button>\n      <p>Transcript: {transcript}</p>\n      <p>Final Transcript: {finalTranscript}</p>\n    </div>\n  );\n};\n\nexport default Dictaphone;","lang":"typescript","description":"This quickstart demonstrates basic speech-to-text functionality, including starting/stopping recognition, resetting the transcript, handling browser support, microphone availability, and defining simple voice commands."},"warnings":[{"fix":"Implement a polyfill (e.g., `web-speech-cognitive-services`) for broader browser support by calling `SpeechRecognition.applyPolyfill()` early in your application lifecycle. Provide fallback UI when not supported.","message":"The Web Speech API has limited cross-browser support, with Chrome providing the most robust experience. Other browsers (like Firefox, Safari) may require polyfills for full functionality or might not support it at all without extra configuration. Always check `browserSupportsSpeechRecognition`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure your application correctly handles the `browserSupportsSpeechRecognition` state, especially when integrating polyfills, to display appropriate fallback content or UI elements.","message":"The `browserSupportsSpeechRecognition` state will now return `false` on browsers that do not support the APIs required for Speech Recognition polyfills (e.g., Internet Explorer), even if a polyfill is used. If a recognition implementation is already listening when a polyfill is applied, it will be disconnected and turned off to prevent multiple recognizers running.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Check `isMicrophoneAvailable` and render appropriate UI feedback. Always initiate `startListening` in response to a direct user action, such as a button click, to comply with browser security policies.","message":"Microphone access requires user permission. The library now exposes `isMicrophoneAvailable` which becomes `false` if the user denies access. Attempting to start listening without prior user interaction (e.g., on component mount) may be blocked by browsers, resulting in errors or silent failure.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Use `browserSupportsContinuousListening` to detect support. Avoid continuous listening on platforms where it's known to be problematic, or provide a 'push-to-talk' alternative.","message":"Continuous listening (`continuous: true`) has varying levels of support and behavior across browsers. On Chrome for Android, it can lead to frequent microphone restarts and an annoying 'beeping' sound, which is an OS-level behavior not controllable by the browser.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always deploy applications using `react-speech-recognition` over HTTPS. For local development on non-localhost IPs, you might need to configure browser flags or trust certificates.","message":"In production environments, the Web Speech API requires a secure context (HTTPS) to function correctly. It will not work over plain HTTP, even on local IP addresses, and microphone access will be blocked.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install `regenerator-runtime` (`npm i --save regenerator-runtime`) and import it at the very top of your application's entry file (e.g., `import 'regenerator-runtime/runtime';` in `_app.js` for Next.js or `index.js` for other React apps).","cause":"Missing `regenerator-runtime` polyfill, often in older environments or specific build setups (e.g., Next.js).","error":"regeneratorRuntime is not defined"},{"fix":"Ensure you `import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';` and check `browserSupportsSpeechRecognition` before using the API. Consider applying a polyfill if cross-browser compatibility is needed.","cause":"Attempting to use `SpeechRecognition` object properties or methods without importing it as a default export, or in a browser that doesn't support the Web Speech API without a polyfill.","error":"SpeechRecognition is not defined (or similar reference error)"},{"fix":"Deploy your application over HTTPS. Ensure the UI clearly prompts the user for microphone permission and handles the `isMicrophoneAvailable` state, guiding users to enable permissions if denied.","cause":"The user has explicitly denied microphone access, or the application is running in an insecure context (HTTP) where microphone access is prohibited by the browser.","error":"Microphone is blocked / Microphone access denied"}],"ecosystem":"npm"}