# gt-react: General Translation React SDK: useTranslations
URL: https://generaltranslation.com/fr/docs/react/api/dictionary/use-translations.mdx
---
title: useTranslations
description: Référence de l’API du hook useTranslations
---

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


## Vue d’ensemble

`useTranslations` permet d’accéder aux traductions de chaînes depuis le [dictionnaire de traduction](/docs/react/guides/dictionaries).

Il doit être utilisé dans un composant encapsulé dans un [`<GTProvider>`](/docs/react/api/components/gtprovider).

```jsx
const t = useTranslations(); // Récupère la fonction de traduction
t('greeting.hello'); // passe l'identifiant pour obtenir une traduction
```

<Callout>
  `useTranslations` utilise un [dictionnaire](/docs/react/guides/dictionaries) pour stocker tout le contenu à traduire.
  Cela diffère de l’utilisation du composant [`<T>`](/docs/react/guides/t) pour traduire.
  Si vous souhaitez utiliser uniquement des composants `<T>` pour la traduction, ce document ne vous concerne pas.
</Callout>


## Référence

### Paramètres

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

### Description

| Prop | Description                                                                                                                        |
| ---- | ---------------------------------------------------------------------------------------------------------------------------------- |
| `id` | Préfixe facultatif ajouté devant toutes les clés de traduction. Utile pour travailler avec des valeurs de dictionnaire imbriquées. |

### Renvoie

Une fonction de traduction `d` qui, à partir d’un identifiant, renvoie la version traduite de l’entrée correspondante

```jsx
(id: string, options?: DictionaryTranslationOptions) => React.ReactNode
```

| Nom        | Type                                                                                   | Description                                                               |
| ---------- | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
| `id`       | `string`                                                                               | Identifiant de l’entrée à traduire                                        |
| `options?` | [`DictionaryTranslationOptions`](/docs/react/api/types/dictionary-translation-options) | Options de traduction permettant de personnaliser le comportement de `d`. |

***


## Exemples

### Utilisation de base du dictionnaire

Chaque entrée de votre dictionnaire est traduite.

```jsx title="dictionary.jsx" copy
const dictionary = {
  greeting: "Hello, Bob", // [!code highlight]
};
export default dictionary;
```

Lorsque vous souhaitez accéder à ces entrées, appelez `useTranslations`.
Cette fonction renvoie une fonction qui prend la clé d’une traduction dans le dictionnaire.

Vous devez transmettre le dictionnaire au composant `GTProvider`.

```jsx title="TranslateGreeting.jsx" copy
import { useTranslations } from 'gt-react';
import dictionary from "./dictionary.json"

export default function TranslateGreeting() {
  const t = useTranslations(); // [!code highlight]
  return (
    <GTProvider dictionary={dictionary}>
      <p>
        {t('greeting')} // [!code highlight]
      </p>
    </GTProvider>
  );
}
```


### Utiliser des variables [#variables]

Pour transmettre des valeurs, vous devez (1) attribuer un identifiant et (2) référencer cet identifiant lors de l’appel de la fonction `d`.

Dans cet exemple, nous utilisons `{}` pour transmettre des variables aux traductions.
Dans le dictionnaire, nous attribuons l’identifiant `{userName}`.

```jsx title="dictionary.jsx" copy
// [!code word:userName]
const dictionary = {
  greeting: "Bonjour, {userName} !", // [!code highlight]
};
export default dictionary;
```

```jsx title="TranslateGreeting.jsx" copy
// [!code word:userName]
import { useTranslations } from 'gt-react';

export default function TranslateGreeting() {
  const t = useTranslations();
  
  // Bonjour Alice !
  const greetingAlice = t('greeting', { userName: "Alice" }); // [!code highlight]

  return (
    <p>
      {greetingAlice} // Bonjour, Alice // [!code highlight]
    </p>
  );
}
```


### Utilisation des préfixes

Vous pouvez utiliser des préfixes pour ne traduire qu’une partie du dictionnaire.

```jsx title="dictionary.jsx" copy
const dictionary = {
  prefix1: { // [!code highlight]
    prefix2: { // [!code highlight]
      greeting: "Hello, Bob",
    }
  }
};
export default dictionary;
```

Comme nous avons ajouté la valeur `'prefix1.prefix2'` au hook `useTranslations`, toutes les clés sont précédées de `prefix1.prefix2` :

```jsx title="UserDetails.jsx" copy
import { useTranslations } from 'gt-react';

export default function UserDetails() {
  const t = useTranslations('prefix1.prefix2'); // [!code highlight]
  return (
    <div>
      <p>{t('greeting')}</p> // greeting => prefix1.prefix2.greeting // [!code highlight]
    </div>
  );
}
```

***


## Remarques

* La fonction `useTranslations` vous permet d’accéder aux traductions du dictionnaire.
* Le hook `useTranslations` ne peut être utilisé qu’au sein d’un composant encapsulé dans un [`<GTProvider>`](/docs/react/api/components/gtprovider).

## Étapes suivantes