Panoramica

La funzione useGT è un hook per tradurre le stringhe in fase di build.

const t = useGT();

<p>{  t('Questo testo sarà tradotto')  }</p>;

Riferimenti

Parametri

Nessuno

Valore restituito

Una funzione di callback, t, che traduce il contenuto fornito.

(content: string, options?: InlineTranslationOptions) => string

Comportamento

Produzione

Durante il processo di CD, qualsiasi contenuto all’interno di una funzione t viene tradotto prima che l’applicazione venga distribuita. Questo garantisce tempi di caricamento rapidi per tutte le lingue/locale, ma può tradurre solo contenuti noti 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 distribuito ai tuoi utenti. Se una traduzione non è disponibile, verrà utilizzato il contenuto originale come fallback.

Assicurati di seguire la guida al deployment.

Sviluppo

Durante lo sviluppo, la funzione t tradurrà i contenuti on demand. Questo è utile per prototipare l’aspetto della tua app in lingue diverse. Ricorda di aggiungere una chiave API Dev al tuo ambiente per abilitare questo comportamento.

In sviluppo potresti riscontrare un ritardo nella traduzione on demand. Questo non accadrà nelle build di produzione.

Esempio

Utilizzo di base

Puoi usare useGT per tradurre le stringhe.

import { useGT } from 'gt-react';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('Ciao, Alice!')}
    </p>
  );
}

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

Uso delle variabili

Puoi passare variabili alle traduzioni del dizionario.

import { useGT } from 'gt-react';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('Ciao, {name}!', { name: 'Alice' })}
    </p>
  );
}

Nota: "Alice" non verrà tradotto 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 { useGT } from 'gt-react';

export default function TranslateGreeting() {
  const t = useGT();
  return (
    <p>
      {t('Nel carrello {count, plural, =0 {non ci sono articoli} =1 {c’è un articolo} other {ci sono {count} articoli}}', { count: 10 })}
    </p>
  );
}

Note

• La funzione useGT è un hook per tradurre stringhe.
• L’hook useGT può essere utilizzato solo all’interno di un componente racchiuso da un componente <GTProvider>.
• Con useGT le traduzioni vengono risolte prima del runtime, durante il processo di build (tranne che in sviluppo).

Prossimi passi

• Consulta useTranslations per tradurre le stringhe tramite un dizionario.