Config

loadTranslations

Riferimento all’API per la funzione loadTranslations().

Panoramica

La funzione loadTranslations è il principale metodo per personalizzare il comportamento di caricamento delle traduzioni.

In produzione, le traduzioni devono essere memorizzate in modo che possano essere renderizzate nella tua app. Per impostazione predefinita, le traduzioni vengono memorizzate nel CDN di GT. Puoi definire una funzione loadTranslations per ottenere le traduzioni da un’altra origine, ad esempio:

  • Dal bundle della tua app (il più comune)
  • Da un database
  • Da un’API
  • Da un altro CDN

Supportiamo nativamente il caricamento delle traduzioni da file locali inclusi nel bundle della tua app. Segui questa guida per configurare le traduzioni locali nella tua app React.

Riferimenti

Parametri

Prop

Type

Descrizione

TipoDescrizione
localeLa lingua/area per cui devono essere caricate le traduzioni.

Restituisce

Una Promise<any> che risolve in una stringa o in un oggetto JSX contenente le traduzioni per la lingua/locale specificata.


Configurazione

Devi importare la funzione loadTranslations e passarla come prop al componente <GTProvider>.

src/index.js
import loadTranslations from './loadTranslations';

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GTProvider locales={['es', 'fr']} loadTranslations={loadTranslations}> // [!code highlight]
      <App />
    </GTProvider>
  </StrictMode>
);

Esempi

Carica le traduzioni da file locali

Quando è configurato per usare le traduzioni locali, il comando gtx-cli translate salva le traduzioni nella cartella ./src/_gt.

loadTranslations.js
export default async function loadTranslations(locale) {
  const translations = await import(`./_gt/${locale}.json`);
  return translations.default;
};

Carica le traduzioni dal tuo CDN

loadTranslations.js
export default async function loadTranslations(locale) {
  try {
    const translations = await fetch(`https://your-cdn.com/translations/${locale}.json`);
    const data = await translations.json();
    return data;
  } catch (e) {
    console.error(e);
    return {};
  }
};

Note

  • loadTranslations ti consente di personalizzare le modalità di caricamento delle traduzioni nella tua app in produzione.
  • Il caso d’uso più comune è aggiungere traduzioni locali

Prossimi passaggi

Come valuti questa guida?

loadTranslations