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