Panoramica

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

const m = useMessages();

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

Riferimenti

Parametri

Nessuno

Restituisce

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

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

Comportamento

Produzione

Durante il processo di CD, qualsiasi contenuto all’interno di una funzione msg viene tradotto prima del deployment dell’applicazione. Questo garantisce tempi di caricamento rapidi per tutte le lingue, ma può tradurre solo il contenuto noto al momento della build.

Una volta generate, le traduzioni vengono (1) archiviate nella CDN oppure (2) incluse nell’output di build della tua app, in base alla configurazione. Da lì, il contenuto tradotto viene erogato agli utenti. Se una traduzione non è disponibile, si torna al contenuto originale.

Assicurati di seguire la guida al deployment qui.

Sviluppo

Durante lo sviluppo, la funzione m traduce i contenuti su richiesta. Questo è utile per prototipare l’aspetto della tua app in lingue diverse. Ricorda di aggiungere una Dev API key al tuo ambiente per abilitare questo comportamento.

In sviluppo potresti riscontrare un ritardo durante la traduzione su richiesta. Ciò non accade nelle build di produzione, a meno che i contenuti non vengano esplicitamente tradotti su richiesta, ad esempio usando tx o <Tx>.

Esempio

Utilizzo di base

Puoi usare useMessages per tradurre le stringhe codificate da msg.

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

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

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

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

Nota: "Alice" verrà tradotta nella lingua preferita dell'utente.

Uso delle variabili

Puoi sostituire le variabili nelle stringhe codificate.

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

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

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

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })}
    </p>
  );
}

Nota: verrà visualizzato "Hello, Bob!": la variabile viene sovrascritta in fase di rendering.

Uso del formato di messaggi ICU

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

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

const encodedMessage = msg('Nel carrello {count, plural, =0 {non ci sono articoli} =1 {c\'è un articolo} other {ci sono {count} articoli}}', { count: 10 });

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

Note

• La funzione useMessages è un hook che traduce le stringhe codificate da msg.
• Le traduzioni con useMessages vengono risolte prima dell'esecuzione, durante il processo di build (tranne che in sviluppo).

Prossimi passi

• Consulta getMessages per traduzioni asincrone di stringhe da stringhe codificate in fase di build.
• Consulta msg per codificare le stringhe da tradurre.
• Per le traduzioni in fase di esecuzione, consulta tx e <Tx>.