i18nextIntroduction
This is a i18next language detection plugin use to detect user language in the browser with support for:
- cookie (set cookie i18next=LANGUAGE)
- localStorage (set key i18nextLng=LANGUAGE)
- navigator (set browser language)
- querystring (append
?lng=LANGUAGEto URL) - htmlTag (add html language tag <html lang="LANGUAGE" ...)
- path (http://my.site.com/LANGUAGE/...)
- subdomain (http://LANGUAGE.site.com/...)
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:
import i18next from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
i18next
.use(LanguageDetector)
.init(i18nextOptions);As with all modules you can either pass the constructor function (class) to the i18next.use or a concrete instance.
Detector Options
{
// order and from where user language should be detected
order: ['querystring', 'cookie', 'localStorage', 'navigator', 'htmlTag', 'path', 'subdomain'],
// keys or params to lookup language from
lookupQuerystring: 'lng',
lookupCookie: 'i18next',
lookupLocalStorage: 'i18nextLng',
lookupFromPathIndex: 0,
lookupFromSubdomainIndex: 0,
// cache user language on
caches: ['localStorage', 'cookie'],
excludeCacheFor: ['cimode'], // languages to not persist (cookie, localStorage)
// optional expire and domain for set cookie
cookieMinutes: 10,
cookieDomain: 'myDomain',
// optional htmlTag with lang attribute, the default is:
htmlTag: document.documentElement,
// only detect languages that are in the whitelist
checkWhitelist: true,
// fallback to a similar whitelist language
// Example 1: Browser language is 'es'
// if 'es' is not found in whitelist, first fallback to any whitelist language that starts with 'es-', then fallback to fallbackLng ('es' -> 'es-*' -> fallbackLng)
// Example 2: Browser language is 'es-MX'
// if 'es-MX' is not found in whitelist, first fallback to 'es', then fallback to 'es-*', then fallback to fallbackLng ('es-MX' -> 'es' -> 'es-*' -> fallbackLng)
checkForSimilarInWhitelist: false,
// optional set cookie options, reference:[MDN Set-Cookie docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie)
cookieOptions: {path:'/'}
}Options can be passed in:
preferred - by setting options.detection in i18next.init:
import i18next from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
i18next
.use(LanguageDetector)
.init({
detection: options
});on construction:
import LanguageDetector from 'i18next-browser-languagedetector';
const languageDetector = new LanguageDetector(null, options);via calling init:
import LanguageDetector from 'i18next-browser-languagedetector';
const languageDetector = new LanguageDetector();
lngDetector.init(options);Adding own detection functionality
interface
export default {
name: 'myDetectorsName',
lookup(options) {
// options -> are passed in options
return 'en';
},
cacheUserLanguage(lng, options) {
// options -> are passed in options
// lng -> current language, will be called after init and on changeLanguage
// store it
}
};adding it
import LanguageDetector from 'i18next-browser-languagedetector';
const languageDetector = new LanguageDetector();
languageDetector.addDetector(myDetector);
i18next
.use(languageDetector)
.init({
detection: options
});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
