Vue d’ensemble

Le type RuntimeTranslationOptions sert à passer des variables aux traductions inline et à préciser leur mode de rendu. Vous pouvez également ajouter un locale pour indiquer une autre langue pour la traduction. Cela s’utilise avec la fonction tx.

Références

Paramètres

Description

Exemples

Passage de variables

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

import { tx } from 'gt-next/server';

const Component = () => {
  return <div>
    {tx(`Bonjour {username} !`,{ username: 'Brian123' })}
  </div>;
};

Utilisation du format de message ICU

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

import { tx } from 'gt-next/server';

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

Traduction de variables

Pour traduire une variable, incluez-la directement dans la chaîne passée à tx.

import { tx } from 'gt-next/server';

const Component = ({ hairColor }: { hairColor: string }) => {
  return <div>{tx(
    `Bonjour {username} ! Votre couleur de cheveux est ${hairColor}`,
    { username: 'Brian123' }
  )}</div>;
};

Notez que la variable hairColor est traduite, mais que username ne l’est pas.

Spécifier une locale

Vous pouvez spécifier une locale à utiliser pour la traduction.

import { tx } from 'gt-next/server';

const Component = () => {
  return <div>{tx('Hello, world!', { $locale: 'fr' })}</div>;
};

Ce sera toujours traduit en français.

Notes

• RuntimeTranslationOptions est utilisé pour traduire des chaînes à l’exécution.
• L’objet variables transmet des valeurs au texte.
• L’objet variablesOptions définit le comportement des variables.

Prochaines étapes

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