react-i18next#initReactI18next JavaScript Examples

i18n
  .use(backend)
  .use(languageDetector)
  .use(initReactI18next)
  .init({
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    },
    // string or array of namespaces to load
    ns: ['common', 'navMenu', 'patientBoard', 'physicianView'],
    defaultNS: 'patientBoard',
    // array of allowed languages
    // @toDo add other languages
    whitelist,
    // language to use if translations in user language are not available.
    fallbackLng: 'en',
    // if debug: true logs info level to console output. Helps finding issues with loading not working.
    debug: false,

    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },

    react: {
      useSuspense: false,
    },
  });

i18next
  .use(XHR)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    backend: {
      loadPath: '/locales/{{lng}}.json',
    },
    react: {
      useSuspense: true,
    },
    fallbackLng: 'en',
    preload: ['en'],
    keySeparator: false,
    interpolation: { escapeValue: false },
  })

// Init i18n
i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: 'en-US',
    fallbackLng: 'en-US',
    debug: false,
    returnEmptyString: false,
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
  });

i18n
  .use(initReactI18next)
  .use(HttpApi)
  .use(LanguageDetector)
  .init({
    backend: {
      loadPath(lngs, namespaces) {
        return `/locales/${new Intl.Locale(lngs[0]).language}/${
          namespaces[0]
        }.json`
      },
    },
    fallbackLng: 'en',
    keySeparator: false,
    interpolation: {
      escapeValue: false,
    },
    react: {
      useSuspense: false,
      wait: true,
    },
  })

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    wait: true,
    fallbackLng: 'ua',
    detection: {
      order: ['cookie', 'htmlTag', 'localStorage', 'path', 'subdomain'],
      caches: ['cookie']
    },
    resources: translations,
    interpolation: {
      escapeValue: false
    },
    ns: ['translations'],
    defaultNS: 'translations'
  });

i18next
  .use(XHR)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    backend: {
      loadPath: '/locales/{{lng}}.json'
    },
    react: {
      useSuspense: true
    },
    fallbackLng: 'en',
    preload: ['en'],
    keySeparator: false,
    interpolation: { escapeValue: false }
  })

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .use(LanguageDetector)
  .init({
    resources: { fr: { translation: fr }, en: { translation: en } },
    debug: false,
    fallbackLng: "en",

    keySeparator: false, // we do not use keys in form messages.welcome

    interpolation: {
      escapeValue: false, // react already safes from xss
    },
    detection: {},
  });

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    ns: [
      'ui',
      'items',
      'battledias',
      'cocoons',
      'ryukers',
      'sections',
      'towers',
      'urgents',
      'rewards',
      'datapods',
      'enemies',
      'rewards',
      'mags',
      'trinitas',
    ],
    framework: "React",
    fallbackLng: 'en-US',
    debug: false,
    react: {
      useSuspense: false,
      //wait: false,
      escapeValue: false,
    },
    backend: {
      loadPath: '//raw.githubusercontent.com/kosnag/NGS_WorldMap/master/public/assets/locales/{{lng}}/{{ns}}.json'
    },
  });

i18next
  // .use(languageDetector)
  .use(i18nextReactNative)
  .use(initReactI18next)
  .init({
    compatibilityJSON: 'v3',
    fallbackLng: 'en',
    debug: true,
    resources: {
      en: {
        translation: en,
      },
      sv: {
        translation: sv,
      },
      no: {
        translation: no,
      },
      nb: {
        translation: no,
      },
      zh: {
        translation: zh,
      },
      tr: {
        translation: tr,
      },
      de: {
        translation: de,
      },
      ru: {
        translation: ru,
      },
    },
  });

i18n
  .use(initReactI18next)
  .init({
    react: {
      useSuspense: false // 防止在ts中报错
    },
    lng: 'en',
    resources,
    fallbackLng: 'en',
    debug: process.env.NODE_ENV === 'development',
    interpolation: {
      escapeValue: false,
    }
  });

