i18next-xhr-backend

What is i18next-xhr-backend?

The i18next-xhr-backend package is a backend layer for the i18next internationalization framework, which allows you to load translations from a server using XMLHttpRequest (XHR). This is particularly useful for dynamic loading of translations in web applications.

What are i18next-xhr-backend's main functionalities?

Loading translations from a server

This feature allows you to load translation files from a server. The `loadPath` option specifies the path to the translation files, which can include placeholders for the language (`{{lng}}`) and namespace (`{{ns}}`).

const i18next = require('i18next');
const XHR = require('i18next-xhr-backend');

i18next
  .use(XHR)
  .init({
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json'
    }
  }, function(err, t) {
    if (err) return console.error(err);
    console.log('i18next is ready...');
  });

Customizing XHR settings

This feature allows you to customize the XHR settings, such as using the Fetch API instead of the default XMLHttpRequest. The `ajax` function can be overridden to provide custom behavior for loading translation files.

const i18next = require('i18next');
const XHR = require('i18next-xhr-backend');

i18next
  .use(XHR)
  .init({
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
      ajax: function (url, options, callback, data) {
        // Custom AJAX request
        fetch(url, options)
          .then(response => response.json())
          .then(data => callback(data, { status: '200' }))
          .catch(error => callback(null, { status: '500' }));
      }
    }
  });

Caching translations

This feature allows you to cache translations in localStorage to reduce the number of requests to the server. The `cache` option can be configured to enable caching and set a key prefix for the cached translations.

const i18next = require('i18next');
const XHR = require('i18next-xhr-backend');
const Cache = require('i18next-localstorage-cache');

i18next
  .use(XHR)
  .use(Cache)
  .init({
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json'
    },
    cache: {
      enabled: true,
      prefix: 'i18next_res_' // Key prefix for localStorage
    }
  });

Other packages similar to i18next-xhr-backend

i18next-http-backend

The i18next-http-backend package is another backend layer for i18next that uses the Fetch API to load translations from a server. It is similar to i18next-xhr-backend but uses modern Fetch API instead of XMLHttpRequest, providing better support for modern browsers and environments.

i18next-localstorage-backend

The i18next-localstorage-backend package allows you to load translations from localStorage. This is useful for offline applications or scenarios where you want to avoid making network requests for translations. It differs from i18next-xhr-backend by focusing on localStorage as the source of translations.

i18next-fs-backend

The i18next-fs-backend package is designed for Node.js environments and allows you to load translations from the file system. This is useful for server-side rendering or Node.js applications. It differs from i18next-xhr-backend by focusing on file system access rather than network requests.

README

Introduction

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';

i18next
  .use(XHR)
  .init(i18nextOptions);

• 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
  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 https://www.npmjs.com/package/json5
  // 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,

  // 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';

i18next
  .use(XHR)
  .init({
    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(options);

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'});
  }
}

i18next
  .use(XHR)
  .init({
    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": [
    "./your_custom_typings_folder_path/**/*.d.ts"
  ],
//...some configuration code