{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-speech-recognition"],"cli":null},"imports":["import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';","import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';","import SpeechRecognition from 'react-speech-recognition';\nSpeechRecognition.applyPolyfill(MyCustomSpeechRecognition);"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}