Descripción general

El componente <GTProvider> proporciona el contexto de General Translation (GT) a sus children, 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 tu aplicación en <GTProvider> para habilitar las traducciones en el cliente.
• Al trabajar con diccionarios, puedes especificar un id para limitar los datos del diccionario enviados al cliente y optimizar el rendimiento con diccionarios grandes.
• El componente <GTProvider> se utiliza tanto para el componente <T> en línea como para diccionarios.

Referencias

Props

Descripción

Devuelve

React.JSX.Element|undefined que contiene los children que se pasaron a este componente.

Ejemplos

Uso básico

Envuelve tu aplicación en <GTProvider> para habilitar la traducción. No olvides agregar una lista de locales compatibles para activar la traducción.

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']}> // Habilita 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 useTranslations.

import diccionario from "./diccionario.js";

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

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

Agregar 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, así que no tienes que especificar manualmente parámetros como los locales.

{
  "projectId": "your-project-id",
  "locales": ["es", "fr"],
  "defaultLocale": "en-US",
  "_versionId": "translation-version-id" // permite volver a traducciones anteriores (generado automáticamente por la CLI)
}

Solo tienes que pasar esto al componente <GTProvider>.

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 una fuente personalizada. Esto es útil cuando necesitas cargarlas desde una fuente distinta, como una API propia.

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 el número de milisegundos que se esperará a que se cargue una traducción antes de mostrar el contenido de respaldo predeterminado (por defecto: 8000ms).
• method es el método que se usará para cargar las traducciones ("skeleton", "replace" o "default").

<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 de respaldo predeterminado hasta que se carguen las traducciones. "default" devolverá null hasta que se carguen las traducciones, a menos que el locale de respaldo tenga el mismo idioma que el locale actual (p. ej., en-US y en-GB). En ese caso, devolverá el contenido de respaldo predeterminado de inmediato hasta que se carguen las traducciones.

Notas

• <GTProvider> debe envolver todos los componentes <T> y las demás funciones relacionadas con la traducción. Más información aquí.

Próximos pasos

• Obtén más información sobre el componente <T> para traducir texto y componentes.