Présentation

La fonction loadTranslations est le principal moyen de personnaliser le 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 dans le CDN de GT (réseau de diffusion de contenu). 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 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 la locale donnée.

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 les local translations, 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 propre CDN (réseau de diffusion de contenu)

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 {};
  }
};

Remarques

• loadTranslations vous permet de personnaliser la façon dont les traductions sont chargées dans votre application en production.
• Son cas d’usage le plus courant consiste à ajouter des local translations

Prochaines étapes