Skip to content
backend layer for i18next using browsers xhr
Branch: master
Clone or download
Latest commit 50eae02 Mar 12, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
src fixes add path Jan 3, 2018
test Fix tests Feb 15, 2019
.babelrc rebuild Jan 8, 2017
.coveralls.yml added travis and coveralls Jan 6, 2016
.editorconfig initial version Oct 28, 2015
.eslintrc build with rollup Mar 9, 2016
.gitignore add types version Feb 9, 2019
.travis.yml update types Feb 18, 2019
LICENSE Initial commit Oct 28, 2015
i18nextXHRBackend.js fixes add path Jan 3, 2018
index.d.ts Fix types Feb 15, 2019
package.json update types Feb 18, 2019
tsconfig.json Add tests Feb 7, 2019


Travis Coveralls npm version Bower David

This is a simple i18next backend to be used in the browser. It will load resources from a backend server using xhr.

Getting started

Source can be loaded via npm, bower or downloaded from this repo.

# npm package
$ npm install i18next-xhr-backend

# bower
$ bower install i18next-xhr-backend

Wiring up:

import i18next from 'i18next';
import XHR from 'i18next-xhr-backend';

  • As with all modules you can either pass the constructor function (class) to the i18next.use or a concrete instance.
  • If you don't use a module loader it will be added to window.i18nextXHRBackend

Backend Options

  // path where resources get loaded from, or a function
  // returning a path:
  // function(lngs, namespaces) { return customPath; }
  // the returned path will interpolate lng, ns if provided like giving a static path
  loadPath: '/locales/{{lng}}/{{ns}}.json',

  // path to post missing resources
  addPath: 'locales/add/{{lng}}/{{ns}}',

  // your backend server supports multiloading
  // /locales/resources.json?lng=de+en&ns=ns1+ns2
  // Adapter is needed to enable MultiLoading
  // Returned JSON structure in this case is
  // {
  //  lang : {
  //   namespaceA: {},
  //   namespaceB: {},
  //   ...etc
  //  }
  // }
  allowMultiLoading: false, // set loadPath: '/locales/resources.json?lng={{lng}}&ns={{ns}}' to adapt to multiLoading

  // parse data after it has been fetched
  // in example use
  // here it removes the letter a from the json (bad idea)
  parse: function(data) { return data.replace(/a/g, ''); },

  // allow cross domain requests
  crossDomain: false,

  // allow credentials on cross domain requests
  withCredentials: false,
  // overrideMimeType sets request.overrideMimeType("application/json")
  overrideMimeType: false,
  // custom request headers sets request.setRequestHeader(key, value)
  customHeaders: {
    authorization: 'foo',
    // ...

  // define a custom xhr function
  // can be used to support XDomainRequest in IE 8 and 9
  // 'url' will be passed the value of 'loadPath'
  // 'options' will be this entire options object
  // 'callback' is a function that takes two parameters, 'data' and 'xhr'.
  //            'data' should be the key:value translation pairs for the
  //            requested language and namespace, or null in case of an error.
  //            'xhr' should be a status object, e.g. { status: 200 }
  // 'data' will be a key:value object used when saving missing translations
  ajax: function (url, options, callback, data) {},

  // adds parameters to resource URL. '' -> ''
  queryStringParams: { v: '1.3.5' }

Options can be passed in:

preferred - by setting options.backend in i18next.init:

import i18next from 'i18next';
import XHR from 'i18next-xhr-backend';

    backend: options

on construction:

  import XHR from 'i18next-xhr-backend';
  const xhr = new XHR(null, options);

via calling init:

  import XHR from 'i18next-xhr-backend';
  const xhr = new XHR();
  xhr.init(null, options);


Usage with webpack's bundle loader instead of using xhr requests

To use with webpack, install bundle-loader and json-loader.

Define a custom xhr function, webpack's bundle loader will load the translations for you.

function loadLocales(url, options, callback, data) {
  try {
    let waitForLocale = require('bundle!./locales/'+url+'.json');
    waitForLocale((locale) => {
      callback(locale, {status: '200'});
  } catch (e) {
    callback(null, {status: '404'});

    backend: {
      loadPath: '{{lng}}',
      parse: (data) => data,
      ajax: loadLocales
  }, (err, t) => {
    // ...

TypeScript definitions

  • Install from @types (for TypeScript v2 and later):

      npm install --save-dev @types/i18next-xhr-backend
  • Install from typings:

      typings install --save --global dt~i18next-xhr-backend

Gold Sponsors

You can’t perform that action at this time.