Introduction

This package helps to transform resources to an i18next backend. To be used in Node.js, in the browser and for Deno.

Getting started

Source can be loaded via npm.

1# npm package
2$ npm install i18next-resources-to-backend

simple example - dynamic imports (lazy load in memory translations)

i18next-resources-to-backend helps to transform resources to an i18next backend. This means you can lazy load translations.

The dynamic import must be passed a string. Webpack will fail to load the resource if you pass a variable to import().

For example, when using webpack:

1import i18next from 'i18next';
2import resourcesToBackend from 'i18next-resources-to-backend';
3
4i18next
5  .use(resourcesToBackend((language, namespace) => import(`./locales/${language}/${namespace}.json`)))
6  .on('failedLoading', (lng, ns, msg) => console.error(msg);
7  .init({ /* other options */ })

used as fallback in combination with another i18next backend

i.e. Browser fallback with local / bundled translations

Wiring up:

1import i18next from 'i18next'
2import ChainedBackend from 'i18next-chained-backend'
3import resourcesToBackend from 'i18next-resources-to-backend'
4import HttpBackend from 'i18next-http-backend'
5
6i18next.use(ChainedBackend).init({
7    backend: {
8      backends: [
9        HttpBackend, // if a namespace can't be loaded via normal http-backend loadPath, then the inMemoryLocalBackend will try to return the correct resources
10        resourcesToBackend({
11            en: {
12                translations: {
13                    sayHi: 'hello world'
14                }
15            }
16        })
17      ],
18      backendOptions: [{
19        loadPath: 'http://localhost:8080/locales/{{lng}}/{{ns}}.json'
20      }]
21    }
22})

for Deno:

1import i18next from 'https://deno.land/x/i18next/index.js'
2import ChainedBackend from 'https://deno.land/x/i18next_chained_backend/index.js'
3import resourcesToBackend from 'https://deno.land/x/i18next_resources_to_backend/index.js'
4import HttpBackend from 'https://deno.land/x/i18next_http_backend/index.js'
5
6i18next.use(ChainedBackend).init({
7    backend: {
8      backends: [
9        HttpBackend, // if a namespace can't be loaded via normal http-backend loadPath, then the inMemoryLocalBackend will try to return the correct resources
10        resourcesToBackend({
11            en: {
12                translations: {
13                    sayHi: 'hello world'
14                }
15            }
16        })
17      ],
18      backendOptions: [{
19        loadPath: 'http://localhost:8080/locales/{{lng}}/{{ns}}.json'
20      }]
21    }
22})

you can also lazy load the in memory translations, i.e. when using webpack:

1i18next.use(ChainedBackend).init({
2    backend: {
3      backends: [
4        HttpBackend, // if a namespace can't be loaded via normal http-backend loadPath, then the inMemoryLocalBackend will try to return the correct resources
5        // with dynamic import, you have to use the "default" key of the module ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#importing_defaults )
6        resourcesToBackend((language, namespace) => import(`./locales/${language}/${namespace}.json`))
7        // resourcesToBackend((language, namespace, callback) => {
8        //     import(`./locales/${language}/${namespace}.json`)
9        //         .then(({ default: resources }) => {
10        //             callback(null, resources)
11        //         })
12        //         .catch((error) => {
13        //             callback(error, null)
14        //         })
15        // })
16      ],
17      backendOptions: [{
18        loadPath: 'http://localhost:8080/locales/{{lng}}/{{ns}}.json'
19      }]
20    }
21})

---

Gold Sponsors

---

From the creators of i18next: localization as a service - locize.com

A translation management system built around the i18next ecosystem - locize.com.

With using locize you directly support the future of i18next.

---