@speak-tts/react

React hook and component for text-to-speech, built on @speak-tts/core and the Web Speech API. Real-time word highlighting, dynamic mid-speech controls, unlimited text length, and an audio download utility.

Live demo & docs: https://speak-tts.vercel.app/ — try the interactive demo or read the React guide.

Install

npm install @speak-tts/react
# Adds @speak-tts/core automatically.

Usage

Hook

import { useSpeech } from "@speak-tts/react";

export default function App() {
  const { Text, speechStatus, start, pause, stop } = useSpeech({
    text: "This is awesome!",
  });

  return (
    <div>
      <Text />
      {speechStatus !== "started" ? (
        <button onClick={start}>Start</button>
      ) : (
        <button onClick={pause}>Pause</button>
      )}
      <button onClick={stop}>Stop</button>
    </div>
  );
}

Component

import Speech from "@speak-tts/react";

export default function App() {
  return <Speech text="One-line setup." />;
}

Icons

Tiny tree-shakable SVG icons used by the default <Speech /> controls are also exported separately:

import { PlayIcon, PauseIcon, StopIcon, VolumeIcon } from "@speak-tts/react/icons";

Browser support

Requires the Web Speech API, available in all modern browsers. Audio download additionally requires getDisplayMedia and MediaRecorder (Chromium-based browsers, served over HTTPS or localhost).

@speak-tts/react is SSR-safe and works with Next.js / Remix — useSpeech().isSupported returns false on the server, and the <Speech /> component renders a fallback when synthesis is unavailable.

Related packages

• @speak-tts/core — framework-agnostic core (auto-installed as a dependency).
• @speak-tts/angular — Angular standalone component + signal-based service.

License

MIT