# gt-react: General Translation React SDK: useMessages
URL: https://generaltranslation.com/it/docs/react/api/strings/use-messages.mdx
---
title: useMessages
description: Riferimento API per la funzione useMessages() per la traduzione delle stringhe
---

{/* GENERATO AUTOMATICAMENTE: Non modificare direttamente. Modifica invece il template in content/docs-templates/. */}


## Panoramica

La funzione `useMessages` è un hook che traduce le stringhe codificate da `msg` in fase di build.

```jsx
const m = useMessages();

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

<Callout>
  **Traduzione in fase di build:** le traduzioni di `useMessages` avvengono in fase di build,
  prima del deployment dell&#39;app. Puoi passare stringhe codificate da `msg`, che verranno
  tradotte nella lingua preferita dell&#39;utente.
</Callout>


## Riferimento

### Parametri

Nessuno

### Restituisce

Una funzione di callback, `m`, che traduce il contenuto codificato fornito da `msg`.

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

| Nome             | Tipo                  | Descrizione                                                         |
| ---------------- | --------------------- | ------------------------------------------------------------------- |
| `encodedContent` | `string`              | La stringa codificata prodotta da `msg` da tradurre.                |
| `options?`       | `Record<string, any>` | Parametri facoltativi per passare variabili alla stringa codificata. |

***


## Comportamento

### Produzione

Durante il processo di CD, qualsiasi contenuto all&#39;interno di una funzione `msg` viene tradotto prima del deployment della tua applicazione.
Questo garantisce tempi di caricamento rapidi per tutte le impostazioni regionali, ma può tradurre solo i contenuti noti nella fase di build.

Una volta generate, le traduzioni vengono (1) memorizzate nella CDN oppure (2) incluse nell&#39;output di build della tua app, in base alla configurazione.
Da lì, il contenuto tradotto viene servito agli utenti.
Se una traduzione non viene trovata, viene usato il contenuto originale.

Assicurati di seguire la [guida al deployment disponibile qui](/docs/react/tutorials/quickdeploy).

### Sviluppo

Durante lo sviluppo, la funzione `m` tradurrà i contenuti on demand.
Questo è utile per fare prototipi e vedere come apparirà la tua app in lingue diverse.
Ricorda di aggiungere una chiave API Dev al tuo ambiente per abilitare questo comportamento.

Durante la traduzione on demand in fase di sviluppo noterai un ritardo.
Questo non accadrà nelle build di produzione, a meno che i contenuti non vengano esplicitamente tradotti on demand.

***

## Esempio

### Utilizzo di base

Puoi usare `useMessages` per tradurre le stringhe codificate con `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>;
}
```

Nota: &quot;Alice&quot; verrà tradotto nella lingua preferita dell&#39;utente.


### Utilizzo delle variabili [#variables]

Puoi passare variabili alle stringhe codificate.

```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' })}{' '}
      {/* Questo visualizzerà "Hello, Bob!" */}
    </p>
  );
}
```


### Le variabili `msg` sovrascrivono le variabili `m`

Quando passi variabili sia a `msg` sia a `m`, quelle passate a `msg` sovrascrivono quelle passate a `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>;
}
```

Nota: verrà visualizzato &quot;Hello, Alice!&quot; - la variabile non viene sovrascritta in fase di rendering.


### Uso del formato dei messaggi ICU

`gt-react` supporta il formato dei messaggi ICU, che consente anche di formattare le variabili.

```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>
  Il formato dei messaggi ICU è un potente strumento per formattare le variabili. Per ulteriori
  informazioni, consulta la [documentazione del formato dei messaggi
  ICU](https://unicode-org.github.io/icu/userguide/format_parse/messages/).
</Callout>


### Importare da `gt-react`

Se usi la direttiva `"use client"`, dovresti importare da `gt-react` anziché da `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>;
}
```

***


## Note

* La funzione `useMessages` è un hook che traduce le stringhe codificate con `msg`.
* La traduzione delle stringhe con `useMessages` avviene prima del runtime, durante il processo di build (tranne che in sviluppo).

## Passaggi successivi

* Consulta [`msg`](/docs/react/api/strings/msg) per codificare le stringhe da tradurre.