Présentation

La fonction useGT est un hook qui permet de traduire des chaînes lors de la génération.

const t = useGT();

<p>{  t('Ce texte sera traduit')  }</p>;

Références

Paramètres

Aucun

Renvoie

Une fonction de rappel, t, qui traduit le contenu fourni.

(content: string, options?: InlineTranslationOptions) => string

Comportement

Production

Pendant le processus de CD (Continuous Delivery/Déploiement continu), tout contenu à l’intérieur d’une fonction t est traduit avant le déploiement de votre application. Cela garantit des temps de chargement rapides pour tous les locales, mais ne peut traduire que le contenu connu au moment du build.

Une fois générées, les traductions sont soit (1) stockées dans le CDN (Content Delivery/Distribution Network), soit (2) incluses dans le build de votre application, selon votre configuration. À partir de là, le contenu traduit est diffusé à vos utilisateurs. Si une traduction est introuvable, on revient au contenu d’origine.

Assurez-vous de suivre le guide de déploiement ici.

Développement

Pendant le développement, la fonction t traduira le contenu à la demande. C’est utile pour prototyper l’apparence de votre application dans différentes langues. N’oubliez pas d’ajouter une clé d’API de développement à votre environnement pour activer ce comportement.

Vous constaterez un délai lors des traductions à la demande en développement. Cela ne se produira pas lors des builds de production.

Exemple

Utilisation basique

Vous pouvez utiliser useGT pour traduire des chaînes de caractères.

import { useGT } from 'gt-react';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('Bonjour, Alice !')}
    </p>
  );
}

Remarque : « Alice » sera traduit dans la langue préférée de l’utilisateur.

Utilisation des variables

Vous pouvez passer des variables aux traductions du dictionary.

import { useGT } from 'gt-react';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('Bonjour, {name} !', { name: 'Alice' })}
    </p>
  );
}

Remarque : « Alice » ne sera pas traduite dans la langue préférée de l’utilisateur, car il s’agit d’une variable.

Utilisation du format de message ICU

gt-react prend en charge le format de message ICU, ce qui vous permet également de formater vos variables.

import { useGT } from 'gt-react';

export default function TranslateGreeting() {
  const t = useGT();
  return (
    <p>
      {t('Il y a {count, plural, =0 {aucun article} =1 {un article} other {{count} articles}} dans le panier', { count: 10 })}
    </p>
  );
}

Notes

• La fonction useGT est un hook pour traduire des chaînes.
• Le hook useGT ne peut être utilisé qu’à l’intérieur d’un composant enveloppé par un composant <GTProvider>.
• Les traductions avec useGT sont effectuées avant l’exécution, durant le processus de build (sauf en développement).

Prochaines étapes

• Consultez useTranslations pour traduire des chaînes à l'aide d'un dictionary.