node package manager
Don’t reinvent the wheel. Reuse code within your team. Create a free org »



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 
  allowMultiLoading: false,
  // 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,
  // define a custom xhr function 
  // can be used to support XDomainRequest in IE 8 and 9 
  ajax: function (url, options, callback, data) {}

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();

Usage with webpack

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) => {
    // ... 

If You use typescript##

You can find typings file in /typings folder.

in order to comply with some neat project structure You would copy i18next-xhr-backend.d.ts file from typings/*.d.ts to some other folder, e.g. /customTypings

The next step - to give the compiler know about your *.d.ts files. Add the following section to your tsconfig.json file.

//...some configuration code 
"filesGlob": [
//...some configuration code