# Introduction
[](https://www.npmjs.com/package/i18next-browser-languagedetector)
[]()
[](https://david-dm.org/i18next/i18next-browser-languagedetector)
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 '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:
```js
import i18next from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
i18next
.use(LanguageDetector)
.init({
detection: options
});
```
on construction:
```js
import LanguageDetector from 'i18next-browser-languagedetector';
const languageDetector = new LanguageDetector(null, options);
```
via calling init:
```js
import LanguageDetector from 'i18next-browser-languagedetector';
const languageDetector = new LanguageDetector();
languageDetector.init(options);
```
## Adding own detection functionality
### interface
```js
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
```js
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](#detector-options).
--------------
Gold Sponsors
---
**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](http://locize.com/?utm_source=react_i18next_readme&utm_medium=github) you directly support the future of i18next and react-i18next.
---