Integrating Azure AI Translator into Your React.js Project: A Step-by-Step Guide

As developers, we’re always seeking ways to enhance user experience and accessibility within our applications. One powerful tool for achieving this goal is the Azure AI Translator, which allows us to seamlessly translate text between languages. In this blog post, we’ll explore how to integrate the Azure AI Translator into a React.js project, enabling multilingual support with minimal effort.

Web Developer Europe | Yuryi Baravy

Step 1: Setting Up Your Azure Account

Before we can start integrating the Azure AI Translator into our project, we need to set up an Azure account and create a Translator resource. Navigate to the Azure portal (https://portal.azure.com/) and follow the prompts to create a new Translator resource. Take note of the generated API key and endpoint URL, as we’ll need these later.

Step 2: Installing Dependencies

Next, let’s install the necessary dependencies for our React.js project. Open your terminal and navigate to your project directory. Use npm or yarn to install the Azure Translator Text package:

npm install @azure-rest/ai-translation-text

OR

yarn add @azure-rest/ai-translation-text

Step 3: Implementing Simple Translation Logic

Now that we have our dependencies installed, let’s implement the translation logic in our React.js project. Create a new file called translator.js and import the necessary modules:

import TextTranslationClient, {
  TranslatorCredential,
  InputTextItem,
  isUnexpected,
} from "@azure-rest/ai-translation-text";

const endpoint = process.env.TRANSLATE_ENDPOINT || "";
const key = process.env.TRANSLATE_KEY || "";
const region = process.env.TRANSLATE_REGION || "";

export default async function translate(text: string, targetLang: string, originLang: string) {
  const translateCedential: TranslatorCredential = {
    key: key,
    region,
  };

  const translationClient = TextTranslationClient(endpoint, translateCedential);

  const translateResponse = await translationClient.path("/translate").post({
    body: [{
      text,
    }],
    queryParameters: {
      from: originLang,
      to: targetLang,
    },
    contentType: "application/json",
  });

  if (isUnexpected(translateResponse)) {
    throw translateResponse.body.error;
  }

  return translateResponse.body;
}

Replace endpoint, keyand apiKey with your Azure Translator resource endpoint URL and API key, respectively.

Step 4: Integrating Translation in Your Components

With our translation logic in place, we can now integrate it into our React components. Let’s say we have a TranslateButton component that triggers translation when clicked:

import React, { useState } from 'react';
import translate from './translator';

function TranslateButton() {
  const [translatedText, setTranslatedText] = useState('');

  async function handleTranslate() {
    const textToTranslate = 'Hello, world!';
    const translated = await translate(textToTranslate, 'fr', 'en'); // Translate to French
    setTranslatedText(translated);
  }

  return (
    <div>
      <button onClick={handleTranslate}>Translate</button>
      <p>Translated Text: {translatedText}</p>
    </div>
  );
}

export default TranslateButton;

Step 5: Testing and Deployment

Finally, test your application locally to ensure that translation functionality works as expected. Once satisfied, deploy your React.js project as usual, ensuring that your Azure Translator resource is properly configured for production use.

Step 6: Check out full example in my Github

Check out this link if you want to dive dipper in the code
https://github.com/Pulitzier/

Conclusion

By following these steps, you can empower your application with multilingual support, enhancing accessibility and user experience for a global audience.

Happy coding!

Need a Web Developer in Europe?Let's Build a Thing