Introduction
This is a i18next language detection plugin use to detect user language in the browser with support for:
- cookie (set cookie i18next=LANGUAGE)
- sessionStorage (set key i18nextLng=LANGUAGE)
- localStorage (set key i18nextLng=LANGUAGE)
- navigator (set browser language)
- querystring (append
?lng=LANGUAGE
to 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
The default options can be found here.
{
order: ['querystring', 'cookie', 'localStorage', 'sessionStorage', 'navigator', 'htmlTag', 'path', 'subdomain'],
lookupQuerystring: 'lng',
lookupCookie: 'i18next',
lookupLocalStorage: 'i18nextLng',
lookupSessionStorage: 'i18nextLng',
lookupFromPathIndex: 0,
lookupFromSubdomainIndex: 0,
caches: ['localStorage', 'cookie'],
excludeCacheFor: ['cimode'],
cookieMinutes: 10,
cookieDomain: 'myDomain',
htmlTag: document.documentElement,
cookieOptions: { path: '/', sameSite: 'strict' },
convertDetectedLanguage: 'Iso15897',
convertDetectedLanguage: (lng) => lng.replace('-', '_')
}
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();
languageDetector.init(options);
Adding own detection functionality
interface
export default {
name: 'myDetectorsName',
lookup(options) {
return 'en';
},
cacheUserLanguage(lng, options) {
},
};
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.
localization as a service - locize.com
Needing a translation management? Want to edit your translations with an InContext Editor? Use the orginal provided to you by the maintainers of i18next!
With using locize you directly support the future of i18next and react-i18next.