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

## Descripción general

El componente `<GTProvider>` proporciona el contexto de General Translation (GT) a sus componentes hijos, lo que les permite acceder a contenido traducido.
Es obligatorio 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.

* El componente `<GTProvider>` se usa tanto para [inline `<T>`](/docs/react/guides/t) como para [diccionarios](/docs/react/guides/dictionaries).

## Referencia

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

### Descripción

| Prop                | Descripción                                                                                                                                                                                                                                                              |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `children`          | Cualquier componente, o componente padre, que necesite traducir o acceder a información de traducción en el 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 configuraciones regionales aprobadas para el proyecto.                                                                                                                                                                                                       |
| `defaultLocale?`    | La configuración regional predeterminada que se usa 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 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 otros ajustes. Una alternativa a pasar estos valores como props individuales.                                                           |
| `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 runtime. Consulta el [quickstart](/docs/react) para ver cómo usarlo. |
| `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 de respaldo 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.                                                                                                                                                    |
| `enableI18n?`       | Indica si se habilitan las funciones de i18n. El valor predeterminado es `true`.                                                                                                                                                                                         |

### Devuelve

`React.JSX.Element|undefined` que contiene los `children` pasados a este componente.

## Ejemplos

### Uso básico

Envuelve tu aplicación en `<GTProvider>` para agregar traducción a tu aplicación.
No olvides agregar una [lista de configuraciones regionales admitidas](/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";

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/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/guides/dictionaries).


### Añadir configuración

Si no te convence 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 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 pasárselo 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 de traducciones personalizado

Puedes usar la prop `loadTranslations` para cargar traducciones desde un origen personalizado.
Esto resulta útil cuando necesitas cargar traducciones desde un origen distinto, 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 cómo se cargan 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 un valor de respaldo (predeterminado: `8000ms`).
* `method` es el método que se usa para cargar las 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 distinto:
`"skeleton"` devolverá `null` hasta que se carguen las traducciones.
`"replace"` devolverá el contenido de respaldo hasta que se carguen las traducciones.
`"default"` devolverá `null` hasta que se carguen las traducciones, a menos que la configuración regional de respaldo tenga el mismo idioma que la configuración regional actual (es decir, `en-US` y `en-GB`).
En ese caso, devolverá el contenido de respaldo de inmediato hasta que se carguen las traducciones.

***


## Notas

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

## Siguientes pasos

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