Descripción general

La función loadTranslations es la forma principal de personalizar cómo se cargan las traducciones.

En producción, tus traducciones deben almacenarse para poder renderizarse en tu app. De forma predeterminada, tus traducciones se almacenarán en el GT CDN. Puedes especificar una función loadTranslations para obtener traducciones desde otra fuente, como:

• Desde el bundle de tu app (la opción más común)
• Desde una base de datos
• Desde una API
• Desde otro CDN

Hemos integrado compatibilidad para cargar traducciones desde archivos locales dentro del bundle de tu app. Sigue esta guía para configurar traducciones locales en tu app de React.

Referencias

Parámetros

Descripción

Devuelve

Una Promise<any> que se resuelve en una cadena o un objeto JSX que contiene las traducciones para la locale indicada.

Configuración

Debes importar la función loadTranslations y pasarla como prop al componente <GTProvider>.

import loadTranslations from './loadTranslations';

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

Ejemplos

Cargar traducciones desde archivos locales

Cuando se configura para usar traducciones locales, el comando gtx-cli translate guarda las traducciones en el directorio ./src/_gt.

export default async function loadTranslations(locale) {
  const translations = await import(`./_gt/${locale}.json`);
  return translations.default;
};

Carga las traducciones desde tu propio CDN

export default async function loadTranslations(locale) {
  try {
    const translations = await fetch(`https://tu-cdn.com/translations/${locale}.json`);
    const data = await translations.json();
    return data;
  } catch (e) {
    console.error(e);
    return {};
  }
};

Notas

• loadTranslations te permite personalizar la forma en que se cargan las traducciones en tu app en producción.
• Su caso de uso más común es añadir traducciones locales

Siguientes pasos