Have ideas to improve npm?Join in the discussion! »

react-webspeechTypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

⭐️ If you like react-webspeech, give it a star! ⭐️



react-webspeech – Official WebSpeech for React.

NPM downloads npm bundle size Build Status JavaScript Style Guide



react-webspeech is available on npm:

npm install react-webspeech --save

react-webspeech is available on yarn as well:

yarn add react-webspeech


useSpeechSynthesis is a text-to-speech react hook.


import React, { useState } from 'react';
import { useSpeechSynthesis } from 'react-webspeech';
function App() {
  const [text, setText] = useState('I love React');
  const { speak } = useSpeechSynthesis();
  return (
        onChange={(event) => setText(event.target.value)}
      <button onClick={() => speak({ text })}>Speak</button>
export default App;


Prop Type Require Description
onEnd () => void Called when SpeechSynthesis has finished being spoken.


Return Type Description
isSupported boolean true if the browsers supports SpeechSynthesis otherwise false.
isSpeaking boolean true if SpeechSynthesis is speaking otherwise false.
voices SpeechSynthesisVoice[] Use to get an array of SpeechSynthesisVoice that is passed to the speak function.
cancel (): void Called to stop reading.
speak (speak Params): void Called to make SpeechSynthesis read the text.

speak Params

Prop Type Default Require Description
text string "" The text that will be read by SpeechSynthesis.
voice SpeechSynthesisVoice speechSynthesis.getVoices()[0] The voice that will be used to speak.
rate number 1 The speed at which SpeechSynthesis will be spoken at.
pitch number 1 The pitch at which SpeechSynthesis will be spoken at.
volume number 1 The volume that SpeechSynthesis will be spoken at.

💖 Wrap Up

If you think any of the react-webspeech can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.

🌟 Contribution

We'd love to have your helping hand on contributions to react-webspeech by forking and sending a pull request!

Your contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)

How to contribute:

  • Open pull request with improvements
  • Discuss ideas in issues
  • Spread the word
  • Reach out with any feedback

⚖️ License

The MIT License License: MIT


npm i react-webspeech

DownloadsWeekly Downloads






Unpacked Size

16.9 kB

Total Files


Last publish


  • avatar