# General Translation React SDKs (gt-react, gt-next): GTProvider
URL: https://generaltranslation.com/es/docs/react/reference/components/gt-provider.mdx
---

title: GTProvider
description: Proporciona la configuración regional activa y las traducciones a un árbol de componentes `gt-react` de General Translation. Referencia de API de GTProvider.

---

El componente `<GTProvider>` proporciona la configuración regional activa y sus traducciones a un árbol de componentes `gt-react` renderizado en el servidor. Úsalo cuando el servidor cargue las traducciones y las pase al cliente.

*Nota: las SPA de React inicializadas con [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) usan la caché global de traducciones y no necesitan un proveedor.*

*Disponible en `gt-react`, `gt-next`, `gt-tanstack-start` y `gt-react-native`. Los ejemplos importan desde `gt-react`; importa desde el paquete de tu framework en su lugar.*

*Nota: la forma en que la configuración regional y las traducciones llegan a `<GTProvider>` varía según el framework. En `gt-react`, las pasas como props (abajo); `gt-next`, `gt-tanstack-start` y `gt-react-native` las resuelven mediante su propia configuración, documentada en la sección de cada framework.*

## Descripción general [#overview]

Envuelve tu aplicación en `<GTProvider>` después de la [inicialización](/docs/react/reference/config#initialization). Pasa la `locale` activa y las `translations` de esa `locale`, cargadas con [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot).

```tsx
import { GTProvider } from 'gt-react';

<GTProvider locale={locale} translations={translations}>
  <App />
</GTProvider>
```

*Nota: [`loadTranslations`](/docs/react/reference/functions/load-translations), [`loadDictionary`](/docs/react/reference/functions/load-dictionary) y las credenciales van en la [llamada de inicialización](/docs/react/reference/config#initialization), no en `<GTProvider>`. El proveedor consume la configuración regional y las traducciones ya resueltas de forma síncrona.*

<Callout type="info">
  **Cambió en v11:** `<GTProvider>` de `gt-react` ya no acepta `config`, `loadTranslations`, `loadDictionary` ni credenciales. Traslada todo eso a la [llamada de inicialización](/docs/react/reference/config#initialization) y, en su lugar, pasa al proveedor la `locale` y las `translations` ya resueltas (desde [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot)).
</Callout>

## Cómo funciona [#how-it-works]

* **Traducciones síncronas.** El proveedor requiere `translations` de antemano para que el contenido traducido se renderice de forma síncrona, sin parpadeos de carga. Genera este objeto con [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot) después de la inicialización.
* **Contexto para el árbol.** En una configuración basada en proveedores, los componentes que están por debajo del proveedor leen de él la configuración regional activa, las traducciones, los diccionarios y la región.
* **Activar o desactivar la traducción.** Cuando `enableI18n` es `false`, el proveedor renderiza el contenido de la configuración regional de origen y omite la traducción, lo que resulta útil para previsualizar la aplicación sin traducir.

## Props [#props]

| Prop                            | Descripción                                                                                                     | Type        | Opcional | Predeterminado |
| ------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------- | -------- | -------------- |
| [`locale`](#locale)             | Configuración regional activa para el árbol.                                                                    | `string`    | No       | —              |
| [`translations`](#translations) | Traducciones para la configuración regional activa.                                                             | `object`    | No       | —              |
| [`dictionaries`](#dictionaries) | Diccionarios por configuración regional para [`useTranslations`](/docs/react/reference/hooks/use-translations). | `object`    | Sí       | —              |
| [`region`](#region)             | Código de región activo.                                                                                        | `string`    | Sí       | —              |
| [`enableI18n`](#enable-i18n)    | Traduce el contenido. Cuando es `false`, muestra la configuración regional de origen.                           | `boolean`   | Sí       | `true`         |
| [`children`](#children)         | El árbol de la aplicación.                                                                                      | `ReactNode` | Sí       | —              |

### `locale` [#locale]

**Tipo** `string` · **Obligatorio**

La configuración regional activa del árbol, indicada como un código BCP 47, como `es`. Puedes acceder a ella en los componentes descendientes con [`useLocale`](/docs/react/reference/hooks/use-locale).

### `translations` [#translations]

**Tipo** `object` · **Obligatorio**

Las traducciones de la configuración regional activa, en el formato que el proveedor puede consumir de forma síncrona. Genéralas con [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot) después de la inicialización.

### `dictionaries` [#dictionaries]

**Tipo** `object` · **Opcional**

Diccionarios por configuración regional que [`useTranslations`](/docs/react/reference/hooks/use-translations) usa para búsquedas por `id`. Omite esto si solo usas `<T>` y `useGT`.

### `region` [#region]

**Tipo** `string` · **Opcional**

El código de región activo (por ejemplo, `US` o `GB`), que se usa para el formato específico de la región y en los hooks y selectores de región.

### `enableI18n` [#enable-i18n]

**Tipo** `boolean` · **Opcional** · **Predeterminado** `true`

Indica si se traduce el contenido. Cuando es `false`, el proveedor muestra el contenido de la configuración regional de origen y omite la traducción.

### `children` [#children]

**Tipo** `ReactNode` · **Opcional**

El árbol de la aplicación. En una configuración con proveedor, todos los componentes que traduzcan o lean el estado de la configuración regional deben ser descendientes del proveedor.

## Ejemplos [#examples]

```tsx title="src/routes/root.tsx"
import {
  GTProvider,
  initializeGT,
  getTranslationsSnapshot,
  parseLocale,
} from 'gt-react';
import gtConfig from '../../gt.config.json';

const loadTranslations = (locale: string) =>
  import(`../_gt/${locale}.json`).then((m) => m.default);

initializeGT({ ...gtConfig, loadTranslations });

export async function loadRoot(request: Request) {
  const locale = parseLocale(request);
  return {
    locale,
    translations: await getTranslationsSnapshot(locale),
  };
}

export function Root({ locale, translations, children }) {
  return (
    <GTProvider locale={locale} translations={translations}>
      {children}
    </GTProvider>
  );
}
```

```tsx
// Vista previa de la app sin traducir (configuración regional de origen)
<GTProvider locale={locale} translations={translations} enableI18n={false}>
  <App />
</GTProvider>
```