OptionsDeTraductionEnLigne

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() pour passer des variables aux traductions de chaînes en ligne.

Traduction au moment de la construction : Les traductions useGT() se produisent au moment de la construction ; cependant, les variables ne sont jamais traduites. Au lieu de cela, elles sont insérées dans la traduction avec un formatage. Assurez-vous de suivre le guide de déploiement ici.

Référence

Paramètres

Prop	Type	Default
`context??`	`string`	`undefined`
`id??`	`string`	`undefined`
`variables??`	`Record<string, any>`	`undefined`
`variablesOptions??`	`Record<string, Intl.NumberFormatOptions \| Intl.DateTimeFormatOptions>`	`undefined`

Description

Prop	Description
`context`	Le contexte du contenu (utilisé pour la traduction).
`id`	Un identifiant optionnel à utiliser avec l'éditeur de traduction.
`variables`	Un objet où les clés identifient où chaque valeur est mappée dans la chaîne.
`variablesOptions`	Un objet où les clés identifient la variable et les valeurs définissent le comportement des variables. Voir `Intl.NumberFormatOptions` et `Intl.DateTimeFormatOptions` pour plus d'informations.

Exemples

Contexte

Afin d'ajouter du contexte à la chaîne, nous utilisons la prop context.

Component.tsx

import { useGT } from 'gt-react';
 
const Component = () => {
  const t = useGT();
  return <div>{t('Bonjour, le monde!', { context: 'une salutation formelle' })}</div>;
};

Passage de variables

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

Component.tsx

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

Ajout d'options de variables

Vous pouvez également personnaliser la façon dont vos variables s'affichent avec la prop variablesOptions.

Component.tsx

import { useGT } from 'gt-react';
 
const Component = () => {
  const t = useGT();
  return <div>
    { t(
      'Solde de votre compte : {account-balance}!',
      {
        variables: { "account-balance" : 1000000 },
        variableOptions: { "account-balance": { style: 'currency', currency: 'USD' } }
      }
    ) }
  </div>;
};

Notes

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

Prochaines étapes

Voir useGT() pour plus d'informations sur les traductions de chaînes en ligne.
Voir Intl.NumberFormatOptions et Intl.DateTimeFormatOptions pour plus d'informations sur les options de formatage.

OptionsDeTraductionEnLigne

Sur cette page