i18n.use(initReactI18next).init({
    fallbackLng: "en-US",
    interpolation: { escapeValue: false }, // React performs escaping.
    resources: {
        en: {
            main: translations_en_main,
        },
    },
});

i18n
.use(initReactI18next)
.use(LanguageDetector)
.init({
  resources: {
    en,
    fr,
    es
  },
  interpolation: {
    escapeValue: false,
  },
  fallbackLng: 'en',
  debug: true,
})

init = (lang = 'zh_cn') => {
  return i18n
    .use(initReactI18next) // passes i18n down to react-i18next
    .init({
      compatibilityJSON: 'v3', // https://www.i18next.com/misc/json-format
      // debug: true,
      resources,
      lng: lang,
      fallbackLng: 'en_us',
      keySeparator: false,
      lowerCaseLng: true,
      interpolation: {
        escapeValue: false,
      },
    })
}

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    lng: getLanguage(),
    backend: {
      backends: [
        LocalStorageBackend, // primary
        XHR, // fallback
      ],
      backendOptions: [
        {
          prefix: "i18n_",
          expirationTime: 7 * 24 * 60 * 60 * 1000, // 7 days
          versions: {
            zh: process.env.COMMITHASH,
            en: process.env.COMMITHASH,
          },
          store: window.localStorage,
        },
        {
          loadPath: "assets/i18n/{{ns}}/{{lng}}.json",
        },
      ],
    },
    fallbackLng: "en",
    debug: false,
    ns: ["translations"],
    defaultNS: "translations",
    keySeparator: false,
    interpolation: {
      escapeValue: false,
      formatSeparator: ",",
    },
    react: {
      wait: true,
    },
  });

configureI18next = (initialLanguage = null) => {
  i18n
    .use(initReactI18next)
    .use(LanguageDetector)
    .init({
      resources: {
        en: { translation: en },
        ru: { translation: ru }
      },
      fallbackLng: DEFAULT_LANGUAGE.value,
      lng: initialLanguage,
      debug: false,
      interpolation: {
        escapeValue: false
      },
      detection: {
        order: ['querystring'],
        lookupQuerystring: 'lng',
      }
    });

  return i18n;
}

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources,
    react: {
      useSuspense: false,
    },
    fallbackLng: "en",
    interpolation: {
      format,
    },
    whitelist: ["es", "en", "id"],
  });

export function languageInit() {
  i18n
    .use(initReactI18next)
    .init({
      resources,
      lng: default_language,
      keySeparator: false,
      interpolation: {
        escapeValue: false,
      },
    });

  let res = getLocal(LANGUAGE_CONFIG)
  if (res) {
    changeLanguage(res)
    default_language = res
  } else {
    const language = navigator.language || navigator.userLanguage;
    res = language == LANG_SUPPORT_LIST.ZH_CN ? LANG_SUPPORT_LIST.ZH_CN : LANG_SUPPORT_LIST.EN;
    changeLanguage(res)
    default_language = res
    saveLocal(LANGUAGE_CONFIG, res)
  }

  return res
}

i18n
  // load translation using xhr -> see /public/locales
  // learn more: https://github.com/i18next/i18next-xhr-backend
  .use(Backend)
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    fallbackLng: 'de', // @TODO Change to English as soon as we have English translations.
    lng: 'de',
    debug: process.env.REACT_APP_DEBUG_LOGGING === 'true',

    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
  });

