如何在 react js 中使用 google-input-tool

Question

I am using code as Google Transliterate API Developer's Guide but it not working

Code

 import React, { Component } from "react";
    import PropTypes from "prop-types";
    import $ from 'jquery';
    import  'https://invitationindia.pages.dev/app-js/translation.min.js';
class EditText extends Component {
constructor(props) {
    super(props);
    this.state = {
      element: "",  
    }
  }

 componentDidMount() {
         
    google.load("elements", "1", { packages: "transliteration" });
    let control;
    function onLoad() {         
      var options = {
        //Source Language
        sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
        // Destination language to Transliterate
        destinationLanguage: [google.elements.transliteration.LanguageCode.HINDI],
        shortcutKey: "ctrl+g",
        transliterationEnabled: true
      },                    
      control = new google.elements.transliteration.TransliterationControl(options);  
      control.makeTransliteratable(["txtMessage"]);   
    }
    google.setOnLoadCallback(onLoad);
  }

render() {

    const { props } = this;

    return (

      <>
        <div id="txtMessage" contentEditable="true"
          style={{
            fontSize: props.fontSize,
          }}
        >
          {props.Text}
        </div>
       
      </>
    );
  }
}
export default EditText;

Please help me how do write right code

1. erros Line 40:5: 'google' is not defined no-undef Line 45:25: 'google' is not defined no-undef Line 47:31: 'google' is not defined no-undef Line 51:21: 'google' is not defined no-undef Line 54:5: 'google' is not defined no-undef

Answer 1

If you want to add google input tools you can use below code to add it

// Load the Google Transliteration API
      google.load("elements", "1", {
        packages: "transliteration"
      });
    
      function onLoad() {
        var options = {
          sourceLanguage: 'en',
          destinationLanguage: ['gu', 'ml', 'hi', 'kn', 'ta', 'te'],
          shortcutKey: 'ctrl+m',
          transliterationEnabled: true
        }
    
        // Create an instance on TransliterationControl with the required options.
        var control = new google.elements.transliteration.TransliterationControl(options);
    
        // Enable transliteration in the textfields with the given ids.
        var ids = ["language"];
        control.makeTransliteratable(ids);
    
        // Show the transliteration control which can be used to toggle between English and other destination language.
        control.showControl('translControl');
      }
    
      google.setOnLoadCallback(onLoad);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
  
<textarea name="hi"  rows="6"  id="language" cols="6" style="width:600px;height:70px" ></textarea>

<div id='translControl'></div>

Answer 2

You can use the 'react-transliterate' npm package instead. Here is the link - https://snyk.io/advisor/npm-package/react-transliterate