Set default language using i18next + LanguageDetector

user_14484940 0
Viewed 988

I'm using i18next for the first time in the project. My app has two languages: swedish(sv) and english(en). What I don't understand is that it for some reason sets en to the default language. For example when a user visits the site for the first time. This is my code:

import LanguageDetector from "i18next-browser-languagedetector";
const options = {
  order: ['cookie', 'localStorage', 'sessionStorage', 'navigator', 'htmlTag', 'path', 'subdomain'],
  lookupLocalStorage: 'lng'
}

i18next.use(LanguageDetector).use(initReactI18next).init({
  interpolation: { escapeValue: false },
  detection: options,
  fallbackLng: 'sv',
  supportedLngs: ['sv', 'en'],
  resources: {
      en: {
          common: common_en
      },
      sv: {
          common: common_sv
      },
  },
});

As I set fallbackLng: 'sv', the default language should be Swedish, but it's not? When a user visits the site for the first time, i18n sets lng to en in localstorage. Any ideas?

i18next react-i18next reactjs internationalization
2 Answers

Use this trick in your index.js

if (localStorage.getItem('i18nextLng') === null) {
  localStorage.setItem('i18nextLng', 'sv')
}

i18next.use(LanguageDetector)...

Hope this help!

user_194642960

[...] the default language should be Swedish [...]

No, because in your configuration you're taking the navigator into account. If the browser is configured to prefer English, your site will default to English (as it should).

user_35589600
Related