language-observer
Advanced tools
The LanguageObserver class provides a simple way to manage internationalization in your web application. It automates the process of applying translations and simplifies support for multiple languages.
LanguageObserver is a lightweight and flexible class designed to simplify internationalization in your web application. It automatically applies translations to elements on your page and supports dynamic content updates. By observing language changes via class modifications, it ensures seamless integration of nested translation structures and attribute-based localization.
1.2kB gzipped
➤ 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
| Option | Type | Default | Description |
|---|---|---|---|
lang | string | 'en' | (Optional) The language code to initialize with. If not provided, the language is detected from the <body> element's class. |
➤ Methods
| Method | Parameters | Returns | Description |
|---|---|---|---|
init(options?) | options: { lang?: string } | void | Initializes the observer. If a lang is provided in options, it loads and applies that language's translations. |
loadLanguage(lang) | lang: string | Promise | Loads and applies translations for the specified language. If translations are not found, falls back to the default language. |
applyTranslations() | none | Promise | Applies the current translations to all elements with data-i18n and data-i18n-attr attributes on the page. Useful for updating translations after dynamic content changes. |
updateTranslations() | none | void | Manually updates translations on the page. Call this method after adding new translations to globalThis.translations to apply them without changing the language or reloading the page. |
loadTranslations(lang, loader) | lang: string loader: (lang) => Promise | Promise | Asynchronously loads translations for the specified language using the provided loader function, then applies them if the language matches the current language. |
getNestedTranslation(obj, path) (static method) | obj: object path: string | any | Retrieves a nested translation value from an object using a dot-separated key path. Returns undefined if the key does not exist. |
➤ 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
FAQs
The LanguageObserver class provides a simple way to manage internationalization in your web application. It automates the process of applying translations and simplifies support for multiple languages.
The npm package language-observer receives a total of 0 weekly downloads. As such, language-observer popularity was classified as not popular.
We found that language-observer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.