Multiple languages

🧑‍💻 Technical Support
5

Why pay for it when it’s free? I can even share my module, which I created last week for a project in 8th Wall. The module gets the user’s language from the browser.

// Example:
import { localize } from './searchPath/localization.js';

console.log( localize('loading_start_ar') ); // "Begin your AR Experience"

// localization.js

const DEFAULT_LANGUAGE = 'en';

// In addition to DEFAULT_LANGUAGE (English)
const supportedLanguages = {
  'sv-SE': 'sv',
  'sv': 'sv',
};

/**
 * Retrieves current language from memory, local storage, or browser.
 * Sets DEFAULT_LANGUAGE if the supported language isn't available.
 *
 * @return {string}
 */
const getCurrentLanguage = () => {
  window.currentLanguage = window.currentLanguage || localStorage.getItem('currentLanguage');

  if (!window.currentLanguage) {
    window.currentLanguage = supportedLanguages[navigator.language] || DEFAULT_LANGUAGE;
    setCurrentLanguage(window.currentLanguage);
  }

  return window.currentLanguage;
}

/**
 * Sets new language in local storage
 *
 * @param {string} newLang - Language code
 * @return {object}
 */
const setCurrentLanguage = (newLang) => {
  localStorage.setItem('currentLanguage', newLang);
  window.currentLanguage = newLang;

  return newLang;
}

/**
 * Gets new language from local storage
 * 
 * @param {string} key - a sentence or a unique string
 * @return {string} the translated text, or the key if the text doesn't exist
 */
const localize = (key) => {
  return getDictionary(key);
}

/**
 * Retrieves the dictionary and returns the correct translation based on the language
 * 
 * @param {string} key - a sentence or a unique string
 * @return {string} a text string based on language, default language, or "key" if the text doesn't exist
 */
const getDictionary = (key) => {
  let translation = dictionary[key];

  if (translation) {
    return dictionary[key][getCurrentLanguage()] || dictionary[key][DEFAULT_LANGUAGE] || key;
  }

  return key;
}

const dictionary = {
  'loading_start_ar': {
    'en': 'Begin your AR Experience',
    'sv': 'Starta din AR-upplevelse'
  },
}

export { getCurrentLanguage, setCurrentLanguage, localize };
1 Like