InlineTranslationOptions

Aperçu

Le type InlineTranslationOptions est utilisé pour passer des variables aux traductions en ligne et spécifier leur comportement de rendu. Vous pouvez également ajouter un contexte et un identifiant à la traduction. Il est utilisé avec useGT() et getGT() pour passer des variables aux traductions de chaînes en ligne.

Traduction au moment de la compilation : Les variables ne sont pas traduites avec useGT() et getGT(), seulement la chaîne originale. Voir tx() pour traduire des chaînes avec du contenu dynamique.

Référence

Paramètres

Prop	Type	Default
`variables??`	`Record<string, any>`	`undefined`

Description

Prop	Description
`variables`	Un objet où les clés identifient où chaque valeur est mappée dans la chaîne de caractères.
`$context`	Inclure optionnellement `$context` comme variable dans l'objet `variables` pour fournir un contexte pour le contenu (utilisé pour la traduction).
`$id`	Inclure optionnellement `$id` comme variable dans l'objet `variables` pour fournir un identifiant à utiliser avec l'éditeur de traduction.

Exemples

Contexte

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

Component.tsx

import { useGT } from 'gt-next';

const Component = () => {
  const t = useGT();
  return <div>{t('Hello, world!', { $context: 'a formal greeting' })}</div>;
};

Passer des variables

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

Component.tsx

import { useGT } from 'gt-next';

const Component = () => {
  const t = useGT();
  return <div>{t('Hello, {username}! How is your day?', { username: 'Brian123' })}</div>;
};

Utiliser le format de message ICU

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

Component.tsx

import { useGT } from 'gt-next';

const Component = () => {
  const t = useGT();
  return <div>
    { t(
      'Your account balance: {dollars, number, ::currency/USD}!',
      {
        "dollars" : 1000000,
      }
    ) }
  </div>;
};

Consultez la documentation du format de message ICU pour plus d'informations sur le format de message ICU.

Notes

InlineTranslationOptions est utilisé pour les traductions de chaînes de caractères.
L'objet variables transmet des valeurs au texte.
L'objet variablesOptions définit le comportement des variables.

Prochaines étapes

Voir useGT() et getGT() pour plus d'informations sur les traductions de chaînes en ligne.
Voir ICU message format pour plus d'informations sur les options de formatage.

InlineTranslationOptions

Sur cette page