Présentation

Le type InlineTranslationOptions sert à passer des variables aux traductions inline et à définir leur comportement de rendu. Vous pouvez également ajouter du contexte et un identifiant à la traduction. Il s’utilise avec useGT, getGT 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-next';

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

Passage de variables

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

import { useGT } from 'gt-next';

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-next prend en charge le format de message ICU, ce qui vous permet aussi de formater vos variables.

import { useGT } from 'gt-next';

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.

Notes

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

Prochaines étapes

• Consultez useGT et getGT 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.