loadTranslation()

Overview

The loadTranslation() function is the primary way to customize translation loading behavior.

In production, your translations need to be stored so that they can be rendered in your app. By default, your translations will be stored in the GT CDN. You can specify a loadTranslation() function to get translations from a different source, such as:

• From your app's bundle (most common)
• From a database
• From an API
• From a different CDN

We have integrated support for loading translations from local files in your app's bundle. Follow this guide to set up local translations in your React app.

Reference

Parameters

Description

Returns

A Promise<any> that resolves to either a string or JSX object containing the translations for the given locale.

Setup

You must import the loadTranslation() function and assign it as a prop to the <GTProvider> component.

import loadTranslation from './loadTranslation';
 
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GTProvider locales={['es', 'fr']} loadTranslation={loadTranslation}>
      <App />
    </GTProvider>
  </StrictMode>
);

Examples

Load translations from local files

When configured to use local translations, the gt-react-cli translate command, translations are saved to the ./src/_gt directory.

export default async function loadTranslation(locale) {
  const translations = await import(`./_gt/${locale}.json`);
  return translations;
};

Load translations from your own CDN

export default async function loadTranslation(locale) {
  try {
    const translations = await fetch(`https://your-cdn.com/translations/${locale}.json`);
    const data = await translations.json();
    return data;
  } catch (e) {
    console.error(e);
    return {};
  }
};

Notes

• loadTranslation() gives you the ability to customize how translations are loaded in your app in production.
• Its most common use case is for adding local translations

Next steps

• Learn about why you might want to use local translations