Girraj
Girraj

Reputation: 41

how to used google-input-tool in react js

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

Upvotes: 0

Views: 447

Answers (1)

Mohanish Saim
Mohanish Saim

Reputation: 23

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

Upvotes: 0

Related Questions