# gt-react: General Translation React SDK: GTProvider
URL: https://generaltranslation.com/it/docs/react/api/components/gtprovider.mdx
---
title: GTProvider
description: Documentazione di riferimento API per il componente GTProvider
---

## Panoramica

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

### Quando usarlo

* Avvolgi l&#39;intera applicazione in `<GTProvider>` per abilitare le traduzioni lato client.

* Il componente `<GTProvider>` viene usato sia per [`<T>` inline](/docs/react/guides/t) sia per i [dizionari](/docs/react/guides/dictionaries).

## Riferimento

### Props

<TypeTable
  type={{
children: {
type: 'ReactNode',
optional: false,
},
projectId: {
type: 'string',
optional: true,
},
'dictionary?': {
type: 'Dictionary',
optional: true,
default: 'defaultDictionary',
},
'locales?': {
type: 'string[]',
optional: true,
},
'defaultLocale?': {
type: 'string',
optional: true,
default: 'libraryDefaultLocale',
},
'locale?': {
type: 'string',
optional: true,
},
'cacheUrl?': {
type: 'string',
optional: true,
default: "'https://cdn.gtx.dev'",
},
'runtimeUrl?': {
type: 'string',
optional: true,
default: "'https://runtime.gtx.dev'",
},
'renderSettings?': {
type: 'RenderSettings',
optional: true,
default: 'defaultRenderSettings',
},
'_versionId?': {
type: 'string',
optional: true,
},
'devApiKey?': {
type: 'string',
optional: true,
},
'config?': {
type: 'object',
optional: true,
},
'loadTranslations?': {
type: '(locale: string) => Promise<Record<string, any>>',
optional: true,
},
'loadDictionary?': {
type: '(locale: string) => Promise<Record<string, any>>',
optional: true,
},
'region?': {
type: 'string',
optional: true,
},
'fallback?': {
type: 'ReactNode',
optional: true,
},
'customMapping?': {
type: 'CustomMapping',
optional: true,
},
'enableI18n?': {
type: 'boolean',
optional: true,
default: 'true',
},
}}
/>

### Descrizione

| Prop                | Descrizione                                                                                                                                                                                                                                                                                |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `children`          | Qualsiasi componente, o componente antenato, che debba tradurre o accedere alle informazioni di traduzione lato client. Devono essere inclusi tutti i componenti che usano `<T>`, `useGT` o altre utilità di traduzione.                                                                   |
| `projectId?`        | L&#39;ID del progetto richiesto per i servizi cloud di General Translation.                                                                                                                                                                                                                |
| `dictionary?`       | Il dizionario di traduzione del progetto.                                                                                                                                                                                                                                                  |
| `locales?`          | L&#39;elenco delle impostazioni regionali approvate per il progetto.                                                                                                                                                                                                                       |
| `defaultLocale?`    | L&#39;impostazione regionale predefinita da usare se non ne viene trovata un&#39;altra.                                                                                                                                                                                                    |
| `locale?`           | L&#39;impostazione regionale corrente, se è già impostata.                                                                                                                                                                                                                                 |
| `cacheUrl?`         | L&#39;URL del servizio di cache per recuperare le traduzioni.                                                                                                                                                                                                                              |
| `runtimeUrl?`       | L&#39;URL del servizio runtime per recuperare le traduzioni.                                                                                                                                                                                                                               |
| `renderSettings?`   | Le impostazioni per il rendering delle traduzioni.                                                                                                                                                                                                                                         |
| `_versionId?`       | L&#39;ID della versione da usare per recuperare le traduzioni.                                                                                                                                                                                                                             |
| `devApiKey?`        | La chiave API per gli ambienti di sviluppo.                                                                                                                                                                                                                                                |
| `config?`           | Un oggetto di configurazione (in genere importato da `gt.config.json`) contenente `projectId`, `locales`, `defaultLocale` e altre impostazioni. Un&#39;alternativa al passaggio di questi valori come singole prop.                                                                        |
| `loadTranslations?` | Una funzione asincrona che accetta una stringa di impostazione regionale e restituisce l&#39;oggetto delle traduzioni per quell&#39;impostazione regionale. Viene usata per caricare i file di traduzione pregenerati a runtime. Consulta il [Quickstart](/docs/react) per l&#39;utilizzo. |
| `loadDictionary?`   | Una funzione asincrona che accetta una stringa di impostazione regionale e restituisce le traduzioni del dizionario per quell&#39;impostazione regionale.                                                                                                                                  |
| `region?`           | Il codice regionale dell&#39;utente (ad esempio `US`, `GB`). Viene usato per la formattazione specifica per area geografica.                                                                                                                                                               |
| `fallback?`         | Contenuto di fallback personalizzato da visualizzare durante il caricamento delle traduzioni.                                                                                                                                                                                              |
| `customMapping?`    | Una mappatura dei nomi dei componenti personalizzati ai relativi componenti React, usata durante il rendering di JSX tradotto.                                                                                                                                                             |
| `enableI18n?`       | Indica se abilitare le funzionalità i18n. Il valore predefinito è `true`.                                                                                                                                                                                                                  |

