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

• Converts text to speech using the Web Speech API.
• Highlights words as they are read aloud. See:
  • Highlighting text with useSpeech hook.
  • Highlighting text with Speech component.
• Provides an API for handling errors and events:
  • Error handling with useSpeech hook.
  • Error handling with Speech component.
• Manages multiple speech instances:
  • Multiple instances with useSpeech hook.
  • Multiple instances with Speech component.
• Fully customizable for various use cases:
  • Customizing useSpeech hook.
  • Customizing Speech component.
• Overcomes the Web Speech API's text length limit, enabling infinite text input.
• Automatically stops speech instances 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 if the speech is active or queued
    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

1.0.3 (25-12-2024)

• perf: Improved performance with memoization.