# General Translation React SDKs (gt-react, gt-next, gt-react-native): `` URL: https://generaltranslation.com/it/docs/react/reference/components/gt-provider.mdx Docs index: https://generaltranslation.com/llms.txt Description: Fornisce il contesto di traduzione e l'impostazione regionale a un albero di componenti React. Riferimento API per il componente ``. Il funzionamento di `` dipende dal framework e dal router. Alcuni provider ricevono i dati dell'impostazione regionale come props, mentre altri li risolvono e li caricano automaticamente. *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`.* ## Panoramica [#overview] | Runtime | Props obbligatorie | Impostazione regionale e sorgente delle traduzioni | | ------------------------------ | ------------------------ | ---------------------------------------------------------------------------------------- | | Rendering lato server di React | `locale`, `translations` | Il tuo loader lato server | | App Router di Next.js | Nessuna | La richiesta e la cache di `gt-next` | | Pages Router di Next.js | `locale`, `translations` | Wrapper dei dati del Pages Router | | TanStack Start | `locale`, `translations` | Il tuo loader della richiesta | | React Native | Nessuna | Rilevamento nativo dell'impostazione regionale e loader delle traduzioni configurato | La sezione [Props](#props) indica esattamente quali varianti del provider accettano ciascuna prop. ## Contratti dei framework [#contracts] Le app `gt-react` con rendering lato server passano l'impostazione regionale attiva e uno snapshot delle traduzioni. Carica lo snapshot dopo [`initializeGT`](/docs/react/reference/config#initialize). ```tsx import { GTProvider } from 'gt-react'; ``` [`loadTranslations`](/docs/react/reference/functions/load-translations), [`loadDictionary`](/docs/react/reference/functions/load-dictionary) e le credenziali vanno specificati nella [chiamata di inizializzazione](/docs/react/reference/config#initialization), non nel provider. **Modificato nella v11:** `` di `gt-react` non accetta più `config`, [`loadTranslations`](/docs/react/reference/functions/load-translations), [`loadDictionary`](/docs/react/reference/functions/load-dictionary) né le credenziali. Spostali in [`initializeGT`](/docs/react/reference/config#initialize), quindi passa al provider `locale` e `translations` risolti. ### App Router Il provider di App Router è un componente server async con la sola prop `children`. Ricava dalla richiesta e dalla cache di `gt-next` l'impostazione regionale, la regione, lo stato di traduzione, le traduzioni e i dizionari. ```tsx title="app/layout.tsx" import { GTProvider } from 'gt-next'; export default function RootLayout({ children }) { return {children}; } ``` Non passare `locale`, `translations`, `dictionaries`, `region` o `enableI18n` al provider di App Router. ### Pages Router Pages Router riesporta il provider condiviso di `gt-react`. Passa i valori iniettati tramite [rendering lato server](/docs/react/nextjs-pages-router-quickstart#quickstart) o [generazione statica](/docs/react/nextjs/pages-router-static-site-generation) e fornisci `_reload` se i cambi di impostazione regionale devono utilizzare il routing di Next.js. ```tsx title="pages/_app.tsx" import Router from 'next/router'; import { GTProvider } from 'gt-next'; { void Router.push(Router.pathname, Router.asPath, { locale }); }} > ``` `gt-tanstack-start` riesporta il provider condiviso. Dopo aver registrato [`gtMiddleware`](/docs/react/tanstack-start/reference/functions/gt-middleware), passa l'impostazione regionale attiva e il relativo snapshot delle traduzioni. ```tsx import { GTProvider } from 'gt-tanstack-start'; ``` Il provider React Native rileva l'impostazione regionale iniziale, carica le relative traduzioni ed esegue nuovamente il rendering quando l'impostazione regionale cambia. `locale` è facoltativo e `translations` non è una prop pubblica. ```tsx import { GTProvider } from 'gt-react-native'; ``` Passa `fallback` per sostituire l'indicatore di caricamento integrato durante il caricamento delle traduzioni. ## Come funziona [#how-it-works] * **React, TanStack Start e Next.js Pages Router.** Il provider riceve subito uno snapshot delle traduzioni, così i contenuti tradotti vengono renderizzati in modo sincrono. * **Next.js App Router.** Il provider lato server legge lo stato della richiesta e carica traduzioni e dizionari prima di renderizzare il proprio confine client. * **React Native.** Il provider carica le traduzioni per l'impostazione regionale risolta tramite Suspense. Renderizza `fallback` finché non sono disponibili. * **Contesto per l'albero.** I componenti discendenti leggono dal contesto del provider l'impostazione regionale attiva, le traduzioni, i dizionari, la regione e lo stato della traduzione. * **Modifiche dell'impostazione regionale.** I provider web salvano l'impostazione regionale in un cookie e attivano il relativo comportamento di ricaricamento. React Native la salva nell'archiviazione nativa e aggiorna lo stato del provider. ## Props [#props] | Prop | Descrizione | Tipo | Facoltativo | Predefinito | | ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------- | ---------------------------------------------------------------- | | [`children`](#children) | Albero di componenti. Accettato da tutti i provider. | `ReactNode` | Sì | — | | [`locale`](#locale) | Impostazione regionale attiva. Obbligatoria in React, TanStack Start e Next.js Pages Router; facoltativa in React Native; non accettata in Next.js App Router. | `string \| LocaleCandidates` | Specifico del framework | Impostazione regionale del dispositivo o salvata in React Native | | [`translations`](#translations) | Snapshot delle traduzioni. Obbligatorio in React, TanStack Start e Next.js Pages Router; non accettato in Next.js App Router o React Native. | `object` | Specifico del framework | — | | [`dictionaries`](#dictionaries) | Dizionari per impostazione regionale. Accettati da React, TanStack Start, Next.js Pages Router e React Native; caricati internamente in Next.js App Router. | `object` | Sì | — | | [`region`](#region) | Regione attiva. Accettata da React, TanStack Start, Next.js Pages Router e React Native; determinata internamente in Next.js App Router. | `string` | Sì | Regione salvata o `undefined` | | [`enableI18n`](#enable-i18n) | Indica se tradurre. Accettato da React, TanStack Start, Next.js Pages Router e React Native; determinato internamente in Next.js App Router. | `boolean` | Sì | `true` | | [`fallback`](#fallback) | Contenuto visualizzato durante il caricamento delle traduzioni in React Native. Solo React Native. | `ReactNode` | Sì | Indicatore di caricamento | | [`_reload`](#reload) | Callback di ricaricamento del framework. Accettato da React, TanStack Start e Next.js Pages Router; non accettato da Next.js App Router o React Native. | `(state) => void` | Sì | Specifico del framework | | [`onMissingTranslation`](#missing-translation) | Gestisce una traduzione inline o JSX mancante. Non accettato da Next.js App Router. | `OnMissingTranslation` | Sì | — | | [`onMissingDictionaryEntry`](#missing-dictionary-entry) | Gestisce una voce di dizionario mancante. Non accettato da Next.js App Router. | `OnMissingDictionaryEntry` | Sì | — | | [`onMissingDictionaryObj`](#missing-dictionary-object) | Gestisce un oggetto dizionario mancante. Non accettato da Next.js App Router. | `OnMissingDictionaryObj` | Sì | — | ### `children` [#children] **Tipo** `ReactNode` · **Facoltativo** L'albero di componenti che riceve il contesto di traduzione. Ogni variante di provider accetta `children`. ### `locale` [#locale] **Tipo** `string | LocaleCandidates` · **Specifico del framework** L'impostazione regionale attiva per l'albero: * Obbligatoria come `stringa` risolta in React, TanStack Start e nel Pages Router di Next.js. * Facoltativa in React Native, dove accetta candidati per l'impostazione regionale e usa per impostazione predefinita l'impostazione regionale salvata o quella del dispositivo. * Non accettata dal provider dell'App Router di Next.js, che risolve internamente l'impostazione regionale della richiesta. Recupera il valore risultante a valle con [`useLocale`](/docs/react/reference/hooks/use-locale). ### `translations` [#translations] **Tipo** `Record>` · **Specifico del framework** Snapshot delle traduzioni generato da [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot). È richiesto in React, TanStack Start e nel Pages Router di Next.js affinché tali provider possano risolvere i contenuti in modo sincrono. Il provider dell'App Router di Next.js carica internamente lo snapshot. Il provider React Native non accetta la prop `translations` e carica autonomamente le traduzioni per l'impostazione regionale attiva. ### `dictionaries` [#dictionaries] **Tipo** `Record` · **Facoltativo** Dizionari per ciascuna impostazione regionale usati da [`useTranslations`](/docs/react/reference/hooks/use-translations) per le ricerche tramite `id`. React, TanStack Start, Next.js Pages Router e React Native accettano questa prop. Il provider di Next.js App Router carica internamente i dizionari. ### `region` [#region] **Tipo** `string` · **Facoltativo** Il codice della regione attiva, ad esempio `US` o `GB`. React, TanStack Start, Next.js Pages Router e React Native accettano questa prop. Next.js App Router determina la regione dalla richiesta. ### `enableI18n` [#enable-i18n] **Tipo** `boolean` · **Facoltativo** · **Predefinito** `true` Indica se tradurre il contenuto. Quando è `false`, il provider renderizza il contenuto nell'impostazione regionale sorgente. React, TanStack Start, Next.js Pages Router e React Native accettano questa prop. Next.js App Router risolve il valore dallo stato della richiesta. ### `fallback` [#fallback] **Tipo** `ReactNode` · **Facoltativo** Contenuto esclusivo di React Native visualizzato durante il caricamento delle traduzioni. Il valore predefinito è un `ActivityIndicator` di React Native centrato. ### `_reload` [#reload] **Tipo** `(state: { locale: string; region: string | undefined; enableI18n: boolean }) => void` · **Facoltativo** · **Predefinito** Specifico del framework Callback eseguito dopo una modifica dell'impostazione regionale web, della regione o dello stato di traduzione. React e TanStack Start lo accettano tramite il provider condiviso. Next.js Pages Router lo usa per sostituire un ricaricamento completo della pagina con `Router.push`. `gt-react` standard e Next.js Pages Router usano come fallback `window.location.reload`. TanStack Start fornisce la navigazione basata sul pathname quando il routing delle impostazioni regionali è abilitato. Il provider di Next.js App Router fornisce il proprio callback e non accetta questa prop: normalmente chiama `router.refresh`, ma ricarica il documento quando il middleware deve rimuovere un prefisso di impostazione regionale non predefinita dopo il passaggio all'impostazione regionale predefinita. React Native aggiorna invece lo stato del provider. ### `onMissingTranslation` [#missing-translation] **Tipo** `OnMissingTranslation` · **Facoltativo** Callback avanzata per una traduzione inline o JSX mancante. I provider per browser e React Native possono utilizzare una callback fornita. I provider con rendering lato server installano il proprio handler. ### `onMissingDictionaryEntry` [#missing-dictionary-entry] **Tipo** `OnMissingDictionaryEntry` · **Facoltativo** Callback avanzata per una voce di dizionario mancante. I provider per browser e React Native possono utilizzare una callback fornita. I provider con rendering lato server configurano il proprio handler. ### `onMissingDictionaryObj` [#missing-dictionary-object] **Tipo** `OnMissingDictionaryObj` · **Facoltativo** Callback avanzata per un oggetto dizionario mancante. I provider per browser e React Native possono utilizzare una callback fornita. I provider con rendering lato server installano il proprio handler. ## Sitemap See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.