# gt-react: General Translation React SDK: DictionaryTranslationOptions
URL: https://generaltranslation.com/fr/docs/react/api/types/dictionary-translation-options.mdx
---
title: DictionaryTranslationOptions
description: Référence de l’API pour le type DictionaryTranslationOptions
---

{/* GÉNÉRÉ AUTOMATIQUEMENT : ne modifiez pas directement. Modifiez plutôt le modèle dans content/docs-templates/. */}


## Vue d’ensemble

Le type `DictionaryTranslationOptions` sert à transmettre des variables aux entrées du dictionnaire et à définir leur comportement de rendu.
Il s’utilise avec [`useTranslations`](/docs/react/api/dictionary/use-translations) pour transmettre des variables aux entrées du dictionnaire.

<Callout>
  **Traduction au moment de la compilation :**
  Les traductions `useTranslations` ont lieu au moment de la compilation ; les variables, elles, ne sont jamais traduites.
  Elles sont plutôt insérées dans la traduction avec leur mise en forme.
  Veillez à suivre le [guide de déploiement ici](/docs/react/tutorials/quickdeploy).
</Callout>

## Référence

### Paramètres

<TypeTable
  type={{
  "variables?": {
      type: 'Record<string, any>',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Description

| Prop        | Description                                                                                                 |
| ----------- | ----------------------------------------------------------------------------------------------------------- |
| `variables` | Un objet dont les clés indiquent à quel emplacement chaque valeur correspond dans l’entrée du dictionnaire. |

***

## Exemples

### Passage de variables

Pour transmettre une variable à une entrée du dictionnaire, nous devons faire deux choses : (1) ajouter une variable à l’entrée et (2) faire référence à cette variable dans l’appel de [`d`](/docs/react/api/dictionary/use-translations).

Commencez par ajouter une variable à l’entrée du dictionnaire avec la syntaxe suivante : `{username}`.
`username` est le nom de la variable.

```jsx title="dictionary.ts"
// [!code word:username]
const dictionary = {
  greeting: {
    hello: 'Hello, {username}!',
  },
};

export default dictionary;
```

Ensuite, nous faisons référence à la variable :

```jsx title="Component.tsx"
// [!code word:username]
import { useTranslations } from 'gt-react';

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


### Utiliser le format de message ICU

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

```jsx title="dictionary.ts"
// [!code word:account-balance]
const dictionary = {
  account: {
    balance: 'Your account balance: {dollars, number, ::currency/USD}!',
  },
};

export default dictionary;
```

Ensuite, nous faisons référence à la variable :

```jsx title="Component.tsx"
// [!code word:account-balance]
import { useTranslations } from 'gt-react';

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

***


## Remarques

* L’objet `variables` transmet des valeurs à une entrée du dictionnaire.
* L’objet `variablesOptions` définit le comportement des variables.

## Étapes suivantes

* Consultez [dictionaries](/docs/react/guides/dictionaries) pour en savoir plus sur les dictionnaires et les pratiques courantes.
* Consultez [`useTranslations`](/docs/react/api/dictionary/use-translations) pour en savoir plus sur l’interface des dictionnaires.
* Consultez [`ICU message format`](https://unicode-org.github.io/icu/userguide/format_parse/messages/) pour en savoir plus sur les options de formatage.