🎤 use-speech-recognition-hook

A lightweight, React-friendly speech recognition hook for browser-based voice input. Supports Chrome SpeechRecognition API, continuous listening, multi-language support, and real-time transcript updates.

---

✨ Features

• 🎧 Start & stop voice recognition
• 🔄 Continuous speech listening
• 🌍 Multi-language support (default: en-US)
• 🧠 Built-in checks for browser API support
• ⚛️ Works with React + Next.js (use client compatible)
• 📦 Zero dependency

---

📦 Installation

npm install use-speech-recognition-hook
# or
yarn add use-speech-recognition-hook
# or
pnpm add use-speech-recognition-hook

---

🚀 Usage

Basic example

"use client";

import React from "react";
import useSpeechRecognitionHook from "use-speech-recognition-hook";

export default function VoiceInput() {
  const {
    isListening,
    text,
    startListening,
    stopListening,
    hasRecognitionSupport,
  } = useSpeechRecognitionHook("en-US");

  if (!hasRecognitionSupport) {
    return <p>Your browser does not support Speech Recognition.</p>;
  }

  return (
    <div>
      <h2>Speech Recognition Demo</h2>

      <p>Transcript: {text}</p>

      {!isListening ? (
        <button onClick={startListening}>Start Listening</button>
      ) : (
        <button onClick={stopListening}>Stop Listening</button>
      )}
    </div>
  );
}

---

🧩 Hook API

useSpeechRecognitionHook(language?: string)

Parameters

Parameter	Type	Default	Description
language	string	"en-US"	Speech recognition language

Returns

Key	Type	Description
isListening	boolean	Whether the mic is currently recording
text	string	Final combined transcript
startListening()	function	Begin listening
stopListening()	function	Stop listening
hasRecognitionSupport	boolean	Browser support check

---

🔧 How It Works

Internally, the hook:

• Initializes the browser's SpeechRecognition / webkitSpeechRecognition
• Sets continuous listening + language
• Merges all speech results into a single transcript
• Automatically handles onresult, onend, and cleanup
• Prevents SSR errors (window is not defined)

---

🛡 Browser Compatibility

Browser	Support
Chrome	✔ Fully supported
Edge (Chromium)	✔ Supported
Opera	✔ Supported
Safari	❌ Not fully supported
Firefox	❌ Not supported

SpeechRecognition is an experimental API and may behave differently across browsers.

---

🛠 TypeScript Support

This package includes custom TypeScript definitions for:

• SpeechRecognition
• SpeechRecognitionEvent
• SpeechRecognitionResultList

No extra setup needed.

---

📄 License

MIT © 2025 — Shamim Hasnain

---