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:
;; i18next ;
- 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 https://www.npmjs.com/package/json5 // here it removes the letter a from the json (bad idea) { return data; } // 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 {}
Options can be passed in:
preferred - by setting options.backend in i18next.init:
;; i18next ;
on construction:
; const xhr = null options;
via calling init:
; const xhr = ; 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.
{ try let waitForLocale = ; catch e ; } i18next ;
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 fromtypings/*.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