Vue d’ensemble

Le type InlineTranslationOptions permet de passer des variables aux traductions inline et d’en définir le comportement de rendu. Vous pouvez également ajouter du contexte et un identifiant à la traduction. Il est utilisé avec useGT et msg pour passer des variables aux traductions de chaînes inline.

Références

Paramètres

Description

Exemples

Contexte

Pour ajouter du contexte à la chaîne, nous utilisons la prop $context.

import { useGT } from 'gt-react';

const Component = () => {
  const t = useGT();
  return (
    <div>{t('Bonjour, monde !', { $context: 'une salutation formelle' })}</div>
  );
};

Passage de variables

Pour ajouter une variable à la chaîne, nous utilisons la syntaxe {variable-name}, où des accolades entourent le nom de la variable.

import { useGT } from 'gt-react';

const Component = () => {
  const t = useGT();
  return (
    <div>
      {t('Bonjour {username} ! Comment se passe ta journée ?', {
        username: 'Brian123',
      })}
    </div>
  );
};

Utiliser le format de message ICU

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

import { useGT } from 'gt-react';

const Component = () => {
  const t = useGT();
  return (
    <div>
      {t('Solde de votre compte : {dollars, number, ::currency/USD} !', {
        dollars: 1000000,
      })}
    </div>
  );
};

Voir la documentation du format de message ICU pour en savoir plus sur le format de message ICU.

Notes

• InlineTranslationOptions est utilisé pour les traductions de chaînes inline.
• L’objet variables transmet des valeurs au texte.
• L’objet variablesOptions définit le comportement des variables.

Prochaines étapes

• Consultez useGT pour en savoir plus sur les traductions de chaînes en ligne.
• Consultez le format de message ICU pour en savoir plus sur les options de formatage.