This package helps to transform resources to an i18next backend. To be used in Node.js, in the browser and for Deno.
If you don't like to manage your translation files manually or are simply looking for a better management solution, take a look at i18next-locize-backend — translations served from a hosted CDN instead of bundled with your app. The i18next backend plugin for 🌐 Locize ☁️.
Source can be loaded via npm.
# npm package
$ npm install i18next-resources-to-backendi18next-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:
import i18next from 'i18next';
import resourcesToBackend from 'i18next-resources-to-backend';
i18next
.use(resourcesToBackend((language, namespace) => import(`./locales/${language}/${namespace}.json`)))
.on('failedLoading', (lng, ns, msg) => console.error(msg);
.init({ /* other options */ })i.e. Browser fallback with local / bundled translations
Wiring up:
import i18next from 'i18next'
import ChainedBackend from 'i18next-chained-backend'
import resourcesToBackend from 'i18next-resources-to-backend'
import HttpBackend from 'i18next-http-backend'
i18next.use(ChainedBackend).init({
backend: {
backends: [
HttpBackend, // if a namespace can't be loaded via normal http-backend loadPath, then the inMemoryLocalBackend will try to return the correct resources
resourcesToBackend({
en: {
translations: {
sayHi: 'hello world'
}
}
})
],
backendOptions: [{
loadPath: 'http://localhost:8080/locales/{{lng}}/{{ns}}.json'
}]
}
})for Deno:
import i18next from 'https://deno.land/x/i18next/index.js'
import ChainedBackend from 'https://deno.land/x/i18next_chained_backend/index.js'
import resourcesToBackend from 'https://deno.land/x/i18next_resources_to_backend/index.js'
import HttpBackend from 'https://deno.land/x/i18next_http_backend/index.js'
i18next.use(ChainedBackend).init({
backend: {
backends: [
HttpBackend, // if a namespace can't be loaded via normal http-backend loadPath, then the inMemoryLocalBackend will try to return the correct resources
resourcesToBackend({
en: {
translations: {
sayHi: 'hello world'
}
}
})
],
backendOptions: [{
loadPath: 'http://localhost:8080/locales/{{lng}}/{{ns}}.json'
}]
}
})i18next.use(ChainedBackend).init({
backend: {
backends: [
HttpBackend, // if a namespace can't be loaded via normal http-backend loadPath, then the inMemoryLocalBackend will try to return the correct resources
// 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 )
resourcesToBackend((language, namespace) => import(`./locales/${language}/${namespace}.json`))
// resourcesToBackend((language, namespace, callback) => {
// import(`./locales/${language}/${namespace}.json`)
// .then(({ default: resources }) => {
// callback(null, resources)
// })
// .catch((error) => {
// callback(error, null)
// })
// })
],
backendOptions: [{
loadPath: 'http://localhost:8080/locales/{{lng}}/{{ns}}.json'
}]
}
})
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.