Introduction

This is a i18next language detection plugin use to detect user language in the browser with support for:

• cookie
• localStorage
• navigator
• querystring (append ?lng=LANGUAGE to URL)
• htmlTag
• path
• subdomain

Getting started

Source can be loaded via npm, bower or downloaded from this repo.

# npm package
$ npm install i18next-browser-languagedetector

# bower
$ bower install i18next-browser-languagedetector

• If you don't use a module loader it will be added to window.i18nextBrowserLanguageDetector

Wiring up:

1import i18next from 'i18next';
2import LanguageDetector from 'i18next-browser-languagedetector';
3
4i18next
5  .use(LanguageDetector)
6  .init(i18nextOptions);

As with all modules you can either pass the constructor function (class) to the i18next.use or a concrete instance.

Detector Options

1{
2  // order and from where user language should be detected
3  order: ['querystring', 'cookie', 'localStorage', 'navigator', 'htmlTag', 'path', 'subdomain'],
4
5  // keys or params to lookup language from
6  lookupQuerystring: 'lng',
7  lookupCookie: 'i18next',
8  lookupLocalStorage: 'i18nextLng',
9  lookupFromPathIndex: 0,
10  lookupFromSubdomainIndex: 0,
11
12  // cache user language on
13  caches: ['localStorage', 'cookie'],
14  excludeCacheFor: ['cimode'], // languages to not persist (cookie, localStorage)
15
16  // optional expire and domain for set cookie
17  cookieMinutes: 10,
18  cookieDomain: 'myDomain',
19
20  // optional htmlTag with lang attribute, the default is:
21  htmlTag: document.documentElement
22}

Options can be passed in:

preferred - by setting options.detection in i18next.init:

1import i18next from 'i18next';
2import LanguageDetector from 'i18next-browser-languagedetector';
3
4i18next
5  .use(LanguageDetector)
6  .init({
7    detection: options
8  });

on construction:

1  import LanguageDetector from 'i18next-browser-languagedetector';
2  const languageDetector = new LanguageDetector(null, options);

via calling init:

1  import LanguageDetector from 'i18next-browser-languagedetector';
2  const languageDetector = new LanguageDetector();
3  lngDetector.init(options);

Adding own detection functionality

interface

1export default {
2  name: 'myDetectorsName',
3
4  lookup(options) {
5    // options -> are passed in options
6    return 'en';
7  },
8
9  cacheUserLanguage(lng, options) {
10    // options -> are passed in options
11    // lng -> current language, will be called after init and on changeLanguage
12
13    // store it
14  }
15};

adding it

1  import LanguageDetector from 'i18next-browser-languagedetector';
2  const languageDetector = new LanguageDetector();
3  languageDetector.addDetector(myDetector);
4
5  i18next
6    .use(languageDetector)
7    .init({
8      detection: options
9    });

Don't forget: You have to add the name of your detector (myDetectorsName in this case) to the order array in your options object. Without that, your detector won't be used. See the Detector Options section for more.

---

Gold Sponsors