Mirror of https://github.com/roostorg/coop
github.com/roostorg/coop
1import React, { useEffect } from 'react';
2
3declare global {
4 interface Window {
5 googleTranslateElementInit: () => void;
6 google: any;
7 }
8}
9
10const initializeGoogleTranslate = () => {
11 return new window.google.translate.TranslateElement(
12 {
13 pageLanguage: 'auto',
14 includedLanguages: 'en',
15 layout: window.google.translate.TranslateElement.InlineLayout.SIMPLE,
16 },
17 'google_translate_element',
18 );
19};
20
21const loadGoogleTranslateScript = (callback: () => void) => {
22 const existingScript = document.getElementById('google-translate-script');
23
24 if (!existingScript) {
25 const script = document.createElement('script');
26 script.src =
27 '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
28 script.id = 'google-translate-script';
29 document.body.appendChild(script);
30
31 script.onload = () => {
32 if (typeof callback === 'function') callback();
33 };
34 } else if (existingScript && callback) {
35 callback();
36 }
37};
38
39const GoogleTranslateButton: React.FC = () => {
40 useEffect(() => {
41 window.googleTranslateElementInit = () => {
42 if (window.google && window.google.translate) {
43 initializeGoogleTranslate();
44 }
45 };
46
47 loadGoogleTranslateScript(() => {
48 if (window.google && window.google.translate) {
49 window.googleTranslateElementInit();
50 }
51 });
52
53 return () => {
54 const script = document.getElementById('google-translate-script');
55 if (script) {
56 script.remove();
57 }
58 };
59 }, []);
60
61 return (
62 <div>
63 <div id="google_translate_element"></div>
64 </div>
65 );
66};
67
68export default GoogleTranslateButton;