loadTranslations()

Descripción general

La función loadTranslations() es la forma principal de personalizar el comportamiento de carga de traducciones.

En producción, tus traducciones deben almacenarse para que puedan ser renderizadas en tu aplicación. Por defecto, tus traducciones se almacenarán en el GT CDN. Puedes especificar una función loadTranslations() para obtener traducciones desde una fuente diferente, como:

• Desde el paquete de tu aplicación (lo más común)
• Desde una base de datos
• Desde una API
• Desde un CDN diferente

Hemos integrado soporte para cargar traducciones desde archivos locales en el paquete de tu aplicación. Sigue esta guía para configurar traducciones locales en tu aplicación React.

Referencia

Parámetros

Descripción

Retorna

Un Promise<any> que se resuelve en un string o un objeto JSX que contiene las traducciones para el locale dado.

Configuración

Debes importar la función loadTranslations() y asignarla como una 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;
};

Cargar traducciones desde tu propio CDN

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

Notas

• loadTranslations() te da la posibilidad de personalizar cómo se cargan las traducciones en tu aplicación en producción.
• Su caso de uso más común es para agregar traducciones locales

Próximos pasos

• Aprende por qué podrías querer usar traducciones locales