loadTranslations()

Aperçu

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, vos traductions seront stockées dans le GT CDN. Vous pouvez spécifier une fonction loadTranslations() pour obtenir les traductions à partir d'une source différente, telle que :

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

Nous avons intégré la prise en charge 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érence

Paramètres

Description

Retourne

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 l'assigner comme 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 des traductions à partir de fichiers locaux

Lorsqu'il est configuré pour utiliser les 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 des traductions depuis votre propre 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 façon dont les traductions sont chargées dans votre application en production.
• Son cas d'utilisation le plus courant est d'ajouter des traductions locales

Prochaines étapes

• Découvrez pourquoi vous pourriez vouloir utiliser les traductions locales