react-webspeech

react-webspeech – Official WebSpeech for React.

Features

• Compatible with both JavaScript and TypeScript
• useSpeechSynthesis (text-to-speech) – Demo.
• useSpeechRecognition (speech-to-text) – Coming in next version.

Install

react-webspeech is available on npm:

npm install react-webspeech --save

react-webspeech is available on yarn as well:

yarn add react-webspeech

useSpeechSynthesis

useSpeechSynthesis is a text-to-speech react hook.

Usage

import React, { useState } from 'react';
import { useSpeechSynthesis } from 'react-webspeech';

function App() {
  const [text, setText] = useState('I love React');
  const { speak } = useSpeechSynthesis();

  return (
    <div>
      <textarea
        value={text}
        onChange={(event) => setText(event.target.value)}
      />
      <button onClick={() => speak({ text })}>Speak</button>
    </div>
  );
}

export default App;

Prop

Return

speak Params

💖 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