react-text-to-speech

react-text-to-speech

An easy-to-use React.js component that leverages the Web Speech API to convert text to speech.

Features

• Text-to-Speech: Converts text to speech using the Web Speech API.
• Text Highlighting: Highlights text as it’s read aloud using the useSpeech hook or Speech component.
• Error and Event Handling: Provides APIs for managing errors and events via useSpeech hook or Speech component.
• Multiple Speech Instances: Supports multiple speech instances using useSpeech hook or Speech component.
• Customization: Fully customizable through the useSpeech hook or Speech component.
• Directives: Control playback behavior inline through special text syntax using Directives.
• Dynamic Controls: Programmatically adjust pitch, rate, volume, lang, and voiceURI during speech.
• Unlimited Text Input: Overcomes the Web Speech API’s text length limit for continuous speech.
• Auto Cleanup: Automatically stops speech when the component unmounts.

Installation

Install react-text-to-speech using your preferred package manager:

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

# Using Yarn:
yarn add react-text-to-speech

# Using pnpm:
pnpm add react-text-to-speech

# Using Bun:
bun add react-text-to-speech

Usage

react-text-to-speech provides two primary methods to integrate text-to-speech functionality into your React.js applications: the useSpeech hook and the <Speech> component.

useSpeech Hook

Basic Usage

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

export default function App() {
  const {
    Text, // Component that renders the processed text
    speechStatus, // Current speech status
    isInQueue, // Indicates whether the speech is currently playing or waiting in the queue
    start, // Starts or queues the speech
    pause, // Pauses the speech
    stop, // Stops or removes the speech from the queue
  } = useSpeech({ text: "This library is awesome!" });

  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>
  );
}

Detailed Usage

For more details on using the useSpeech hook, refer to the documentation.

<Speech> Component

Basic Usage

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

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

Detailed Usage

For more details on using the <Speech> component, refer to the documentation.

Demo

Check out the live demo to see it in action.

Documentation

Explore the documentation to get started quickly.

Contribute

Show your ❤️ and support by giving a ⭐ on GitHub. You can also support the project by upvoting and sharing it on Product Hunt. Any suggestions are welcome! Take a look at the contributing guide.

License

This project is licensed under the MIT License.

Changelog

2.1.2 (2025-07-01)

• fix: Resolve incorrect word highlighting when using both directives and JSX.