Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

i18next-browser-languagedetector

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

i18next-browser-languagedetector

language detector used in browser environment for i18next

4.0.2
Source
npm

Version published: 5 years ago

Weekly downloads: 1.6M; decreased by-8.9%

Maintainers: 2

Weekly downloads

Created: 9 years ago

What is i18next-browser-languagedetector?

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.

What are i18next-browser-languagedetector's main 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'],
  }
});

Other packages similar to i18next-browser-languagedetector

Introduction

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=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

{
  // 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
}

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

Keywords

FAQs

What is i18next-browser-languagedetector?

Is i18next-browser-languagedetector popular?

Is i18next-browser-languagedetector well maintained?

Package last updated on 21 Feb 2020

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.

Install