Introduction

react-text-to-speech is an easy-to-use React.js library 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:

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

Usage

react-text-to-speech offers two main ways to integrate text-to-speech functionality into your React.js applications.

• useSpeech hook - for programmatic control, flexible speech management, and advanced usage.
• <Speech> component - for embedding speech directly in JSX with minimal setup.