Making site multi language support using google translate for React js

user_4333668 0
Viewed 5656

For simple html projects i can simple refer this link.

https://www.w3schools.com/howto/howto_google_translate.asp

But I'm trying to implement in react app . So I'm not able to replicate the code in react app. 

componentDidMount() {
  googleTranslateElementInit(() => {
    new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
    });
    const script = document.createElement("script");
    script.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
    script.async = true;
    document.body.appendChild(script);
}

And return render element . 

  render() {
    return (
      <div id="google_translate_element"></div>
    );
  }

This is showing me error saying google , googleTranslateElementInit is not defined.

How can I use google translator in react app ? Also is there any npm packages which can translate whole site ?

Thanks

reactjs google-translate javascript
4 Answers

Move your google translate script to the root index.html of your project.

However, you should leave the below code at your desired location:

render() {
    return (
      <div id="google_translate_element"></div>
    );
  }

Fixes the problem easily.

user_78011020

For those in 2021 and hopefully a few more years before Google decides to change implementation method, this is how I resolved it.

Add the below script to your index.html file found in the public directory:

<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" async></script>
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement(
      {
        pageLanguage: "en",
        layout: window.google.translate.TranslateElement.InlineLayout.VERTICAL,
      }, 
      'google_translate_element'
    );
  }
</script>

Then, create a component, to be imported anywhere you want to use the translate plugin, with any name of your choice. I will use GoogleTranslate.jsx for this purpose of this answer.

In the newly created component, paste this code:

import React, { useEffect } from "react";

const GoogleTranslate = () => {
  useEffect(() => {
    // in some cases, the google translate script adds a style to the opening html tag.
    // this added style disables scrolling.
    // the next 3 lines removes this added style in order to re-enable scrolling.
    if (window.document.scrollingElement.hasAttribute("style")) {
      window.document.scrollingElement.setAttribute("style", "");
    }
  });

  return (
    <div id="google_translate_element"></div>
  );
};

export default GoogleTranslate;

Import the component wherever you want to use the translate plugin.

If this solution worked for you, kindly up vote so it can easily be shown to others searching. If it didn't, don't hesitate to drop a comment

user_58001570

Go to public folder > index.html

add code in body tag

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

create component

import React from 'react';
import './style.css';

const GoogleTranslate = (props) => {

    return(
        <div id="google_translate_element"></div>
    )
}

export default GoogleTranslate

import GoogleTranslate from './GoogleTranslate';

<GoogleTranslate />
user_18873780
Related