Vue d’ensemble

La fonction loadTranslations est le principal moyen de personnaliser le comportement de chargement des traductions.

En production, vos traductions doivent être stockées afin de pouvoir être affichées dans votre application. Par défaut, elles sont stockées sur le GT CDN. Vous pouvez définir une fonction loadTranslations pour récupérer les traductions depuis une autre source, par exemple :

• Depuis le bundle de votre application (le plus courant)
• Depuis une base de données
• Depuis une API
• Depuis un autre CDN

Nous proposons une prise en charge intégrée du chargement des traductions à partir de fichiers locaux présents dans le bundle de votre application. Suivez ce guide pour configurer des traductions locales dans votre application React.

Références

Paramètres

Description

Renvoie

Une Promise<any> qui se résout en une chaîne de caractères ou un objet JSX contenant les traductions pour le locale donné.

Configuration

Vous devez importer la fonction loadTranslations et la passer en prop au composant <GTProvider>.

import loadTranslations from './loadTranslations';

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

Exemples

Charger les traductions depuis des fichiers locaux

Lorsqu’il est configuré pour utiliser des traductions locales, la commande gtx-cli translate enregistre les traductions dans le répertoire ./src/_gt.

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

Charger les traductions depuis votre CDN

export default async function loadTranslations(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

• loadTranslations vous permet de personnaliser la manière dont les traductions sont chargées dans votre application en production.
• Son cas d’usage le plus fréquent consiste à ajouter des traductions locales

Étapes suivantes