React useTTS hook for native browser TTS

TTSDemo.tsx

import React from "react";
import { useSpeech } from "./useSpeech";

export const SpeechDemo = () => {
  const { speaking, speak, stop } = useSpeech({ lang: "en-US", rate: 1.1 });
  const message = "Accessibility makes your app more inclusive and user-friendly.";

  return (
    <div>
      <p>{message}</p>
      <button onClick={() => speak(message)}>
        {speaking ? "Stop Reading" : "Read Aloud"}
      </button>
      <button onClick={stop}>Stop</button>
    </div>
  );
};

useTTS.ts

import { useState } from "react";

interface UseSpeechOptions {
  lang?: string;
  rate?: number;
  pitch?: number;
  voice?: SpeechSynthesisVoice | null;
}

interface UseSpeechReturn {
  speaking: boolean;
  speak: (text: string) => void;
  stop: () => void;
}

export const useSpeech = (options: UseSpeechOptions = {}): UseSpeechReturn => {
  const { lang = "en-US", rate = 1, pitch = 1, voice = null } = options;
  const [speaking, setSpeaking] = useState(false);

  const stop = () => {
    window.speechSynthesis.cancel();
    setSpeaking(false);
  };

  const speak = (text: string) => {
    if (!("speechSynthesis" in window)) {
      alert("Sorry, your browser does not support text-to-speech.");
      return;
    }

    if (speaking) {
      stop();
      return;
    }

    const utterance = new SpeechSynthesisUtterance(text);
    utterance.lang = lang;
    utterance.rate = rate;
    utterance.pitch = pitch;
    utterance.voice = voice || window.speechSynthesis.getVoices()[0] || null;

    utterance.onend = () => setSpeaking(false);
    window.speechSynthesis.speak(utterance);
    setSpeaking(true);
  };

  return { speaking, speak, stop };
};