language-observer v1.5.1

1.2kB gzipped

Demo

➤ Install

$ yarn add language-observer

➤ Import

import LanguageObserver from 'language-observer';

➤ Usage

const languageObserver = new LanguageObserver();

languageObserver.init({ lang: 'eu' });

translations.js

globalThis.translations = globalThis.translations || {};

globalThis.translations['en'] = {
  app: {
    title: {
      main: "Application",
      settings: "Settings",
    },
    menu: {
      profile: "Profile",
    },
  },
  buttons: {
    save: "Save",
  },
};

globalThis.translations['es'] = {
  app: {
    title: {
      main: "Aplicación",
      settings: "Configuraciones",
    },
    menu: {
      profile: "Perfil",
    },
  },
  buttons: {
    save: "Guardar",
  },
};

Switching

document.querySelector('#change-lang-to-es')?.addEventListener('click', () => {
  languageObserver.loadLanguage('es');
});

HTML example

<p data-i18n="title.welcome"></p>

<img data-i18n-attr='{"alt": "image.altText"}' src="image.jpg" alt="Default Alt Text">

➤ Options

➤ Methods

➤ Example of using methods

Using the loadTranslations method

async function fetchTranslations(lang) {
  const response = await fetch(`/locales/${lang}.json`);

  return response.json();
}

languageObserver.loadTranslations('fr', fetchTranslations);

Using the getNestedTranslation method

const nestedValue = LanguageObserver.getNestedTranslation(
  globalThis.translations['en'],
  'app.menu.profile'
);

console.log(nestedValue);

➤ License

language-observer is released under MIT license