# react-native: GTProvider
URL: https://generaltranslation.com/it/docs/react-native/api/components/gtprovider.mdx
---
title: GTProvider
description: Riferimento dell'API per il componente GTProvider
---

## Panoramica

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

### Quando usarlo

* Avvolgi l&#39;intera applicazione in `<GTProvider>` per abilitare le traduzioni lato client.
* Il componente `<GTProvider>` viene usato sia per [il componente inline `<T>`](/docs/react-native/guides/t) sia per [i dizionari](/docs/react-native/guides/dictionaries).

## Riferimento

### Proprietà

<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,
},
}}
/>

### Descrizione

| Prop                | Descrizione                                                                                                                                                                                                              |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `children`          | Qualsiasi componente, o componente padre, 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 nessun&#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`) che contiene `projectId`, `locales`, `defaultLocale` e altre impostazioni. Un&#39;alternativa al passaggio di questi valori come prop singole.    |
| `loadTranslations?` | Una funzione asincrona che accetta una stringa di impostazione regionale e restituisce l&#39;oggetto delle traduzioni per quell&#39;impostazione regionale. Usata per caricare file di traduzione pregenerati a Runtime. |
| `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`). Usato per la formattazione specifica per area geografica.                                                                                                   |
| `fallback?`         | Contenuto di fallback personalizzato da mostrare durante il caricamento delle traduzioni.                                                                                                                                |
| `customMapping?`    | Una mappatura dei nomi di componenti personalizzati ai rispettivi componenti React, usata durante il rendering di JSX tradotto.                                                                                          |

### Restituisce

`React.JSX.Element|undefined` contenente gli elementi figlio passati a questo componente.

## Esempi

### Utilizzo di base

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

```jsx title="App.tsx" copy
import { GTProvider } from 'gt-react-native';
import gtConfig from './gt.config.json';
import { loadTranslations } from './loadTranslations';

export default function App() {
  return (
    <GTProvider config={gtConfig} loadTranslations={loadTranslations}> {/* // [!code highlight] */}
      {/* Il contenuto della tua app */}
    </GTProvider>
  );
}
```

### Dizionari

Puoi anche passare un dizionario al componente `<GTProvider>` e accedervi poi con l&#39;hook [`useTranslations`](/docs/react-native/api/dictionary/use-translations).

```jsx title="App.tsx" copy
import { GTProvider } from 'gt-react-native';
import gtConfig from './gt.config.json';
import { loadTranslations } from './loadTranslations';
import dictionary from './dictionary';

export default function App() {
  return (
    <GTProvider config={gtConfig} loadTranslations={loadTranslations} dictionary={dictionary}> {/* // [!code highlight] */}
      {/* Il contenuto della tua app */}
    </GTProvider>
  );
}
```

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

### Aggiungere la configurazione

Se preferisci non passare le props direttamente al componente `<GTProvider>`, puoi creare un file di configurazione e passarlo al componente.
Inoltre, si integra direttamente con il [comando `gt translate`](/docs/cli/translate), quindi non devi specificare manualmente come parametro elementi 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="App.tsx" copy
import { GTProvider } from 'gt-react-native';
import config from './gt.config.json';

export default function App() {
  return (
    <GTProvider {...config}> {/* // [!code highlight] */}
      {/* Il contenuto della tua app */}
    </GTProvider>
  );
}
```

### Loader di traduzioni personalizzato

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="App.tsx" copy
import { GTProvider } from 'gt-react-native';
import { loadTranslations } from './loadTranslations';

export default function App() {
  return (
    <GTProvider locales={['es', 'fr']} loadTranslations={loadTranslations}> {/* // [!code highlight] */}
      {/* Il contenuto della tua app */}
    </GTProvider>
  );
}
```

### Impostazioni di rendering

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

* `timeout` è il numero di millisecondi da attendere prima che venga caricata una traduzione, oltre il quale viene mostrato un fallback (predefinito: `8000ms`).
* `method` è il metodo da usare per caricare le traduzioni (`"skeleton"`, `"replace"` o `"default"`).

```jsx title="App.tsx" copy
<GTProvider renderSettings={{ method: 'skeleton', timeout: 1000 }}>
  {/* Il contenuto della tua app */}
</GTProvider>
```

Ogni impostazione di rendering definisce un comportamento di caricamento diverso:
`"skeleton"` restituisce `null` finché le traduzioni non sono state caricate.
`"replace"` restituisce il contenuto di fallback finché le traduzioni non sono state caricate.
`"default"` restituisce `null` finché le traduzioni non sono 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, restituisce subito il contenuto di fallback finché le traduzioni non sono state caricate.

***

## Note

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

## Passaggi successivi

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