WebApps 2

i18n

i18n bundles are stored in the /i18n directory using a JSON format. The name of the file decides the language. A WebApp inherits locale from the containing page.

Bundle

// en.json
{
  "settings": "Settings",
  "welcomeTo": "Welcome to {0}!",
  "bye": "Bye!"
}

// sv.json
{
  "settings": "Inställningar",
  "welcomeTo": "Välkommen till {0}!",
  "bye": "Hejdå!"
}

Retrieving the translations

i18n.get(key [, varSubstitution...])

Retrieve the localized value (current render context determines applicable bundle).

import i18n from '@sitevision/api/common/i18n';

const logWelcome = () => {
   console.log(i18n.get('welcomeTo', 'Sitevision'));
   // Welcome to Sitevision!
   // - or -
   // Välkommen till Sitevision!
};

const logBye = () => {
   console.log(i18n.get('bye'));
   // Bye!
   // - or -
   // Hejdå!
};

i18n.forLocale(language) [@since 2024.04.2]

Retrieves a new i18n instance for a specific locale/language.

Note! Should be used in very rare circumstances only (i.e. "display swedish texts even though the app is rendered on an english page" etc).

import i18n from '@sitevision/api/common/i18n';

const logSwedishWelcomeAndGoodbye = () => {
   const svI18n = i18n.forLocale('sv');
   
   console.log(svI18n.get('welcomeTo', 'Sitevision'));
   // Welcome to Sitevision!
   
   console.log(svI18n.get('bye'));
   // Hejdå!
};