# General Translation React SDKs (gt-react, gt-next): useTranslations
URL: https://generaltranslation.com/fr/docs/react/reference/hooks/use-translations.mdx
---

title: useTranslations
description: Recherchez des traductions de chaînes de caractères dans un dictionnaire par id avec General Translation gt-react. Référence de l’API pour useTranslations.

---

Le hook `useTranslations` permet de récupérer des traductions de chaînes de caractères depuis le [dictionnaire de traduction](/docs/react/guides/translating-with-dictionaries) à l’aide de leur id. C’est l’alternative basée sur un dictionnaire au composant [`<T>`](/docs/react/reference/components/t) et à [`useGT`](/docs/react/reference/hooks/use-gt).

*Disponible dans `gt-react`, `gt-next`, `gt-tanstack-start` et `gt-react-native`. Les exemples importent depuis `gt-react` ; importez plutôt depuis le package de votre framework.*

## Aperçu [#overview]

Appelez `useTranslations` pour obtenir une fonction de recherche, puis passez-lui l’id d’une entrée.

```tsx
const t = useTranslations(); // récupère la fonction de traduction
t('greeting.hello'); // passe un id pour obtenir une traduction
```

*Remarque : dans `gt-react`, appelez `useTranslations` à l’intérieur d’un [`<GTProvider>`](/docs/react/reference/components/gt-provider), en fournissant un dictionnaire au provider ou lors de l’appel d’initialisation. Dans `gt-next`, cela fonctionne également dans les composants serveur synchrones. Si vous utilisez uniquement `<T>`, vous n’en avez pas besoin.*

## Fonctionnement [#how-it-works]

* **Recherche par id.** La fonction renvoyée récupère une entrée du dictionnaire par id dans le paramètre régional actif. Les variables sont interpolées, mais jamais traduites.
* **Préfixe d’id racine.** Passer un `rootId` ajoute un préfixe à chaque recherche, ce qui est pratique pour travailler dans une section imbriquée du dictionnaire.
* **Objets imbriqués.** La fonction renvoyée fournit une méthode `.obj(id)` pour lire un objet de dictionnaire imbriqué plutôt qu’une simple chaîne.
* **Les id manquants déclenchent une erreur.** Rechercher un id absent du dictionnaire déclenche une erreur.

## Paramètres [#parameters]

| Paramètre            | Description                                               | Type     | Facultatif | Par défaut |
| -------------------- | --------------------------------------------------------- | -------- | ---------- | ---------- |
| [`rootId`](#root-id) | Préfixe appliqué à chaque `id` utilisé pour la recherche. | `string` | Oui        | —          |

### `rootId` [#root-id]

**Type** `string` · **Facultatif**

Préfixe facultatif ajouté à tous les id de recherche, pratique pour travailler avec un sous-ensemble imbriqué du dictionnaire.

## Renvoie [#returns]

**Type** `(id: string, options?: DictionaryTranslationOptions) => string`

Une fonction qui renvoie l’entrée traduite pour l’id fourni. Elle dispose également d’une méthode `.obj(id)` pour lire des objets imbriqués.

| Nom       | Description                              | Type                                                                                         | Facultatif |
| --------- | ---------------------------------------- | -------------------------------------------------------------------------------------------- | ---------- |
| `id`      | L’id de l’entrée à récupérer.            | `string`                                                                                     | Non        |
| `options` | Variables d’interpolation pour l’entrée. | [`DictionaryTranslationOptions`](/docs/react/reference/types/dictionary-translation-options) | Oui        |

## Exemples [#examples]

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

```tsx title="TranslateGreeting.tsx"
import { useTranslations } from 'gt-react';

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

```tsx title="dictionary.ts"
const dictionary = {
  greeting: 'Hello, {userName}!', // [!code highlight]
};
export default dictionary;
```

```tsx title="TranslateGreeting.tsx"
import { useTranslations } from 'gt-react';

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

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

// dictionnaire : { prefix1: { prefix2: { greeting: 'Hello, Bob' } } }
export default function UserDetails() {
  const t = useTranslations('prefix1.prefix2'); // [!code highlight]
  return <p>{t('greeting')}</p>; // résout prefix1.prefix2.greeting
}
```

## Remarques [#notes]

* `useTranslations` accède aux traductions du dictionnaire à partir de leur `id`.
* Dans un composant App Router asynchrone, utilisez plutôt [`getTranslations`](/docs/react/nextjs/reference/functions/get-translations).
* Dans `gt-react`, il doit être utilisé à l’intérieur d’un [`<GTProvider>`](/docs/react/reference/components/gt-provider) lorsqu’un dictionnaire est disponible.
* Consultez le [guide des dictionnaires](/docs/react/guides/translating-with-dictionaries) pour la configuration et les conventions.