|| How to use speech recognition in React? ||

|| How to use speech recognition in React? ||
0

#1

I installed it using npm install --save react-speech-recognition
Resource: https://www.npmjs.com/package/react-speech-recognition

The thing is I don’t know how to use it, a simple example of an app using it (maybe on a repository of github) is greatly appreciated…

In my application I have a microphone and once is clicked it triggers a handleClick method and the text will be sent to an array.

I know it doesn’t make sense but I created a component called “SpeechRecognition” that contains the following code:

import React, { PropTypes, Component } from 'react'
import SpeechRecognition from 'react-speech-recognition'

const propTypes = {
  // Props injected by SpeechRecognition
  transcript: PropTypes.string,
  resetTranscript: PropTypes.func,
  browserSupportsSpeechRecognition: PropTypes.bool
}

class Dictaphone extends Component {
  render() {
    const { transcript, resetTranscript, browserSupportsSpeechRecognition } = this.props

    if (!browserSupportsSpeechRecognition) {
      return null
    }

    return (
      <div>
        <button onClick={resetTranscript}>Reset</button>
        <span>{transcript}</span>
      </div>
    )
  }
}

Dictaphone.propTypes = propTypes

export default SpeechRecognition(Dictaphone)

Does anybody have an example of a simple application build using SpeechRecognition in React so I can understand how to use to make it work?