<GTProvider>

Descripción general

El componente <GTProvider> proporciona el contexto de Traducción General (GT) a sus elementos hijos, permitiéndoles 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 diccionarios, puedes especificar opcionalmente un id para limitar los datos del diccionario enviados al cliente, optimizando el rendimiento para diccionarios grandes.
• El componente <GTProvider> se utiliza tanto para uso en línea con <T> como para diccionarios.

Referencia

Props

Descripción

Devuelve

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

Ejemplos

Uso básico

Envuelve tu aplicación en <GTProvider> para agregar traducción a tu app. No olvides agregar una lista de locales soportados 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']}> // Enable Spanish and French // [!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 más información sobre el uso de diccionarios, consulta esta guía.

Agregando 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 locales manualmente como parámetro.

{
  "projectId": "your-project-id",
  "locales": ["es", "fr"],
  "defaultLocale": "en-US",
  "_versionId": "translation-version-id" // allows for rolling back to previous translations (autogenerated by the CLI)
}

Todo lo que tienes que hacer es 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 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.

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 para las traducciones. Hay dos campos: timeout y method.

• timeout es el número de milisegundos a esperar para que una traducción se cargue antes de mostrar un fallback (por defecto: 8000ms).
• method es el método a usar para cargar traducciones ("skeleton", "replace", o "default").

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

Cada configuración de renderizado dicta un comportamiento de carga diferente: "skeleton" retornará null hasta que las traducciones se carguen. "replace" retornará el contenido de fallback hasta que las traducciones se carguen. "default" retornará null hasta que las traducciones se carguen, a menos que el locale de fallback tenga el mismo idioma que el locale actual (es decir, en-US y en-GB). En este caso, retornará el contenido de fallback inmediatamente hasta que las traducciones se carguen.

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 useTranslations().