# General Translation React SDKs (gt-react, gt-next): GTProvider URL: https://generaltranslation.com/it/docs/react/reference/components/gt-provider.mdx --- title: GTProvider description: Fornisce l'impostazione regionale attiva e le traduzioni a un albero di componenti `gt-react` di General Translation renderizzato sul server. Riferimento API per GTProvider. --- Il componente `` fornisce l'impostazione regionale attiva e le relative traduzioni a un albero di componenti `gt-react` renderizzato sul server. Usalo quando il server carica le traduzioni e le passa al client. *Nota: le SPA React inizializzate con [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) usano la cache globale delle traduzioni e non richiedono un provider.* *Disponibile in `gt-react`, `gt-next`, `gt-tanstack-start` e `gt-react-native`. Gli esempi importano da `gt-react`; importa invece dal pacchetto del framework che stai usando.* *Nota: il modo in cui l'impostazione regionale e le traduzioni arrivano a `` varia a seconda del framework. In `gt-react` le passi come props (qui sotto); `gt-next`, `gt-tanstack-start` e `gt-react-native` le risolvono tramite il proprio setup, documentato nella sezione dedicata a ciascun framework.* ## Panoramica [#overview] Avvolgi la tua app in `` dopo l'[inizializzazione](/docs/react/reference/config#initialization). Passa la `locale` attiva e le `translations` per quella `locale`, caricate con [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot). ```tsx import { GTProvider } from 'gt-react'; ``` *Nota: [`loadTranslations`](/docs/react/reference/functions/load-translations), [`loadDictionary`](/docs/react/reference/functions/load-dictionary) e le credenziali vanno nella [chiamata di inizializzazione](/docs/react/reference/config#initialization), non in ``. Il provider utilizza in modo sincrono l'impostazione regionale risolta e le traduzioni.* **Modificato in v11:** `gt-react` `` non accetta più `config`, `loadTranslations`, `loadDictionary` né le credenziali. Spostali nella [chiamata di inizializzazione](/docs/react/reference/config#initialization) e passa invece al provider `locale` e `translations` risolti (da [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot)). ## Come funziona [#how-it-works] * **Traduzioni sincrone.** Il provider richiede `translations` in anticipo affinché il contenuto tradotto venga renderizzato in modo sincrono, senza un effetto flash durante il caricamento. Genera questo oggetto con [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot) dopo l'inizializzazione. * **Contesto per l'albero.** In una configurazione basata su provider, i componenti al di sotto del provider leggono da esso l'impostazione regionale attiva, le traduzioni, i dizionari e la regione. * **Attivazione/disattivazione della traduzione.** Quando `enableI18n` è `false`, il provider renderizza il contenuto nell'impostazione regionale sorgente e non esegue la traduzione, il che è utile per visualizzare in anteprima l'app non tradotta. ## Props [#props] | Prop | Descrizione | Tipo | Facoltativo | Predefinito | | ------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ----------- | ----------- | ----------- | | [`locale`](#locale) | Impostazione regionale attiva dell'albero. | `string` | No | — | | [`translations`](#translations) | Traduzioni per l'impostazione regionale attiva. | `object` | No | — | | [`dictionaries`](#dictionaries) | Dizionari per ciascuna impostazione regionale per [`useTranslations`](/docs/react/reference/hooks/use-translations). | `object` | Sì | — | | [`region`](#region) | Codice della regione attiva. | `string` | Sì | — | | [`enableI18n`](#enable-i18n) | Traduce il contenuto. Quando è `false`, usa l'impostazione regionale sorgente. | `boolean` | Sì | `true` | | [`children`](#children) | L'albero dell'applicazione. | `ReactNode` | Sì | — | ### `locale` [#locale] **Tipo** `string` · **Obbligatorio** L'impostazione regionale attiva dell'albero, espressa come codice BCP 47, ad esempio `es`. Puoi leggerla nei componenti discendenti con [`useLocale`](/docs/react/reference/hooks/use-locale). ### `translations` [#translations] **Tipo** `object` · **Obbligatorio** Le traduzioni per l'impostazione regionale attiva, nel formato che il provider utilizza in modo sincrono. Ottienile con [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot) dopo l'inizializzazione. ### `dictionaries` [#dictionaries] **Tipo** `object` · **Facoltativo** Dizionari per ciascuna impostazione regionale usati da [`useTranslations`](/docs/react/reference/hooks/use-translations) per le ricerche tramite `id`. Omettilo quando usi solo `` e `useGT`. ### `region` [#region] **Tipo** `string` · **Facoltativo** Il codice della regione attiva (ad esempio, `US` o `GB`), usato per la formattazione specifica della regione e dagli hook e dai selettori di regione. ### `enableI18n` [#enable-i18n] **Tipo** `boolean` · **Facoltativo** · **Predefinito** `true` Indica se tradurre il contenuto. Quando è `false`, il provider esegue il rendering del contenuto nell'impostazione regionale sorgente e non esegue la traduzione. ### `children` [#children] **Tipo** `ReactNode` · **Facoltativo** L'albero della tua applicazione. In una configurazione basata su provider, ogni componente che traduce o legge lo stato dell'impostazione regionale deve trovarsi sotto il provider. ## Esempi [#examples] ```tsx title="src/routes/root.tsx" import { GTProvider, initializeGT, getTranslationsSnapshot, parseLocale, } from 'gt-react'; import gtConfig from '../../gt.config.json'; const loadTranslations = (locale: string) => import(`../_gt/${locale}.json`).then((m) => m.default); initializeGT({ ...gtConfig, loadTranslations }); export async function loadRoot(request: Request) { const locale = parseLocale(request); return { locale, translations: await getTranslationsSnapshot(locale), }; } export function Root({ locale, translations, children }) { return ( {children} ); } ``` ```tsx // Anteprima dell'app non tradotta (impostazione regionale sorgente) ```