react-text-to-speech

react-text-to-speech

A React.js text-to-speech library with real-time text highlighting, dynamic speech controls, and unlimited text length, powered by the Web Speech API.

Install

# npm
npm install react-text-to-speech --save

# yarn
yarn add react-text-to-speech

# pnpm
pnpm add react-text-to-speech

# bun
bun add react-text-to-speech

Quick Start

Two ways to add speech to your React app. Pick whichever fits your use case.

Option 1 - useSpeech hook (full control)

import React from "react";
import { useSpeech } from "react-text-to-speech";

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

  return (
    <div style={{ display: "flex", flexDirection: "column", rowGap: "1rem" }}>
      <Text />
      <div style={{ display: "flex", columnGap: "0.5rem" }}>
        {speechStatus !== "started" ? (
          <button onClick={start}>Start</button>
        ) : (
          <button onClick={pause}>Pause</button>
        )}
        <button onClick={stop}>Stop</button>
      </div>
    </div>
  );
}

Option 2 - <Speech> component (minimal setup)

import React from "react";
import Speech from "react-text-to-speech";

export default function App() {
  return <Speech text="This library is awesome!" stableText={true} />;
}

What's Included

Feature	Details
🔊 Text-to-Speech	Powered by the Web Speech API
🖊️ Text Highlighting	Highlights text as it's spoken
🎛️ Dynamic Controls	Adjust pitch, rate, volume, lang, voiceURI mid-speech
♾️ Unlimited Input	Bypasses the Web Speech API's built-in text length limit
📋 Directives	Inline playback control via special text syntax
🔁 Multiple Instances	Run several speech instances simultaneously
🧹 Auto Cleanup	Speech stops automatically on component unmount
⚠️ Error Handling	Built-in APIs for speech errors and events

Links

• 📖 Full Documentation
• 🎮 Live Demo
• 🐛 GitHub Issues
• 💬 GitHub Discussions

License

MIT