Google Translate in SPFx

This article explains how to integrate Google Translate into a SharePoint Framework (SPFx) web part to perform real-time translation.
By combining Fluent UI and the translate library, you can quickly create an interactive web part that translates user-entered text to any selected language.

⚙️ Install Dependencies

Install required packages:

npm install translate --save
npm install office-ui-fabric-react --save

🧩 Update the React Component

Open the component file (e.g., SpfxGoogletranslate.tsx) and replace it with the following implementation:

import * as React from 'react';
import styles from './SpfxGoogletranslate.module.scss';
import { ISpfxGoogletranslateProps } from './ISpfxGoogletranslateProps';
import translate from 'translate';
import { Stack, IStackProps, IStackStyles } from 'office-ui-fabric-react/lib/Stack';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { IDropdownOption, Dropdown } from 'office-ui-fabric-react';

const stackStyles: Partial<IStackStyles> = { root: { width: 650 } };
const stackTokens = { childrenGap: 50 };
const columnProps: Partial<IStackProps> = { tokens: { childrenGap: 15 }, styles: { root: { width: 300 } } };
const smallcolumnProps: Partial<IStackProps> = { tokens: { childrenGap: 15 }, styles: { root: { width: 180 } } };

// Language options
const languages: IDropdownOption[] = [
  { key: '', text: 'Select a language' },
  { key: 'af', text: 'Afrikaans' },
  { key: 'sq', text: 'Albanian' },
  { key: 'am', text: 'Amharic' },
  { key: 'ar', text: 'Arabic' },
  { key: 'hy', text: 'Armenian' },
  { key: 'az', text: 'Azerbaijani' },
  { key: 'eu', text: 'Basque' },
  { key: 'bn', text: 'Bengali' },
  { key: 'bg', text: 'Bulgarian' },
  { key: 'ca', text: 'Catalan' },
  { key: 'zh', text: 'Chinese (Simplified)' },
  { key: 'hr', text: 'Croatian' },
  { key: 'cs', text: 'Czech' },
  { key: 'da', text: 'Danish' },
  { key: 'nl', text: 'Dutch' },
  { key: 'en', text: 'English' },
  { key: 'et', text: 'Estonian' },
  { key: 'fi', text: 'Finnish' },
  { key: 'fr', text: 'French' },
  { key: 'de', text: 'German' },
  { key: 'el', text: 'Greek' },
  { key: 'gu', text: 'Gujarati' },
  { key: 'he', text: 'Hebrew' },
  { key: 'hi', text: 'Hindi' },
  { key: 'hu', text: 'Hungarian' },
  { key: 'is', text: 'Icelandic' },
  { key: 'id', text: 'Indonesian' },
  { key: 'it', text: 'Italian' },
  { key: 'ja', text: 'Japanese' },
  { key: 'kn', text: 'Kannada' },
  { key: 'ko', text: 'Korean' },
  { key: 'lv', text: 'Latvian' },
  { key: 'lt', text: 'Lithuanian' },
  { key: 'ml', text: 'Malayalam' },
  { key: 'mr', text: 'Marathi' },
  { key: 'ne', text: 'Nepali' },
  { key: 'no', text: 'Norwegian' },
  { key: 'pl', text: 'Polish' },
  { key: 'pt', text: 'Portuguese' },
  { key: 'pa', text: 'Punjabi' },
  { key: 'ro', text: 'Romanian' },
  { key: 'ru', text: 'Russian' },
  { key: 'sr', text: 'Serbian' },
  { key: 'si', text: 'Sinhala' },
  { key: 'sk', text: 'Slovak' },
  { key: 'sl', text: 'Slovenian' },
  { key: 'es', text: 'Spanish' },
  { key: 'sw', text: 'Swahili' },
  { key: 'sv', text: 'Swedish' },
  { key: 'ta', text: 'Tamil' },
  { key: 'te', text: 'Telugu' },
  { key: 'th', text: 'Thai' },
  { key: 'tr', text: 'Turkish' },
  { key: 'uk', text: 'Ukrainian' },
  { key: 'ur', text: 'Urdu' },
  { key: 'vi', text: 'Vietnamese' },
];

interface ISpfxGoogletranslateState {
  toLanguage: string;
  content: string;
  userinput: string;
}

export default class SpfxGoogletranslate extends React.Component<ISpfxGoogletranslateProps, ISpfxGoogletranslateState> {
  constructor(props: ISpfxGoogletranslateProps, state: ISpfxGoogletranslateState) {
    super(props);
    this.state = { toLanguage: '', content: '', userinput: '' };
  }

  private async _translate() {
    if (!this.state.userinput || !this.state.toLanguage) return;
    const result = await translate(this.state.userinput, { to: this.state.toLanguage, engine: 'google', key: 'YOUR_GOOGLE_API_KEY' });
    this.setState({ content: result });
  }

  public render(): React.ReactElement<ISpfxGoogletranslateProps> {
    return (
      <div className={styles.spfxGoogletranslate}>
        <Stack horizontal tokens={stackTokens} styles={stackStyles}>
          <Stack {...columnProps}>
            <TextField
              label="Enter text in English"
              multiline
              autoAdjustHeight
              onChanged={(newtext) => { this.setState({ userinput: newtext }); this._translate(); }}
            />
          </Stack>
          <Stack {...smallcolumnProps}>
            <Dropdown
              placeholder="Select a language"
              label="Select Language"
              options={languages}
              onChanged={(value) => { this.setState({ toLanguage: value.key.toString() }); this._translate(); }}
            />
          </Stack>
          <Stack {...columnProps}>
            <label>{this.state.content}</label>
          </Stack>
        </Stack>
      </div>
    );
  }
}

🔑 Get Google Cloud API Key

Visit Google Cloud Console.
Create a new project and enable the Cloud Translation API.
Generate an API Key from the Credentials tab.
Replace YOUR_GOOGLE_API_KEY in the code above with your actual key.

🚀 Build and Deploy the Solution

To package and deploy your SPFx web part:

gulp build
gulp bundle --ship
gulp package-solution --ship

Upload the .sppkg file to your App Catalog, deploy, and add the web part to a modern page.

📂 GitHub Sample Project

View full SPFx project on GitHub:Google Translate in SPFx

GitHub

✅ Summary

This SPFx web part demonstrates how to integrate Google Translate API with a modern React UI using Fluent UI components.
It’s ideal for multilingual SharePoint sites, offering real-time translations in a clean and interactive way.