How to use i18next-browser-languagedetector - 10 common examples

return 'en';
    },

    cacheUserLanguage(lng: string, options: Object) {
        // options -> are passed in options
        // lng -> current language, will be called after init and on changeLanguage

        // store it
    }
};

i18next.use(LngDetector).init({
    detection: options
});

const lngDetector = new LngDetector(null, options);
lngDetector.init(options);
lngDetector.addDetector(myDetector);

static init(configLoader, cb) {
    // add custom language detector
    const languageDetector = new LanguageDetector();
    languageDetector.addDetector(customQueryStringDetector);
    //
    // init localization
    i18nextInstance = i18next
      .use(XHR)
      .use(languageDetector)
      .use(Cache)
      .init({
        whitelist: _.clone(SUPPORTED_LANGUAGES),
        nonExplicitWhitelist: true,
        lowerCaseLng: true,
        fallbackLng: 'cs',
        compatibilityJSON: 'v2', // breaking change with multi plural: https://github.com/i18next/i18next/blob/master/CHANGELOG.md#300

        detection: {
          // order and from where user language should be detected

export default (userlang) => {
  // setup LanguageDetector
  const langDetector = new LanguageDetector();
  langDetector.addDetector({
    name: 'userSettingDetector',
    lookup(options) {
      return userlang;
    },
    cacheUserlanguage(lng, options) {
    },
  });

  i18n
    .use(langDetector)
    .use(initReactI18next) // if not using I18nextProvider
    .init({
      debug: (process.env.NODE_ENV !== 'production'),
      resources,
      load: 'currentOnly',

// Copyright 2017-2019 @polkadot/react-components authors & contributors
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.

import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-xhr-backend';
import { initReactI18next } from 'react-i18next';

import uiSettings, { LANGUAGE_DEFAULT } from '@polkadot/ui-settings';

const languageDetector = new LanguageDetector();
languageDetector.addDetector({
  name: 'i18nLangDetector',
  lookup: () => {
    const i18nLang = uiSettings.i18nLang;
    return i18nLang === LANGUAGE_DEFAULT
      ? undefined
      : i18nLang;
  }
});

i18n
  .use(Backend)
  .use(languageDetector)
  .use(initReactI18next)
  .init({
    backend: {

import i18next from 'i18next';
import LngDetector from 'i18next-browser-languagedetector';
import { store } from '@jenkins-cd/js-extensions';
import XHR from 'i18next-xhr-backend';

import { UrlConfig } from '../urlconfig';
import { logging } from '../logging';
import { Fetch } from '../fetch';

const logger = logging.logger('io.jenkins.blueocean.i18n');

/**
 * Init language detector, we are going to use first queryString and then the navigator prefered language
 */
export const defaultLngDetector = new LngDetector(null, {
    // order and from where user language should be detected
    order: ['querystring', 'htmlTag', 'navigator'],
    // keys or params to lookup language from
    lookupQuerystring: 'language',
    // Don't use the default (document.documentElement) because that can
    // trigger the browsers auto-translate, which is quite annoying.
    htmlTag: window.document ? window.document.head : undefined,
});
const prefix = UrlConfig.getJenkinsRootURL() || '';
const FALLBACK_LANG = '';

function newPluginXHR(pluginName) {
    let pluginVersion = store.getPluginVersion(pluginName);

    if (!pluginVersion) {
        // if we do not have a version we may have an alias to resolve a resourceBUndle

import i18next from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";
import { en, ja } from "~/locales";

const lngDetector = new LanguageDetector(null, {
  order: ["localStorage", "cookie"],
  lookupCookie: "i18next",
  lookupLocalStorage: "i18next",
  caches: ["localStorage", "cookie"]
});

export default i18next
  .use(lngDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: "ja",
    resources: {
      ja,
      en
    },
    interpolation: {

export function Translation(translationConfig?: InitOptions, languageDetectorConfig?: LanguageDetectorOptions, onInit?: () => void): any {

    const lngDetector = new I18nextBrowserLanguageDetector();

    if (languageDetectorConfig) {
        lngDetector.init(languageDetectorConfig);
    }

    if (!translationConfig) {
        translationConfig = {};
    }

    if (!translationConfig.ns) {
        translationConfig.ns = [DEFAULT_NAMESPACE];
    }

    if (!translationConfig.defaultNS) {
        translationConfig.defaultNS = DEFAULT_NAMESPACE;
    }

export default (config) => {
  if (!i18n.isInitialized) {

    if (isNode) {
      const i18nextNodeBackend = eval("require('i18next-node-fs-backend')")
      const i18nextMiddleware = eval("require('i18next-express-middleware')")
      i18n.use(i18nextNodeBackend)
      if (config.serverLanguageDetection) {
        const serverDetectors = new i18nextMiddleware.LanguageDetector()
        config.customDetectors.forEach(detector => serverDetectors.addDetector(detector))
        i18n.use(serverDetectors)
      }
    } else {
      i18n.use(i18nextXHRBackend)
      if (config.browserLanguageDetection) {
        const browserDetectors = new I18nextBrowserLanguageDetector()
        config.customDetectors.forEach(detector => browserDetectors.addDetector(detector))
        i18n.use(browserDetectors)
      }
    }

    config.use.forEach(x => i18n.use(x))
    i18n.init(config)

  }
  return i18n
}

if (!silent) {
                createAlert(dispatch)({
                  type: 'success',
                  category: 'settings',
                  message: 'settingsSavedSuccessfully'
                });
              }
            })
        },
      });
    }

    if (newSettings.lang) {
      let newLang = newSettings.lang;
      if (newSettings.lang === 'auto') {
        newLang = new LanguageDetector().detectors.navigator.lookup()[0] || fallbackLng.default[0];
        if (newLang.length > 2 && fallbackLng.hasOwnProperty(newLang)) {
          newLang = fallbackLng[newLang][0];
        }
      }
      i18n.changeLanguage(newLang);
    }

    dispatch({
      type: SETTINGS_UPDATE,
      payload: newSettings
    });
  };
}