Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
react-text-to-speech
Advanced tools
An easy-to-use React.js component that leverages the Web Speech API to convert text to speech.
An easy-to-use React.js component that leverages the Web Speech API to convert text to speech.
To install react-text-to-speech
:
# with npm:
npm install react-text-to-speech --save
# with yarn:
yarn add react-text-to-speech
# with pnpm:
pnpm add react-text-to-speech
# with bun:
bun add react-text-to-speech
react-text-to-speech offers two main ways to integrate text-to-speech functionality into your React.js applications through the useSpeech
hook and the <Speech>
component.
import React from "react";
import { useSpeech } from "react-text-to-speech";
export default function App() {
const {
Text, // Component that returns the modified text property
speechStatus, // String that stores current speech status
isInQueue, // Boolean that stores whether a speech utterance is either being spoken or present in queue
start, // Function to start the speech or put it in queue
pause, // Function to pause the speech
stop, // Function to stop the speech or remove it from 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>
);
}
For detailed usage of useSpeech
hook, refer here
import React from "react";
import Speech from "react-text-to-speech";
export default function App() {
return <Speech text="This library is awesome!" />;
}
For detailed usage of <Speech>
component, refer here
A Demo is worth a thousand words
Check the documentation to get you started!
Show your ❤️ and support by giving a ⭐. Any suggestions are welcome! Take a look at the contributing guide.
FAQs
An easy-to-use React.js component that leverages the Web Speech API to convert text to speech.
The npm package react-text-to-speech receives a total of 1,266 weekly downloads. As such, react-text-to-speech popularity was classified as popular.
We found that react-text-to-speech demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.