nextI18NextInstance = new NextI18Next({
  use: [LanguageDetector, initReactI18next, Locize],
  saveMissing: true,
  backend: {
    projectId: locizeProjectId,
    apiKey: locizeApiKey,
    version: locizeVersion || 'latest',
    referenceLng: 'en',
    debug: true
  },
  defaultLanguage: 'en',
  fallbackLng: 'en',
  otherLanguages: ['es'], // list all languages here
  detection: {
    // check if language is cached in cookies, if not check local storage
    order: ['querystring', 'cookie', 'localStorage', 'navigator', 'path'],

    // next-i18next by default searches for the 'next-i18next' cookie on server requests
    lookupCookie: 'next-i18next',
    lookupLocalStorage: 'i18nextLng',

    // cache the language in cookies and local storage
    caches: ['cookie', 'localStorage']
  },
  react: {
    // trigger a rerender when language is changed
    bindI18n: 'languageChanged',
    // we're NOT using suspsense to detect when the translations have loaded
    useSuspense: false
  }
})

i18n
    .use(initReactI18next)
    .init({
        resources: {en: {translation: en}},
        lng: 'en',
        fallbackLng: 'en',

        interpolation: {escapeValue: false},
    });

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    lng: "en",

    keySeparator: false, // we do not use keys in form messages.welcome

    interpolation: {
      escapeValue: false // react already safes from xss
    }
  });

init = () => {
  i18n
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
      resources,
      fallbackLng: 'en',
      defaultNS: 'common',
      interpolation: {
        escapeValue: false // react already safes from xss
      }
    });
}

i18n
  // load translation using xhr -> see /public/locales
  // learn more: https://github.com/i18next/i18next-xhr-backend
  .use(Backend)
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to the react-i18next components.
  // Alternative use the I18nextProvider: https://react.i18next.com/components/i18nextprovider
  .use(initReactI18next)
  .init({
    fallbackLng: 'en-US',
    debug: false,
    whitelist: ['en-US', 'en', 'es'],
    // special options for react-i18next
    // learn more: https://react.i18next.com/components/i18next-instance
    react: {
      wait: true
    }
  });

i18n
    // load translation using xhr -> see /public/locales
    // learn more: https://github.com/i18next/i18next-xhr-backend
    .use(Backend)
    // detect user language
    // learn more: https://github.com/i18next/i18next-browser-languageDetector
    .use(LanguageDetector)
    // pass the i18n instance to react-i18next.
    .use(initReactI18next)
    // init i18next
    // for all options read: https://www.i18next.com/overview/configuration-options
    .init({
        fallbackLng: "ko",
        debug: false,

        interpolation: {
            escapeValue: false, // not needed for react as it escapes by default
        },
    });

i18n
  .use(LanguageDetector)
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    fallbackLng: 'en',
    keySeparator: false, // we do not use keys in form messages.welcome
    interpolation: {
      escapeValue: false // react already safes from xss
    },
    detection: {
      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
    }
  })

i18n
  // load translation using http -> see /public/locales
  // learn more: https://github.com/i18next/i18next-http-backend
  .use(Backend)
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to the react-i18next components.
  // Alternative use the I18nextProvider: https://react.i18next.com/components/i18nextprovider
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    fallbackLng: 'en',
    whitelist: ['en', 'hi'],
    debug: false,
    load: 'all',
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
  });

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: "en",
    debug: process.env.NODE_ENV === "production" ? false : true,

    keySeparator: false, // we do not use keys in form messages.welcome

    interpolation: {
      escapeValue: false, // react already safes from xss
    },
  });

i18n.use(initReactI18next).init({
  lng: 'zh',
  fallbackLng: 'zh',
  debug: false,
  interpolation: {
    escapeValue: false,
  },

  resources: {
    en: {
      translation: translationEN,
    },
    zh: {
      translation: translationZH,
    },
  },
  react: {
    wait: true,
  },
  keySeparator: '-',
})

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    react: {
      // 是否需要在最外层加入Suspense标签
      useSuspense: false,
    },
    lng: "zh_CN",
    fallbackLng: "zh_CN",
    load: "currentOnly",
    backend: {
      loadPath: `https://fastly.jsdelivr.net/gh/wrrwrr111/pretty-derby@master/src/assert/locales/{{lng}}.json`,
      crossDomain: true,
    },
  });