### Restituisce

`React.JSX.Element|undefined` che contiene i componenti figlio passati a questo componente.

## Esempi

### Utilizzo di base

Racchiudi la tua applicazione in `<GTProvider>` per aggiungere la traduzione alla tua app.
Non dimenticare di aggiungere un [elenco delle impostazioni regionali supportate](/docs/platform/supported-locales) per abilitare la traduzione.

```jsx title="index.js" copy
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 poi accedervi con l&#39;hook [`useTranslations`](/docs/react/api/dictionary/use-translations).

```jsx title="index.js" copy
import dictionary from "./dictionary.js";

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

Per maggiori informazioni sull&#39;uso dei dizionari, consulta questa [guida](/docs/react/guides/dictionaries).


### Aggiunta della configurazione

Se preferisci non passare le prop direttamente al componente `<GTProvider>`, puoi creare un file di configurazione e passarlo al componente.
Si integra anche direttamente con il [comando `gt translate`](/docs/cli/translate), quindi non devi specificare manualmente parametri come le impostazioni regionali.

```json title="gt.config.json" copy
{
  "projectId": "your-project-id",
  "locales": ["es", "fr"],
  "defaultLocale": "en-US",
  "_versionId": "translation-version-id" // consente di ripristinare le traduzioni precedenti (generato automaticamente dalla CLI)
}
```

Non devi fare altro che passarlo al componente `<GTProvider>`.

```jsx title="index.js" copy
import config from "../gt.config.json";

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


### Caricamento personalizzato delle traduzioni

Puoi usare la prop `loadTranslations` per caricare le traduzioni da una fonte personalizzata.
È utile quando devi caricare le traduzioni da una fonte diversa, ad esempio da un&#39;API personalizzata.

```jsx title="index.js" copy
import loadTranslations from "./loadTranslations";

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


### Impostazioni di rendering

Le impostazioni di rendering controllano il comportamento di caricamento delle traduzioni.
Sono presenti due campi: `timeout` e `method`.

* `timeout` indica il numero di millisecondi da attendere prima di mostrare un fallback, se una traduzione non è ancora stata caricata (predefinito: `8000ms`).
* `method` indica il metodo da usare per caricare le traduzioni (`"skeleton"`, `"replace"` o `"default"`).

```jsx title="index.js" copy
<GTProvider renderSettings={{ method: 'skeleton', timeout: 1000 }}>
  <App />
</GTProvider>
```

Ogni impostazione di rendering determina un comportamento di caricamento diverso:
`"skeleton"` restituirà `null` finché le traduzioni non saranno state caricate.
`"replace"` restituirà il contenuto di riserva finché le traduzioni non saranno state caricate.
`"default"` restituirà `null` finché le traduzioni non saranno state caricate, a meno che l&#39;impostazione regionale di fallback non abbia la stessa lingua dell&#39;impostazione regionale corrente (ad esempio, `en-US` e `en-GB`).
In questo caso, restituirà immediatamente il contenuto di riserva finché le traduzioni non saranno state caricate.

***


## Note

* `<GTProvider>` deve racchiudere tutti i [componenti `<T>`](/docs/react/api/components/t) e le altre funzioni legate alla traduzione. Scopri di più [qui](/docs/react/api/components/gtprovider).

## Passaggi successivi

* Scopri di più sul [componente `<T>`](/docs/react/guides/t) per tradurre testi e componenti.