loadTranslations()

Resumen

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

En producción, tus traducciones necesitan ser almacenadas 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 de 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

Retornos

Un Promise<any> que se resuelve en un string o un objeto JSX que contiene las traducciones para la configuración regional dada.

Configuración

Debe 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, las traducciones se guardan 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 capacidad 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