Types

DictionaryTranslationOptions

Référence de l’API pour le type DictionaryTranslationOptions

Vue d’ensemble

Le type DictionaryTranslationOptions est utilisé pour passer des variables aux entrées du dictionary et préciser leur comportement de rendu. Il est utilisé avec useTranslations pour transmettre des variables aux entrées du dictionary.

Buildtime Translation : Les traductions via useTranslations sont effectuées au moment du build ; toutefois, les variables ne sont jamais traduites. Elles sont insérées dans la traduction avec un formatage. Assurez-vous de suivre le guide de déploiement.

Références

Paramètres

Prop

Type

Description

PropDescription
variablesUn objet dont les clés indiquent où chaque valeur est associée dans l’Entry du dictionary.

Exemples

Transmission de variables

Pour transmettre une variable à l’entrée du dictionary, nous devons faire deux choses : (1) ajouter une variable à l’entrée et (2) faire référence à cette variable dans l’appel à d.

D’abord, nous ajoutons une variable à l’entrée du dictionary avec la syntaxe suivante : {username}. username est le nom de la variable.

dictionary.ts
const dictionary = {
  greeting: {
    hello: 'Bonjour, {username} !',
  },
};

export default dictionary;

Ensuite, nous référencions la variable :

Component.tsx
import { useTranslations } from 'gt-react';

const Component = () => {
  const d = useTranslations();
  return <div>{d('greeting.hello', { username: 'Brian123' })}</div>;
};

Utilisation du format de message ICU

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

dictionary.ts
const dictionary = {
  account: {
    balance: 'Solde de votre compte : {dollars, number, ::currency/USD} !',
  },
};

export default dictionary;

Ensuite, nous référencerons la variable :

Component.tsx
import { useTranslations } from 'gt-react';

const Component = () => {
  const d = useTranslations();
  return <div>
    { d(
      'account.balance',
      {
        "dollars" : 1000000,
      }
    ) }
  </div>;
};

Remarques

  • L’objet variables transmet des valeurs à une Entry du dictionary.
  • L’objet variablesOptions définit le comportement des variables.

Prochaines étapes

  • Consultez dictionaries pour en savoir plus sur les dictionaries et les pratiques courantes.
  • Consultez useTranslations pour plus d’informations sur l’interface des dictionaries.
  • Consultez le ICU message format pour plus d’informations sur les options de formatage.

Que pensez-vous de ce guide ?

DictionaryTranslationOptions