webos/speech

VoiceControlDecorator is a higher-order component that adds a callback for voice event to its wrapped component.

By default, onVoice handler will be added to the node where data-webos-voice-intent attribute is declared. In addition, if you need to specify a target node, data-webos-voice-event-target attribute can be used.

Usage:

import React from 'react';
import Item from '@enact/moonstone/Item';
import {VoiceControlDecorator} from '@enact/webos/speech';

const VoiceDiv = VoiceControlDecorator('div');
const VoiceItem = VoiceControlDecorator(Item);

class Sample extends React.Component {
  handlePlayListControl = (e) => {
    const {intent, control} = e.detail;
    // Change the app status refer to the `control` value.
  }

  handlePlayContent = (e) => {
    const {intent, value} = e.detail;
    // Play content
  }

  render () {
    return(
      <div>
        <VoiceDiv
          data-webos-voice-intent='PlayListControl'
          onVoice={this.handlePlayListControl}
        />
        <VoiceItem
          data-webos-voice-intent='Select PlayContent'
          onVoice={this.handlePlayContent}
        >
          The Dark Knight
        </VoiceItem>
      </div>
    );
  }
}