@shore/i18n

i18n

A wrapper around some i18next functionality - encapsulating namespaced translations.

Usage

Translation file ./de/translation.json:

{
  "english": "Englisch"
}

Translation file ./de/my-namespace.json:

{
  "Hello world!": "Hallo Welt!"
}

Application example:

import i18n from '@shore/i18n';

i18n.init({
  locale: 'de',
  ...
})
.then(() => {
  console.log(i18n.locale); // -> 'de'
  console.log(i18n.t('english')); // -> 'Englisch'

  return i18n.loadNamespace('my-namespace');
})
.then((i18nNamespaced) => {
  console.log(i18nNamespaced.t('Hello world!')); // -> 'Hallo Welt!'
});

If i18next should not be bundled because the embedding page already made it globally available through window.i18n and called init on it, use:

import i18n from '@shore/i18n/no-bundled-i18next';

console.log(i18n.locale); // -> 'de'
i18n.loadNamespace('my-namespace')
.then((i18nNamespaced) => {
  console.log(i18nNamespaced.t('Hello world!')); // -> 'Hallo Welt!'
});

If you want to conveniently use namespaced version of t and exists across modules:

// i18n.js
import i18n from '@shore/i18n/no-bundled-i18next';

const namespace = 'my-namespace';

export default i18n;
export function loadDefaultNamespace() {
  return i18n.loadNamespace(namespace);
}
export const i18nNamespaced = i18n.useNamespace(namespace);


// my-module.js
import { i18nNamespaced as i18n } from './i18n';

export function helloWorld() {
  return i18n.t('Hello World!');
}


// main.js
import { loadDefaultNamespace } from './i18n';
import { helloWorld } from './my-module';

loadDefaultNamespace().then(() => {
  console.log(helloWorld()); // -> 'Hallo Welt!'
});