i18next-browser-languagedetector
Advanced tools
Package description
The i18next-browser-languagedetector is an npm package designed to automatically detect the user's language in a web browser environment. It integrates seamlessly with the i18next ecosystem, a popular internationalization framework for web applications. This package helps in providing a more personalized user experience by loading and applying language preferences based on various detection functionalities.
Language detection from query string
Detects the user's language preference from the query string of the URL. This is useful for applications that adjust the language based on URL parameters.
i18next.use(LanguageDetector).init({
detection: {
order: ['querystring', 'cookie', 'localStorage', 'navigator', 'htmlTag'],
lookupQuerystring: 'lng'
}
});Language detection from cookies
Detects the user's language preference from cookies. This method is beneficial for persisting language settings across sessions.
i18next.use(LanguageDetector).init({
detection: {
order: ['cookie', 'localStorage', 'navigator', 'htmlTag'],
lookupCookie: 'i18next'
}
});Language detection from browser settings
Automatically detects and sets the language based on the user's browser or system settings. This is the most straightforward approach for initial language detection.
i18next.use(LanguageDetector).init({
detection: {
order: ['navigator'],
}
});This package is similar to i18next-browser-languagedetector in that it detects the user's browser language. However, it is more simplistic and only focuses on detecting the browser's language without the integration capabilities with i18next or other internationalization frameworks.
js-lingui is a comprehensive internationalization library for JavaScript, which includes functionalities for language detection. While it provides similar features for detecting user language and loading translations, it is part of a larger i18n solution and not a standalone language detector like i18next-browser-languagedetector.
Readme
This is a i18next language detection plugin use to detect user language in the browser with support for:
?lng=LANGUAGE to URL)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
window.i18nextBrowserLanguageDetectorWiring 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.
The default options can be found here.
{
// order and from where user language should be detected
order: ['querystring', 'cookie', 'localStorage', 'sessionStorage', 'navigator', 'htmlTag', 'path', 'subdomain'],
// keys or params to lookup language from
lookupQuerystring: 'lng',
lookupCookie: 'i18next',
lookupLocalStorage: 'i18nextLng',
lookupSessionStorage: '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,
// optional set cookie options, reference:[MDN Set-Cookie docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie)
cookieOptions: { path: '/', sameSite: 'strict' },
// optional conversion function to use to modify the detected language code
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);
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
},
};
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.
FAQs
language detector used in browser environment for i18next
The npm package i18next-browser-languagedetector receives a total of 1,252,618 weekly downloads. As such, i18next-browser-languagedetector popularity was classified as popular.
We found that i18next-browser-languagedetector demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.