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

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


## Vue d’ensemble

La fonction `msg` sert à marquer et à encoder les chaînes de caractères pour la traduction.

```jsx
const encodedString = msg('Hello, world!');
```

La chaîne de caractères encodée doit être transmise au Hook [`useMessages`](/docs/react/api/strings/use-messages) pour récupérer les traductions.

<Callout>
  **Encodage :**
  `msg` encode la chaîne de caractères d’entrée ; vous ne pouvez donc pas l’utiliser directement dans JSX ni ailleurs.
  Si vous souhaitez retrouver la chaîne source, vous devez la décoder avec [`decodeMsg`](#decodemsg)
</Callout>


## Décodage [#decodemsg]

Pour retrouver la chaîne de caractères d’origine, vous devez la décoder avec [`decodeMsg`](#decodemsg)

```jsx
import { msg, decodeMsg } from 'gt-react';
const encodedString = msg('Hello, world!');
const decodedString = decodeMsg(encodedString);
console.log(decodedString); // "Hello, world!"
```


## Référence

### Paramètres

| Nom        | Type                                                                           | Description                                                                 |
| ---------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------- |
| `content`  | `string`                                                                       | La chaîne de caractères à encoder.                                          |
| `options?` | [`InlineTranslationOptions`](/docs/react/api/types/inline-translation-options) | Options de traduction permettant de personnaliser le comportement de `msg`. |

### Renvoie

Une chaîne de caractères encodée, dans laquelle les variables interpolées, le cas échéant, sont remplacées par leurs valeurs.

***

## 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.
Le contenu traduit est ensuite servi à vos utilisateurs.
Si aucune traduction n&#39;est trouvée, le contenu d&#39;origine sera utilisé.

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

### Développement

Pendant le développement, la fonction `msg` traduit le contenu à la demande.
C’est utile pour visualiser l’apparence de votre application dans différentes langues.
N’oubliez pas d’ajouter une API key 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 `msg` pour marquer des chaînes de caractères comme traduisibles.

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

const encodedString = msg('Hello, world!');

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

Remarque : &quot;Hello, world!&quot; sera traduit dans la langue préférée de l&#39;utilisateur.


### Utilisation des variables [#variables]

Vous pouvez passer des variables aux traductions du dictionnaire.

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

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

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

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

Remarque : &quot;Alice&quot; ne sera pas traduit dans la langue préférée de l’utilisateur, car il s’agit d’une variable.


### 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 copy
import { msg, useMessages } from 'gt-react';

const encodedString = 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(encodedString)}
    </p>
  );
}
```

<Callout>
  Le format de message ICU est un moyen puissant de formater vos variables.
  Pour en savoir plus, consultez la [documentation sur le format de message ICU](https://unicode-org.github.io/icu/userguide/format_parse/messages/).
</Callout>

***


## Remarques

* La fonction `msg` sert à marquer les chaînes de caractères à traduire.
* La traduction des chaînes de caractères avec `msg` a lieu avant l’exécution, pendant le processus de build (sauf en développement).

## Étapes suivantes

* Consultez [`useMessages`](/docs/react/api/strings/use-messages) pour traduire des chaînes de caractères.