web-speech-profanity/packages/playground/src/UI/SpeechRecognitionEndpointIdInput.js

Web Speech API adapter to use Cognitive Services Speech Services for both speech-to-text and text-to-speech service.

import { useDispatch, useSelector } from 'react-redux';
import React, { useCallback } from 'react';

import getPonyfillCapabilities from '../getPonyfillCapabilities';
import setSpeechRecognitionEndpointId from '../data/actions/setSpeechRecognitionEndpointId';

const SpeechRecognitionEndpointIdInput = () => {
  const { ponyfillType, speechRecognitionEndpointId } = useSelector(
    ({ ponyfillType, speechRecognitionEndpointId }) => ({
      ponyfillType,
      speechRecognitionEndpointId
    })
  );

  const dispatch = useDispatch();
  const dispatchSetSpeechRecognitionEndpointId = useCallback(
    ({ target: { value } }) => dispatch(setSpeechRecognitionEndpointId(value)),
    [dispatch]
  );
  const ponyfillCapabilities = getPonyfillCapabilities(ponyfillType);

  return (
    <input
      className="form-control"
      disabled={!ponyfillCapabilities.customSpeech}
      onChange={dispatchSetSpeechRecognitionEndpointId}
      type="text"
      value={speechRecognitionEndpointId}
    />
  );
};

export default SpeechRecognitionEndpointIdInput;