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 necesario 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 dictionaries, puedes especificar un id para limitar los datos del diccionario que se envían al cliente y así optimizar el rendimiento en dictionaries grandes.
• El componente <GTProvider> se utiliza tanto para inline <T> como para dictionaries.

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 con <GTProvider> para agregar traducción a tu app. No olvides incluir una lista de locales admitidos para habilitar 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']}> // Activa 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 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 dictionaries, consulta esta guía.

Agregar configuración

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

{
  "projectId": "your-project-id",
  "locales": ["es", "fr"],
  "defaultLocale": "en-US",
  "_versionId": "translation-version-id" // permite volver a traducciones anteriores (autogenerado 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 cargar traducciones desde otra fuente, 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 el comportamiento de carga de las traducciones. Hay dos campos: timeout y method.

• timeout es la cantidad de milisegundos que se espera a que cargue una traducción antes de mostrar el contenido de respaldo predeterminado (valor predeterminado: 8000 ms).
• method es el método que se utiliza para cargar traducciones ("skeleton", "replace" o "default").

<GTProvider renderSettings={{ method: "skeleton", timeout: 1000 }}>
  <App />
</GTProvider>

Cada ajuste de renderizado dicta 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 la locale de respaldo use el mismo idioma que la locale actual (p. ej., en-US y en-GB). En ese caso, devolverá de inmediato el contenido de respaldo predeterminado 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.