# react-native: useMessages
URL: https://generaltranslation.com/fr/docs/react-native/api/strings/use-messages.mdx
---
title: useMessages
description: Référence de l’API pour la fonction useMessages() de traduction de chaînes
---

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


## Vue d’ensemble

La fonction `useMessages` est un hook qui permet de traduire les chaînes encodées de `msg` pendant le build.

```jsx
const m = useMessages();

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

<Callout>
  **Traduction au build :** les traductions `useMessages` s’effectuent au build,
  avant le déploiement de votre application. Vous pouvez passer des chaînes encodées via `msg`, et elles seront
  traduites dans la langue préférée de l&#39;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                  | Description                                                           |
| ---------------- | --------------------- | --------------------------------------------------------------------- |
| `encodedContent` | `string`              | Le contenu de la chaîne encodée provenant de `msg`, à traduire.       |
| `options?`       | `Record<string, any>` | Paramètres facultatifs pour passer 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 la sortie de build de votre application, selon votre configuration.
Elles sont ensuite servies à 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 ici](/docs/react-native/tutorials/quickdeploy).

### Développement

Pendant le développement, la fonction `m` traduira le contenu à la demande.
C’est utile pour visualiser l’apparence de votre application dans différentes langues.
N’oubliez pas d’ajouter une clé d’API de développement à votre environnement pour activer ce comportement.

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

***

## Exemple

### Utilisation de base

Vous pouvez utiliser `useMessages` pour traduire des chaînes encodées issues de `msg`.

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

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&#39;utilisateur.


### Utiliser des variables [#variables]

Vous pouvez transmettre des variables aux chaînes encodées.

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

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` remplacent celles de `m`

Lorsque vous transmettez des variables à la fois à `msg` et à `m`, celles fournies à `msg` remplacent celles fournies à `m`.

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

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

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

Remarque : cela affichera &quot;Hello, Alice!&quot; — la variable n’est pas redéfinie au moment du rendu.


### Utiliser le format de message ICU

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

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

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 formater vos variables. Pour plus
  d’informations, consultez la [documentation sur le format de message
  ICU](https://unicode-org.github.io/icu/userguide/format_parse/messages/).
</Callout>


### Importer depuis `gt-react-native`

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

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

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 encodées par `msg`.
* La traduction des chaînes avec `useMessages` s’effectue avant l’exécution, pendant le processus de build (sauf en développement).

## Étapes suivantes

* Voir [`msg`](/docs/react-native/api/strings/msg) pour encoder des chaînes à traduire.