# General Translation React SDKs (gt-react, gt-next, gt-react-native): `` URL: https://generaltranslation.com/es/docs/react/reference/components/gt-provider.mdx Docs index: https://generaltranslation.com/llms.txt Description: Proporciona contexto de traducción y de configuración regional a un árbol de componentes de React. Referencia de API del componente ``. El contrato de `` depende del framework y del enrutador. Algunos proveedores reciben datos de configuración regional como props, mientras que otros los resuelven y cargan automáticamente. *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`.* ## Descripción general [#overview] | Runtime | Props obligatorias | Fuente de configuración regional y de traducción | | ----------------------------------- | ------------------------ | ------------------------------------------------------------------------------------- | | Renderizado de React en el servidor | `locale`, `translations` | Tu loader del servidor | | App Router de Next.js | Ninguna | La solicitud y la caché de `gt-next` | | Pages Router de Next.js | `locale`, `translations` | Wrappers de datos de Pages Router | | TanStack Start | `locale`, `translations` | Tu loader de solicitudes | | React Native | Ninguna | Detección nativa de la configuración regional y el loader de traducciones configurado | La sección [Props](#props) indica exactamente qué variantes de proveedor aceptan cada prop. ## Contratos de los frameworks [#contracts] Las aplicaciones de `gt-react` renderizadas en el servidor pasan la configuración regional activa y una instantánea de traducciones. Cargue la instantánea después de [`initializeGT`](/docs/react/reference/config#initialize). ```tsx import { GTProvider } from 'gt-react'; ``` [`loadTranslations`](/docs/react/reference/functions/load-translations), [`loadDictionary`](/docs/react/reference/functions/load-dictionary) y las credenciales deben incluirse en la [llamada de inicialización](/docs/react/reference/config#initialization), no en el proveedor. **Cambió en v11:** el `` de `gt-react` ya no acepta `config`, [`loadTranslations`](/docs/react/reference/functions/load-translations), [`loadDictionary`](/docs/react/reference/functions/load-dictionary) ni credenciales. Muévalos a [`initializeGT`](/docs/react/reference/config#initialize) y, a continuación, pase al proveedor los valores resueltos de `locale` y `translations`. ### App Router El proveedor de App Router es un componente de servidor asíncrono que solo tiene la prop `children`. Resuelve la configuración regional, la región, el estado de traducción, las traducciones y los diccionarios a partir de la solicitud y la caché de `gt-next`. ```tsx title="app/layout.tsx" import { GTProvider } from 'gt-next'; export default function RootLayout({ children }) { return {children}; } ``` No pase `locale`, `translations`, `dictionaries`, `region` ni `enableI18n` al proveedor de App Router. ### Pages Router Pages Router vuelve a exportar el proveedor compartido de `gt-react`. Pase los valores inyectados mediante [renderizado del lado del servidor](/docs/react/nextjs-pages-router-quickstart#quickstart) o [generación estática](/docs/react/nextjs/pages-router-static-site-generation), y proporcione `_reload` cuando los cambios de configuración regional deban usar el enrutamiento de Next.js. ```tsx title="pages/_app.tsx" import Router from 'next/router'; import { GTProvider } from 'gt-next'; { void Router.push(Router.pathname, Router.asPath, { locale }); }} > ``` `gt-tanstack-start` vuelve a exportar el proveedor compartido. Pase la configuración regional activa y su instantánea de traducciones después de registrar [`gtMiddleware`](/docs/react/tanstack-start/reference/functions/gt-middleware). ```tsx import { GTProvider } from 'gt-tanstack-start'; ``` El proveedor de React Native detecta la configuración regional inicial, carga sus traducciones y vuelve a renderizarse cuando cambia la configuración regional. `locale` es opcional y `translations` no es una prop pública. ```tsx import { GTProvider } from 'gt-react-native'; ``` Pase `fallback` para sustituir el indicador de carga integrado mientras se cargan las traducciones. ## Cómo funciona [#how-it-works] * **React, TanStack Start y Pages Router de Next.js.** El proveedor recibe de antemano una instantánea de traducciones, por lo que el contenido traducido se renderiza de forma síncrona. * **App Router de Next.js.** El proveedor del servidor lee el estado de la solicitud y carga las traducciones y los diccionarios antes de renderizar su límite de cliente. * **React Native.** El proveedor carga las traducciones para la configuración regional resuelta mediante Suspense. Renderiza `fallback` hasta que estén disponibles. * **Contexto para el árbol.** Los componentes descendientes leen la configuración regional activa, las traducciones, los diccionarios, la región y el estado de traducción desde el contexto del proveedor. * **Cambios de configuración regional.** Los proveedores web guardan la configuración regional en una cookie y ejecutan su comportamiento de recarga. React Native la guarda en el almacenamiento nativo y actualiza el estado del proveedor. ## Props [#props] | Prop | Descripción | Tipo | Opcional | Predeterminado | | ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------ | ------------------------------------------------------------------- | | [`children`](#children) | Árbol de componentes. Lo acepta cualquier proveedor. | `ReactNode` | Sí | — | | [`locale`](#locale) | Configuración regional activa. Obligatoria en React, TanStack Start y Next.js Pages Router; opcional en React Native; no se acepta en Next.js App Router. | `string \| LocaleCandidates` | Específico del framework | Configuración regional del dispositivo o almacenada en React Native | | [`translations`](#translations) | Instantánea de traducciones. Obligatoria en React, TanStack Start y Next.js Pages Router; no se acepta en Next.js App Router ni en React Native. | `object` | Específico del framework | — | | [`dictionaries`](#dictionaries) | Diccionarios por configuración regional. Los aceptan React, TanStack Start, Next.js Pages Router y React Native; se cargan internamente en Next.js App Router. | `object` | Sí | — | | [`region`](#region) | Región activa. La aceptan React, TanStack Start, Next.js Pages Router y React Native; se resuelve internamente en Next.js App Router. | `string` | Sí | Región almacenada o `undefined` | | [`enableI18n`](#enable-i18n) | Indica si se debe traducir. Lo aceptan React, TanStack Start, Next.js Pages Router y React Native; se resuelve internamente en Next.js App Router. | `boolean` | Sí | `true` | | [`fallback`](#fallback) | Contenido alternativo mientras React Native obtiene las traducciones. Solo para React Native. | `ReactNode` | Sí | Indicador de carga | | [`_reload`](#reload) | Callback de recarga del framework. Lo aceptan React, TanStack Start y Next.js Pages Router; no se acepta en Next.js App Router ni en React Native. | `(state) => void` | Sí | Específico del framework | | [`onMissingTranslation`](#missing-translation) | Gestiona una traducción inline o JSX faltante. No se acepta en Next.js App Router. | `OnMissingTranslation` | Sí | — | | [`onMissingDictionaryEntry`](#missing-dictionary-entry) | Gestiona una entrada de diccionario faltante. No se acepta en Next.js App Router. | `OnMissingDictionaryEntry` | Sí | — | | [`onMissingDictionaryObj`](#missing-dictionary-object) | Gestiona un objeto de diccionario faltante. No se acepta en Next.js App Router. | `OnMissingDictionaryObj` | Sí | — | ### `children` [#children] **Tipo** `ReactNode` · **Opcional** El árbol de componentes que recibe el contexto de traducción. Cada variante de proveedor acepta `children`. ### `locale` [#locale] **Tipo** `string | LocaleCandidates` · **Específico del framework** La configuración regional activa del árbol: * Obligatoria como un `string` resuelto en React, TanStack Start y Next.js Pages Router. * Opcional en React Native, donde acepta configuraciones regionales candidatas y toma de forma predeterminada la configuración regional almacenada o la del dispositivo. * El proveedor de Next.js App Router no la acepta, ya que resuelve internamente la configuración regional de la solicitud. Accede al resultado en los componentes descendientes con [`useLocale`](/docs/react/reference/hooks/use-locale). ### `translations` [#translations] **Tipo** `Record>` · **Específico del framework** Una instantánea de traducciones generada por [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot). Es obligatoria en React, TanStack Start y Next.js Pages Router para que esos proveedores puedan resolver el contenido de forma síncrona. El proveedor de Next.js App Router carga la instantánea internamente. El proveedor de React Native no acepta la prop `translations` y carga por sí mismo las traducciones de la configuración regional activa. ### `dictionaries` [#dictionaries] **Tipo** `Record` · **Opcional** Diccionarios por configuración regional que [`useTranslations`](/docs/react/reference/hooks/use-translations) usa para búsquedas por `id`. React, TanStack Start, Next.js Pages Router y React Native aceptan esta prop. El proveedor de Next.js App Router carga los diccionarios internamente. ### `region` [#region] **Tipo** `string` · **Opcional** El código de región activo, como `US` o `GB`. React, TanStack Start, Pages Router de Next.js y React Native aceptan esta prop. App Router de Next.js resuelve la región a partir de la solicitud. ### `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. React, TanStack Start, Next.js Pages Router y React Native aceptan esta prop. Next.js App Router resuelve el valor a partir del estado de la solicitud. ### `fallback` [#fallback] **Tipo** `ReactNode` · **Opcional** Contenido exclusivo de React Native que se muestra mientras se cargan las traducciones. El valor predeterminado es un `ActivityIndicator` centrado de React Native. ### `_reload` [#reload] **Tipo** `(state: { locale: string; region: string | undefined; enableI18n: boolean }) => void` · **Opcional** · **Predeterminado** específico del framework Callback tras un cambio en la configuración regional web, la región o el estado de traducción. React y TanStack Start la aceptan mediante el proveedor compartido. Next.js Pages Router la utiliza para sustituir una recarga completa de la página por `Router.push`. `gt-react` sin configuración y Next.js Pages Router recurren a `window.location.reload`. TanStack Start proporciona navegación por pathname cuando el enrutamiento por configuración regional está habilitado. El proveedor de Next.js App Router proporciona su propio callback y no acepta esta prop: normalmente llama a `router.refresh`, pero recarga el documento cuando el middleware debe eliminar un prefijo de configuración regional no predeterminado después de cambiar a la configuración regional predeterminada. React Native actualiza el estado del proveedor en su lugar. ### `onMissingTranslation` [#missing-translation] **Tipo** `OnMissingTranslation` · **Opcional** Callback avanzado para cuando falte una traducción inline o JSX. Los proveedores para navegador y React Native pueden usar un callback proporcionado. Los proveedores renderizados en el servidor instalan su propio manejador de solicitud. ### `onMissingDictionaryEntry` [#missing-dictionary-entry] **Tipo** `OnMissingDictionaryEntry` · **Opcional** Callback avanzado para cuando falta una entrada del diccionario. Los proveedores para navegador y React Native pueden usar un callback proporcionado. Los proveedores renderizados en el servidor instalan su propio manejador de solicitud. ### `onMissingDictionaryObj` [#missing-dictionary-object] **Tipo** `OnMissingDictionaryObj` · **Opcional** Callback avanzada para cuando falta un objeto de diccionario. Los proveedores para navegador y React Native pueden usar una callback proporcionada. Los proveedores renderizados en el servidor instalan su propio manejador de solicitud. ## Sitemap See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.