<GTProvider>

Resumen

El componente <GTProvider> proporciona contexto de Traducción General (GT) a sus hijos, permitiéndoles acceder al contenido traducido. Es necesario para cualquier traducción del lado del cliente en su aplicación.

Cuándo Usar

Envuelva toda su aplicación en <GTProvider> para habilitar traducciones en el cliente.
Al trabajar con diccionarios, opcionalmente especifique un id para limitar los datos del diccionario enviados al cliente, optimizando el rendimiento para diccionarios grandes.
El componente <GTProvider> se utiliza tanto para traducciones en línea <T> como para diccionarios.

Referencia

Props

Prop	Type	Default
`children?`	`ReactNode`	-
`projectId?`	`string`	-
`id??`	`string`	`undefined`
`dictionary??`	`Dictionary`	`defaultDictionary`
`locales??`	`string[]`	-
`defaultLocale??`	`string`	`libraryDefaultLocale`
`locale??`	`string`	-
`cacheUrl??`	`string`	`'https://cdn.gtx.dev'`
`runtimeUrl??`	`string`	`'https://runtime.gtx.dev'`
`renderSettings??`	`RenderSettings`	`defaultRenderSettings`
`_versionId??`	`string`	-
`devApiKey??`	`string`	-
`metadata??`	`object`	-

Descripción

Prop	Descripción
`children`	Cualquier componente o los padres de cualquier componente que necesiten traducir o acceder a la información de traducción en el lado del cliente. Estos deben 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 Traducción General.
`id?`	El ID de un diccionario anidado para limitar los datos enviados al cliente. Esto es útil para proyectos grandes con diccionarios extensos.
`dictionary?`	El diccionario de traducción para el proyecto.
`locales?`	La lista de locales aprobados para el proyecto.
`defaultLocale?`	El local predeterminado a usar si no se encuentra otro local.
`locale?`	El local actual, si ya está establecido.
`cacheUrl?`	La URL del servicio de caché para obtener traducciones.
`runtimeUrl?`	La URL del servicio de tiempo de ejecución para obtener traducciones.
`renderSettings?`	La configuración para renderizar traducciones.
`_versionId?`	El ID de la versión para obtener traducciones.
`devApiKey?`	La clave API para entornos de desarrollo.
`metadata?`	Metadatos adicionales para pasar al contexto.

Retorna

React.JSX.Element|undefined que contiene los hijos que fueron pasados 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 locales soportados para habilitar la traducción.

index.js

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 luego acceder a él con el hook useDict().

index.js

import dictionary from "./dictionary.js";
 
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GTProvider locales={['es', 'fr']} dictionary={dictionary}> // [!code highlight]
      <App />
    </GTProvider>
  </StrictMode>
);

Para más información sobre el uso de diccionarios, consulta esta guía.

Añadiendo configuración

Si no te gusta pasar props directamente al componente <GTProvider>, puedes crear un archivo de configuración y pasarlo al componente. También se integra directamente con el comando gtx-cli translate, por lo que no tienes que especificar cosas como los locales manualmente como un parámetro.

gt.config.json

{
  "projectId": "your-project-id",
  "locales": ["es", "fr"],
  "defaultLocale": "en-US",
  "_versionId": "translation-version-id" // permite retroceder a traducciones anteriores (autogenerado por el CLI)
}

Todo lo que tienes que hacer es pasar esto al componente <GTProvider>.

index.js

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

Cargador de traducción personalizado

Puedes usar la prop loadTranslations para cargar traducciones desde una fuente personalizada. Esto es útil cuando necesitas cargar traducciones desde una fuente diferente, como una API personalizada.

index.js

import loadTranslations from "./loadTranslations";
 
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GTProvider locales={['es', 'fr']} loadTranslations={loadTranslations}> // [!code highlight]
      <App />
    </GTProvider>
  </StrictMode>
);

Notas

El <GTProvider> debe envolver todos los componentes <T> y otras funciones relacionadas con la traducción. Aprende más aquí.

Próximos pasos

Aprende más sobre el componente <T> para traducir texto y componentes.
Consulta los componentes y funciones de traducción: <T>, useGT(), o useDict().

<GTProvider>

En esta página