Preferred Languages

import { preferredLanguages } from "mobx-web-api";

Allows tracking user's preferred languages

What's inside

Uses Navigator.languages and Window: languagechange event under the hood

Usage

import { preferredLanguages } from "mobx-web-api";
import { reaction } from "mobx";

console.log(preferredLanguages.current); // ru-RU
console.log(preferredLanguages.all); // ['ru-RU', 'en-US', 'ru', 'en']

reaction(
  () => preferredLanguages.current,
  (currentLanguage) => {
    console.log(
      `current language changed to ${currentLanguage}`
    );
  }
);

Properties

current

Current language from user's system

MDN Reference

all

All languages from user's system

MDN Reference

acceptLanguageHeader observable.ref

Allows to set string value from Accept-Language header of request. It can be helpful for SSR

MDN Reference

runInAction(() => {
  preferredLanguages.acceptLanguageHeader =
    request.headers['Accept-Language'];
})