Panoramica

Il componente <GTProvider> fornisce il contesto di General Translation (GT) ai componenti discendenti, consentendo loro di accedere ai contenuti tradotti. È necessario per qualsiasi traduzione eseguita sul client nella tua applicazione.

Quando usarlo

• Wrappa l’intera applicazione con <GTProvider> per abilitare le traduzioni sul client.
• Quando lavori con i dizionari, puoi specificare un id per limitare i dati del dizionario inviati al client, ottimizzando le prestazioni con dizionari di grandi dimensioni.
• Il componente <GTProvider> si usa sia con <T> inline sia con i dizionari.

Riferimenti

Proprietà

Descrizione

Restituisce

React.JSX.Element|undefined che contiene i children passati a questo componente.

Esempi

Utilizzo di base

Avvolgi l’applicazione in <GTProvider> per abilitarne la traduzione. Ricordati di aggiungere l’elenco delle lingue/locali supportate per attivare la traduzione.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";
import { GTProvider } from "gt-react";

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

Dizionari

Puoi anche passare un dizionario al componente <GTProvider> e quindi accedervi con l’hook useTranslations.

import dictionary from "./dictionary.js";

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

Per ulteriori informazioni sull’utilizzo dei dizionari, consulta questa guida.

Aggiunta della configurazione

Se non ti piace passare le props direttamente al componente <GTProvider>, puoi creare un file di configurazione e passarlo al componente. Si integra anche direttamente con il comando gtx-cli translate, così non devi specificare manualmente parametri come le lingue/locali.

{
  "projectId": "your-project-id",
  "locales": ["es", "fr"],
  "defaultLocale": "en-US",
  "_versionId": "translation-version-id" // permette di tornare a traduzioni precedenti (generato automaticamente dalla CLI)
}

Ti basta passarlo al componente <GTProvider>.

import config from "../gt.config.json";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GTProvider {...config}> // [!code highlight]
      <App />
    </GTProvider>
  </StrictMode>
);

Loader di traduzioni personalizzato

Puoi utilizzare la prop loadTranslations per caricare le traduzioni da un’origine personalizzata. Questo è utile quando devi caricare le traduzioni da una sorgente diversa, ad esempio tramite un’API personalizzata.

import loadTranslations from "./loadTranslations";

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

Impostazioni di render

Le impostazioni di render controllano il comportamento di caricamento delle traduzioni. Sono disponibili due campi: timeout e method.

• timeout è il numero di millisecondi da attendere per il caricamento di una traduzione prima di mostrare un fallback (valore predefinito: 8000ms).
• method è il metodo da utilizzare per caricare le traduzioni ("skeleton", "replace" o "default").

<GTProvider renderSettings={{ method: "skeleton", timeout: 1000 }}>
  <App />
</GTProvider>

Ogni impostazione di rendering determina un diverso comportamento di caricamento: "skeleton" restituirà null finché le traduzioni non saranno caricate. "replace" restituirà il contenuto di fallback finché le traduzioni non saranno caricate. "default" restituirà null finché le traduzioni non saranno caricate, a meno che la locale di fallback abbia la stessa lingua della locale corrente (ad es. en-US e en-GB). In questo caso, restituirà immediatamente il contenuto di fallback finché le traduzioni non saranno caricate.

Note

• Il <GTProvider> deve racchiudere tutti i componenti <T> e le altre funzioni legate alla traduzione. Scopri di più qui.

Prossimi passaggi

• Approfondisci il componente <T> per tradurre testo e componenti.