# gt-react: General Translation React SDK: useMessages
URL: https://generaltranslation.com/fr/docs/react/api/strings/use-messages.mdx
---
title: useMessages
description: Référence API de la fonction useMessages() de traduction de chaînes de caractères
---

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


## Vue d’ensemble

La fonction `useMessages` est un Hook qui permet de traduire les chaînes de caractères encodées de `msg` lors du build.

```jsx
const m = useMessages();

<p>{m(encodedString)}</p>;
```

<Callout>
  **Traduction au build :** les traductions `useMessages` ont lieu au build,
  avant le déploiement de votre application. Vous pouvez transmettre des chaînes encodées via `msg`, et elles seront
  traduites dans la langue préférée de l’utilisateur.
</Callout>

## Référence

### Paramètres

Aucun

### Renvoie

Une fonction de rappel, `m`, qui traduit le contenu encodé fourni par `msg`.

```jsx
(encodedContent: string, options?: Record<string, any>) => string
```

| Nom              | Type                  | 说明                                                                                  |
| ---------------- | --------------------- | ----------------------------------------------------------------------------------- |
| `encodedContent` | `string`              | Le contenu encodé de la chaîne de caractères issu de `msg` à traduire.              |
| `options?`       | `Record<string, any>` | Paramètres facultatifs permettant de transmettre des variables à la chaîne encodée. |

***


## Comportement

### Production

Pendant le processus de CD, tout contenu placé dans une fonction `msg` sera traduit avant le déploiement de votre application.
Cela garantit des temps de chargement rapides pour tous les paramètres régionaux, mais ne permet de traduire que le contenu connu au moment du build.

Une fois générées, les traductions sont soit (1) stockées dans le CDN, soit (2) stockées dans les artefacts de build de votre application, selon votre configuration.
Le contenu traduit est ensuite servi à vos utilisateurs.
Si aucune traduction n&#39;est trouvée, le contenu d&#39;origine sera utilisé par défaut.

Veillez à suivre le [guide de déploiement disponible ici](/docs/react/tutorials/quickdeploy).

### Développement

Pendant le développement, la fonction `m` traduit le contenu on-demand.
C&#39;est utile pour prototyper l&#39;apparence de votre application dans différentes langues.
N&#39;oubliez pas d&#39;ajouter une clé API de développement à votre environnement pour activer ce comportement.

Vous constaterez un délai lors de la traduction on-demand en développement.
Cela ne se produira pas dans les builds de production, sauf si du contenu est explicitement traduit on-demand.

***

## Exemple

### Utilisation de base

Vous pouvez utiliser `useMessages` pour traduire les chaînes de caractères encodées par `msg`.

```jsx copy
import { msg, useMessages } from 'gt-react';

const encodedGreeting = msg('Hello, Alice!');

export default function TranslateGreeting() {
  const m = useMessages();

  return <p>{m(encodedGreeting)}</p>;
}
```

Remarque : &quot;Alice&quot; sera traduit dans la langue préférée de l’utilisateur.


### Utiliser des variables [#variables]

Vous pouvez transmettre des variables à des chaînes de caractères encodées.

```jsx copy
import { msg, useMessages } from 'gt-react';

const encodedGreeting = msg('Hello, {name}!');

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })}{' '}
      {/* Ceci affichera "Hello, Bob!" */}
    </p>
  );
}
```


### Les variables `msg` priment sur les variables `m`

Lorsque vous passez des variables à la fois à `msg` et à `m`, celles passées à `msg` priment sur celles passées à `m`.

```jsx copy
import { msg, useMessages } from 'gt-react';

const encodedGreeting = msg('Hello, {name}!', { name: 'Alice' });

export default function TranslateGreeting() {
  const m = useMessages();
  return <p>{m(encodedGreeting, { name: 'Bob' })}</p>;
}
```

Remarque : ceci affichera &quot;Hello, Alice!&quot; - la variable n&#39;est pas redéfinie au moment du rendu.


### Utilisation du format de message ICU

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

```jsx copy
import { msg, useMessages } from 'gt-react';

const encodedMessage = msg(
  'There are {count, plural, =0 {no items} =1 {one item} other {{count} items}} in the cart',
  { count: 10 }
);

export default function TranslateGreeting() {
  const m = useMessages();
  return <p>{m(encodedMessage)}</p>;
}
```

<Callout>
  Le format de message ICU est un moyen puissant de mettre en forme vos variables. Pour plus
  d’informations, consultez la [documentation du format de message
  ICU](https://unicode-org.github.io/icu/userguide/format_parse/messages/).
</Callout>


### Import depuis `gt-react`

Si vous utilisez la directive `"use client"`, vous devez importer depuis `gt-react` plutôt que depuis `gt-react`.

```jsx copy
'use client';
import { msg, useMessages } from 'gt-react';

const encodedGreeting = msg('Hello, Alice!');

export default function TranslateGreeting() {
  const m = useMessages();

  return <p>{m(encodedGreeting)}</p>;
}
```

***


## Remarques

* La fonction `useMessages` est un Hook qui traduit les chaînes de caractères encodées par `msg`.
* La traduction des chaînes de caractères avec `useMessages` a lieu avant l’exécution, pendant le processus de build (sauf en développement).

## Étapes suivantes

* Consultez [`msg`](/docs/react/api/strings/msg) pour encoder des chaînes de caractères en vue de leur traduction.