# react-native: GTProvider
URL: https://generaltranslation.com/es/docs/react-native/api/components/gtprovider.mdx
---
title: GTProvider
description: Referencia de la API del componente GTProvider
---

## Resumen

El componente `<GTProvider>` proporciona el contexto de General Translation (GT) a sus elementos hijo, lo que les permite acceder a contenido traducido.
Es necesario para cualquier traducción del lado del cliente en tu aplicación.

### Cuándo usarlo

* Envuelve toda la aplicación en `<GTProvider>` para habilitar las traducciones en el cliente.
* El componente `<GTProvider>` se usa tanto para [`<T>` integrado](/docs/react-native/guides/t) como para [diccionarios](/docs/react-native/guides/dictionaries).

## Referencia

### Propiedades

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

### Descripción

| Prop                | Descripción                                                                                                                                                                                                                      |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children`          | Cualquier componente, o cualquier componente padre, que necesite traducir o acceder a información de traducción del lado del cliente. Debe incluir cualquier componente que use `<T>`, `useGT` u otras utilidades de traducción. |
| `projectId?`        | El ID del proyecto requerido para los servicios en la nube de General Translation.                                                                                                                                               |
| `dictionary?`       | El diccionario de traducción del proyecto.                                                                                                                                                                                       |
| `locales?`          | La lista de locales aprobados para el proyecto.                                                                                                                                                                                  |
| `defaultLocale?`    | La configuración regional predeterminada que se usará si no se encuentra ninguna otra configuración regional.                                                                                                                    |
| `locale?`           | La configuración regional actual, si ya está establecida.                                                                                                                                                                        |
| `cacheUrl?`         | La URL del servicio de caché para obtener traducciones.                                                                                                                                                                          |
| `runtimeUrl?`       | La URL del servicio de runtime para obtener traducciones.                                                                                                                                                                        |
| `renderSettings?`   | La configuración de renderizado de las traducciones.                                                                                                                                                                             |
| `_versionId?`       | El ID de la versión para obtener traducciones.                                                                                                                                                                                   |
| `devApiKey?`        | La clave de API para entornos de desarrollo.                                                                                                                                                                                     |
| `config?`           | Un objeto de configuración (normalmente importado desde `gt.config.json`) que contiene `projectId`, `locales`, `defaultLocale` y otras opciones de configuración. Una alternativa a pasar estas propiedades individualmente.     |
| `loadTranslations?` | Una función asíncrona que toma una cadena de configuración regional y devuelve el objeto de traducciones para esa configuración regional. Se usa para cargar archivos de traducción pregenerados en tiempo de ejecución.         |
| `loadDictionary?`   | Una función asíncrona que toma una cadena de configuración regional y devuelve las traducciones del diccionario para esa configuración regional.                                                                                 |
| `region?`           | El código de región del usuario (p. ej., `US`, `GB`). Se usa para el formato específico de la región.                                                                                                                            |
| `fallback?`         | Contenido alternativo personalizado para mostrar mientras se cargan las traducciones.                                                                                                                                            |
| `customMapping?`    | Un mapeo de nombres de componentes personalizados a sus componentes de React, que se usa al renderizar JSX traducido.                                                                                                            |

### Devuelve

`React.JSX.Element|undefined` que contiene los elementos hijos que se pasaron a este componente.

## Ejemplos

### Uso básico

Envuelve tu aplicación en `<GTProvider>` para añadir traducción a tu app.
No olvides añadir una [lista de locales compatibles](/docs/platform/supported-locales) para habilitar la traducción.

```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] */}
      {/* El contenido de tu app */}
    </GTProvider>
  );
}
```

### Diccionarios

También puedes pasarle un diccionario al componente `<GTProvider>` y acceder a él con el 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] */}
      {/* El contenido de tu app */}
    </GTProvider>
  );
}
```

Para más información sobre el uso de diccionarios, consulta esta [guía](/docs/react-native/guides/dictionaries).

### Añadir configuración

Si prefieres no pasar props directamente al componente `<GTProvider>`, puedes crear un archivo de configuración y pasárselo al componente.
También se integra directamente con el [comando `gt translate`](/docs/cli/translate), así que no tienes que especificar manualmente parámetros como los locales.

```json title="gt.config.json" copy
{
  "projectId": "your-project-id",
  "locales": ["es", "fr"],
  "defaultLocale": "en-US",
  "_versionId": "translation-version-id" // permite revertir a traducciones anteriores (autogenerado por la CLI)
}
```

Solo tienes que pasar esto 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] */}
      {/* El contenido de tu app */}
    </GTProvider>
  );
}
```

### Cargador de traducciones personalizado

Puedes usar la prop `loadTranslations` para cargar traducciones desde un origen personalizado.
Esto resulta útil cuando necesitas cargar traducciones desde otra fuente, como una API personalizada.

```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] */}
      {/* El contenido de tu app */}
    </GTProvider>
  );
}
```

### Configuración de renderizado

La configuración de renderizado controla cómo se cargan las traducciones.
Hay dos campos: `timeout` y `method`.

* `timeout` es la cantidad de milisegundos que se espera antes de mostrar un contenido alternativo si no se carga una traducción (valor predeterminado: `8000ms`).
* `method` es el método que se usa para cargar las traducciones (`"skeleton"`, `"replace"` o `"default"`).

```jsx title="App.tsx" copy
<GTProvider renderSettings={{ method: 'skeleton', timeout: 1000 }}>
  {/* El contenido de tu aplicación */}
</GTProvider>
```

Cada configuración de renderizado define un comportamiento de carga distinto:
`"skeleton"` devolverá `null` hasta que se carguen las traducciones.
`"replace"` devolverá el contenido alternativo hasta que se carguen las traducciones.
`"default"` devolverá `null` hasta que se carguen las traducciones, a menos que la configuración regional de contenido alternativo tenga el mismo idioma que la configuración regional actual (es decir, `en-US` y `en-GB`).
En ese caso, devolverá el contenido alternativo de inmediato hasta que se carguen las traducciones.

***

## Notas

* `<GTProvider>` debe envolver todos los [componentes `<T>`](/docs/react-native/api/components/t) y las demás funciones relacionadas con la traducción. Más información [aquí](/docs/react-native/api/components/gtprovider).

## Próximos pasos

* Obtén más información sobre el [componente `<T>`](/docs/react-native/guides/t) para traducir texto y componentes.