# 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 al contenido traducido.
Se requiere 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 del lado del cliente.
* Al trabajar con diccionarios, puedes especificar opcionalmente un `id` para limitar los datos del diccionario que se envían al cliente y optimizar el rendimiento en diccionarios grandes.
* El componente `<GTProvider>` se usa tanto para [`<T>` en línea](/docs/react-native/guides/t) como para [diccionarios](/docs/react-native/guides/dictionaries).

## Referencia

### Props

<TypeTable
  type={{
  children: {
    type: 'ReactNode',
    optional: false,
  },
  projectId: {
    type: 'string',
    optional: true,
  },
  'id?': {
    type: 'string',
    optional: true,
    default: 'undefined',
  },
  '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,
  },
  'metadata?': {
    type: 'object',
    optional: true,
  },
}}
/>

### Descripción

| Prop              | Descripción                                                                                                                                                                                                            |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children`        | Cualquier componente, o 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.                                                                                                                                     |
| `id?`             | El ID de un diccionario anidado para limitar los datos que se envían al cliente. Esto resulta útil en proyectos grandes con diccionarios extensos.                                                                     |
| `dictionary?`     | El diccionario de traducción del proyecto.                                                                                                                                                                             |
| `locales?`        | La lista de configuraciones regionales aprobadas para el proyecto.                                                                                                                                                     |
| `defaultLocale?`  | La configuración regional predeterminada que se usará si no se encuentra ninguna otra.                                                                                                                                 |
| `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 en tiempo de ejecución para obtener traducciones.                                                                                                                                                  |
| `renderSettings?` | La configuración para renderizar las traducciones.                                                                                                                                                                     |
| `_versionId?`     | El ID de la versión para obtener traducciones.                                                                                                                                                                         |
| `devApiKey?`      | La clave API para entornos de desarrollo.                                                                                                                                                                              |
| `metadata?`       | Metadatos adicionales que se pasan al contexto.                                                                                                                                                                        |

### Devuelve

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

## Ejemplos

### Uso básico

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

```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-native";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GTProvider locales={['es', 'fr']}> // Habilitar español y francés // [!code highlight]
      <App />
    </GTProvider> // [!code highlight]
  </StrictMode>
);
```


### Diccionarios

También puedes pasar un diccionario al componente `<GTProvider>` y acceder a él con el hook [`useTranslations`](/docs/react-native/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>
);
```

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


### Añadir configuración

Si no quieres 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), por lo que no tienes que especificar manualmente parámetros como las configuraciones regionales.

```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="index.js" copy
import config from "../gt.config.json";

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


### Cargador personalizado de traducciones

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

```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>
);
```


### Configuración de renderizado

La configuración de renderizado controla el comportamiento de carga de las traducciones.
Hay dos campos: `timeout` y `method`.

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

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

Cada configuración de renderizado determina un comportamiento de carga diferente:
`"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 alternativa 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

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

## Próximos pasos

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