Make your React App speak with this simple Hook and 3 lines of code.
Tags: react, webdev, tutorial, typescript
Published: 2022-11-06 03:14:49

While speech synthesis is not cool as recognition you can still do pretty cool stuff with it, plus unlike recognition, synthesis is widely supported. for example, I recently built this gym app in React, during a workout Microsoft David is your PT dude be telling the time, calories, next workout, and so on, weird I know.


## Getting Started 

```cmd

npm i use-speech18

```

The cool thing about the Hook is it's all functionality no UI stuff and will always depend on the latest version of React.

## Using the Hook

```jsx
// App.tsx

import { useState, useEffect } from 'react'
import useSpeech from "use-speech18"

 

function App() {
  // init the Hook
const [index, setIndex] = useState(0) // we will use to cycle the array of voices
 const {Speak, speak_utils} = useSpeech()

useEffect(()=> {
    console.log("array of avalaible voices", speak_utils.Voices)
    speak_utils.setVoice(speak_utils.Voices[index].name)
    console.log(speak_utils.selectedVoice, "currently selected voice")   
  
  }, [speak_utils.Voices])

return (
 <div className="app">


</div>

)

}


export default App

```

now to make it speak, you can create your own UI around this functionality to your heart's desire. for our purpose, I will only create a few controls to demo the Hook.

```jsx

const text = `
I did not kill Joffrey, but I wish that I had! Watching your vicious bastard die gave me more relief than a thousand lying whores!,  I wish I was the monster you think I am! I wish I had enough poison for the whole pack of you! I would gladly give my life to watch you all swallow it!,  I will not give my life for Joffery's murder and I know I'll get no justice here, so I will let the gods decide my fate. I demand a trial by combat

`

function App(){
...

  useEffect(()=> {
     // when the index changes we want to get the next voice in the array, if there's 
     // no next, then we cycle back to the start
     speak_utils.setVoice(speak_utils.Voices[index % speak_utils.Voices.length].name)
  }, [index])

return (
 <div className="app">
       <div>
         <label>Current Voice: </label>
         <span>{speak_utils.selectedVoice?.name}</span>
       </div>

      <button onClick={() => Speak(text)}>speak</button>

      <button onClick={()=> setIndex(prev => prev + 1)}>Next voice</button>

      
    </div>

</div>

)

}

```

Simple isn't, now you can play with speech in your react apps, make it accessible, make you some spooky story reader app, I don't know. 

[useSpeech repo](https://github.com/SfundoMhlungu/useSpeech)
[on npm](https://www.npmjs.com/package/use-speech18).

Self-promo alert:  I am working on a Digi product for those interested in making mobile apps with React that I will be dropping soon.

A complete, narrowed enough fast path from beginner Ionic developer to production. 

We will build a complete mobile app with CRUD functionality, local and remote DB, Auth, Monetization, In-app store, and much more.

There is also an option for 1v1 mentorship as you go through the project. 

if this sounds interesting to you please [check it out](https://sk76.gumroad.com/l/ionic).