VoiceSearch | React InstantSearch V6 (Deprecated)

Signature

<VoiceSearch
  // Optional parameters
  searchAsYouSpeak={boolean}
  buttonTextComponent={React.Node}
  statusComponent={React.Node}
  translations={object}
/>

About this widget

The VoiceSearch widget lets the user perform a voice-based query.

It uses the Web Speech API, which only Chrome (from version 25) has implemented so far. This means the voiceSearch widget only works on desktop Chrome and Android Chrome. It doesn’t work on iOS Chrome, which uses the iOS WebKit.

Examples

1
2
3
import { VoiceSearch } from 'react-instantsearch-dom';

<VoiceSearch />

Props

searchAsYouSpeak

Whether to trigger the search as you speak. If false, search is triggered only after speech is finished. If true, search is triggered whenever the engine delivers an interim transcript.

1
<VoiceSearch searchAsYouSpeak={false} />

buttonTextComponent

Changes the content of the default button (mic icon). It receives the following properties:

• status: string: current status (initial|askingPermission| waiting|recognizing|finished|error).
• transcript: string: currently recognized transcript.
• isSpeechFinal: boolean: true if speech recognition is finished.
• errorCode: string|undefined: an error code (if any). Refer to the spec for more information.
• isListening: boolean: true if listening to user’s speech.
• isBrowserSupported: boolean: true if user’s browser supports voice search.

1
2
3
4
5
6
7
8
9
10
11
12
const ButtonText = ({
  status,
  transcript,
  isSpeechFinal,
  errorCode,
  isListening,
  isBrowserSupported,
}) => (isListening ? '⏹' : '🎙');

<VoiceSearch
  buttonTextComponent={ButtonText}
/>

statusComponent

Changes the content of the status. It receives the same properties as above.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const Status = ({
  status,
  transcript,
  isSpeechFinal,
  errorCode,
  isListening,
  isBrowserSupported,
}) => {
  return (
    <div>
      <p>status: {status}</p>
      <p>errorCode: {errorCode}</p>
      <p>isListening: {isListening ? 'true' : 'false'}</p>
      <p>transcript: {transcript}</p>
      <p>isSpeechFinal: {isSpeechFinal ? 'true' : 'false'}</p>
      <p>isBrowserSupported: {isBrowserSupported ? 'true' : 'false'}</p>
    </div>
  );
};

<VoiceSearch
  statusComponent={Status}
/>

translations

A mapping of keys to translation values.

• buttonTitle: The title attribute on the button
• disabledButtonTitle: The title attribute on the button when it’s disabled on unsupported browsers

1
2
3
4
5
6
<VoiceSearch
  translations={{
    buttonTitle: 'Voice Search',
    disabledButtonTitle: 'Voice Search Disabled',
  }}
/>