Annyang in react - Best practices

Question

I'm looking to integrate speech recognition into my React project, I'll likely be seperating each feature that can be controlled by speech recognition into services of sorts but currently I'm extremely confused on how to approach this.

I'm able to get Annyang to work by placing the code in my index and running something like this:

const annyang = require('annyang');
if (annyang) {
// Let's define a command.
annyang.debug();
var commands = {
  'hello world': function() { alert('Hello'); }
};

// Add our commands to annyang
annyang.addCommands(commands);

annyang.addCallback('soundstart', function() {
  console.log('sound detected');
});

annyang.addCallback('result', function() {
  console.log('sound stopped');
});
// Start listening.
annyang.start();
}

But I'm really confused on how this code would interact with the Components I already have? I'm new to React and would love to know the best practice for something like this.

I'm thinking about running this code in its own file and maybe exporting the Module and requiring it in my components, would this be good practice or am I missing something?

If I have been unclear let me know and I'll do my best to explain

Answer 1

This really depends on what your goal is.

A good practice would be to put all your Annyang commands in the top level component (eg <App/> ) and set the state (or dispatch actions) when a voice command is executed. Here's a very basic example of that, without any flux implementation or many components:

 class App extends React.Component { constructor() { super(); this.state = { hello: false }; } componentDidMount() { if (annyang) { // Let's define a command. var commands = { 'hello': () => this.setState({ hello: true }) }; // Add our commands to annyang annyang.addCommands(commands); // Start listening. annyang.start(); } } render() { return this.state.hello ? <SaidHello /> : <Welcome />; } } class Welcome extends React.Component { render() { return <div>Say "hello"!</div>; } } class SaidHello extends React.Component { render() { return <div>Well, hello! How are you?</div>; } } ReactDOM.render(<App/>, document.getElementById('View'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.6.0/annyang.min.js"></script> <div id="View"></div>

Remember to allow microphone access in your browser, or otherwise it won't work. If this example doesn't work on StackOverflow, check it out on JSBin .

Answer 2

If you want to use this library

useEffect(() => {
if (annyang) {
var commands = {
 "Hello": function,
 "Bye": function,
 "Let's have ours": function,
 "Turn on the nursery": function,
 "Who are you": function,
 "What can you do": function,
 "What are you written on": function,
 "Come on fresh": function,
"Raspberry Lada": function
 "The heat has gone": function
"Open": () => function(true),
"Close": () => function(false)
}