grvcoelho/react-voice-components

Set of React components that use the Web Speech API to bring voice experience to React applications

react-voice-components's Issues

Project build fails with your module

Hi,
I have fixed the previous issue, it was failing with ES6 syntax, I put it to 5 and works ok.
The problem now is that I'm trying to build my app and I have an error.

Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file: 

        ./node_modules/react-voice-components/lib/VoicePlayer.js:3 

I wait for your answer, please answer.

VoiceRecognition.js:50 Uncaught TypeError: Cannot read property 'onResult' of undefined at SpeechRecognition.bindResult (VoiceRecognition.js:50)

Hi!
I'm testing your module in my react app and the problem is that it not catch the onResult prop.
I have to take a look at your example, but it's strange with the storybook.
Can you do one without that? It would be better for the people that are a beginner with React JS
like me...

Here is my code:

import React, { Component } from 'react';
import { VoiceRecognition } from 'react-voice-components';
import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
import micro from '../img/micro_icon.png';
import './css/Micro.css';

class Micro extends Component {

  state = {
    listen: false,
    start: false,
    stop: true
  };

  listen = () => {
    this.setState({ listen: true, start: true, stop: false  })
  }

  onEnd = () => {
    this.setState({ listen: false, start: false, stop: true })
  }

  onResult = ({ finalTranscript }) => {
    const result = finalTranscript
    this.setState({ start: false })

    alert(result)
  }

  render() {
    return (
      <div className="row justify-content-center">
        <div>
          <button>
            {
              this.state.listen
              ?
              <div id="wave">
                <span className="dot"></span>
                <span className="dot"></span>
                <span className="dot"></span>
                <VoiceRecognition
                  onEnd={this.onEnd}
                  onResult={this.onResult}
                  continuous={true}
                  lang="es-ES"
                  stop={this.state.stop}
                />
              </div>
              :
              <img src={micro} onClick={this.listen} className="micro-icon" alt="microphone" />
            }
          </button>
        </div>
      </div>
    );
  }
}

export default Micro;

I wait for your answer. Thaks.

Regards.

TransformError: [...]: Couldn't find preset "es2015" relative to directory

Maybe you have them globally installed somewhere.

I just did npm install --save react-voice-components and import { VoiceRecognition } from 'react-voice-components'; in my component.

To fix :
npm i -S babel-preset-es2015
npm install -S babel-preset-stage-2

They should be listed as dependencies :)

'end' event listener cannot detect empty string

If I pass "" for the props.text, speak() runs setting state.started and state.playing to true, but state.started never gets set to false by the 'end' event listener.

This means that when I pass in new props, they are not detected under the current logic defined within componentWillReceiveProps.

Module parse failed

Hi everyone, I'm having trouble importing VoicePlayer into my project. Anyone know what the problem is? This is the error I get.

I'm trying to get this to work in a project made with create-react-app

error repro: https://github.com/tjiang11/react-bug-repro

./~/react-voice-components/lib/VoicePlayer.js
Module parse failed: /home/tjiang11/Documents/Projects/lingua/node_modules/react-voice-components/lib/VoicePlayer.js Unexpected token (19:15)
You may need an appropriate loader to handle this file type.
|   }
| 
|   createSpeech = () => {
|     const defaults = {
|       text: '',