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

I installed it using npm install --save react-speech-recognition
Resource: react-speech-recognition - npm

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?

After installing this in git:

npm install --save react-speech-recognition

you can simply create a component of SpeechRecognition (in a library of components) which contains this (from https://github.com/FoundersFactory/react-speech-recognition):

import React, { Component } from "react";
import PropTypes from "prop-types";
import SpeechRecognition from "react-speech-recognition";

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

const Dictaphone = ({
  transcript,
  resetTranscript,
  browserSupportsSpeechRecognition
}) => {
  if (!browserSupportsSpeechRecognition) {
    return null;
  }

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

Dictaphone.propTypes = propTypes;

export default SpeechRecognition(Dictaphone);

and then just add it to the render function in the App
componenet.
Assuming that I have only Header component and SpeechRecognition component , the App should look like:

import React, {Component} from 'react';
import Header from './components/Header/Header';
import SpeechRecognition from './components/SpeechRecognition/SpeechRecognition';
import './App.css';

class App extends Component {
    constructor() {
      super();
      this.state = {
         text: '',
         events: []
      }
    }

    render () {
      return (
        <div className='App'>
          <Header />
          <SpeechRecognition />
        </div>
      );
    }
}

export default App;

Now you will see a reset button and your speech next to it ! (it recording you by default).
In addition, you can manipulate the recording by adding another buttons or watch the transcript of the words in a textarea.
the render func of the App component now would be (and you can keep playing with that and add your own features):

 render () {
      return (
        <div className='App'>
          <Header />
          <button className="btn-start">Srart recording</button>
          <button className="btn-stop">End recording</button>
          <textarea className='output'></textarea>
          <SpeechRecognition />
        </div>
      );
    }
}

This question was asked 2 years ago… so I hope it will help others…