Panoramica

La funzione msg serve a contrassegnare e codificare le stringhe per la traduzione.

const encodedString = msg('Ciao, mondo!');

La stringa codificata deve essere passata all’hook useMessages o alla funzione getTranslations per ottenere le traduzioni.

Decodifica

Per ottenere la stringa originale, devi decodificarla con decodeMsg

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

Riferimenti

Parametri

Restituisce

Una stringa codificata, con le variabili interpolate (se presenti) sostituite dai rispettivi valori.

Comportamento

Produzione

Durante il processo di CD, qualsiasi contenuto all’interno di una funzione msg verrà tradotto prima che l’applicazione venga distribuita. Questo garantisce tempi di caricamento rapidi per tutte le lingue/località, ma può tradurre solo il contenuto disponibile al momento della build.

Una volta generate, le traduzioni vengono (1) memorizzate nel CDN oppure (2) incluse nell’output di build della tua app, in base alla configurazione. Da lì, il contenuto tradotto viene distribuito agli utenti. Se una traduzione non è disponibile, verrà usato il contenuto originale come fallback.

Assicurati di seguire la guida al deployment.

Sviluppo

Durante lo sviluppo, la funzione msg tradurrà i contenuti on demand. 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 fase di sviluppo potresti notare un ritardo durante la traduzione on demand. Questo non avverrà nelle build di produzione, a meno che i contenuti non vengano tradotti esplicitamente on demand, ossia utilizzando tx o <Tx>.

Esempio

Utilizzo di base

Puoi usare msg per contrassegnare le stringhe da tradurre.

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

const encodedString = msg('Ciao, mondo!');

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

Nota: "Hello, world!" verrà tradotto nella lingua preferita dall'utente.

Uso delle variabili

Puoi passare variabili alle traduzioni del dizionario.

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

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

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

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

Nota: "Alice" non verrà tradotta nella lingua preferita dell'utente perché è una variabile.

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 encodedString = msg('Ci sono {count, plural, =0 {nessun articolo} =1 {un articolo} other {{count} articoli}} nel carrello', { count: 10 });

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

Note

• La funzione msg serve a contrassegnare le stringhe da tradurre.
• Le traduzioni delle stringhe contrassegnate con msg vengono generate prima del runtime, durante il processo di build (tranne in sviluppo).

Prossimi passi

• Consulta useMessages per tradurre le stringhe.