I18N

Source Codev1.2.2

We are leveraging the Polyglot in order to integrate within our way of doing things:

npm i -S @bluelibs/x-ui-react-bundle @bluelibs/x-ui-i18n-bundle

import { Kernel } from "@bluelibs/core";import { XUII18NBundle } from "@bluelibs/x-ui-i18n-bundle";import { XUIReactBundle } from "@bluelibs/x-ui-react-bundle";
const kernel = new Kernel({  bundles: [    new XUIReactBundle(),    new XUII18NBundle({      defaultLocale: "fr", // default is "en",      // You can omit this if you want to use the default options for polyglots      polyglots: [        // ...rest represents the rest of custom options for Polyglot constructor, includign phrases        { locale: "en", ...rest },      ],    });  ]})

import { useTranslate } from "@bluelibs/x-ui-i18n-bundle";
function Component() {  const t = useTranslate();  const tWithPRefix = useTranslate("pages.home"); // tWithPrefix("header.text")
  return <h1>{t('pages.home.header.text')</h1>;}

Changing the language of the default:

import { I18NService } from "@bluelibs/x-ui";
class UIAppBundle extends Bundle {  async init() {    const i18n = this.container.get(I18NService);
    // Add messages to your locale    i18n.extend("en", messages);
    // get it from window.locale or session, or cookies, or however you find fit    const locale = "";    i18n.setLocale(locale);  }}

When you change your language from the app simply use the I18NService and run setLocale().

Events

You can listen to when local is changed via LocaleChangedEvent:

class UIAppBundle extends Bundle {  async prepare() {    this.eventManager.addListener(LocaleChangedEvent, (e) => {      // e.data.locale    });  }}

Have suggestions or want to contribute to the documentation? Edit this page on GitHub!