What is i18next-resources-to-backend?
The i18next-resources-to-backend npm package is a plugin for i18next that allows you to load translation resources from various backends. It simplifies the process of integrating different types of resource loading mechanisms into your i18next setup.
What are i18next-resources-to-backend's main functionalities?
Load translations from a custom backend
This feature allows you to define a custom backend for loading translations. The code sample demonstrates how to use a custom function to fetch translation files from a server.
const i18next = require('i18next');
const resourcesToBackend = require('i18next-resources-to-backend');
const customBackend = resourcesToBackend((language, namespace, callback) => {
// Custom logic to fetch translations
fetch(`/locales/${language}/${namespace}.json`)
.then(response => response.json())
.then(data => callback(null, data))
.catch(error => callback(error, false));
});
i18next.use(customBackend).init({
lng: 'en',
fallbackLng: 'en',
ns: ['translation'],
defaultNS: 'translation'
});
Load translations from multiple backends
This feature allows you to combine multiple backends for loading translations. The code sample shows how to use both a custom backend and the i18next-http-backend together.
const i18next = require('i18next');
const resourcesToBackend = require('i18next-resources-to-backend');
const HttpBackend = require('i18next-http-backend');
const customBackend = resourcesToBackend((language, namespace, callback) => {
// Custom logic to fetch translations
fetch(`/locales/${language}/${namespace}.json`)
.then(response => response.json())
.then(data => callback(null, data))
.catch(error => callback(error, false));
});
i18next.use(customBackend).use(HttpBackend).init({
lng: 'en',
fallbackLng: 'en',
ns: ['translation'],
defaultNS: 'translation'
});
Other packages similar to i18next-resources-to-backend
i18next-http-backend
The i18next-http-backend package is used to load translations from a remote server via HTTP. It is similar to i18next-resources-to-backend in that it provides a way to load translations, but it is specifically designed for HTTP requests and does not support custom backend logic.
i18next-fs-backend
The i18next-fs-backend package is used to load translations from the file system. It is useful for server-side applications where translations are stored locally. Unlike i18next-resources-to-backend, it does not support loading translations from remote servers or custom backends.
i18next-localstorage-backend
The i18next-localstorage-backend package is used to cache translations in the browser's local storage. This can improve performance by reducing the number of requests to the server. It is different from i18next-resources-to-backend in that it focuses on caching rather than loading translations from various sources.
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.
$ npm install i18next-resources-to-backend
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,
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,
resourcesToBackend({
en: {
translations: {
sayHi: 'hello world'
}
}
})
],
backendOptions: [{
loadPath: 'http://localhost:8080/locales/{{lng}}/{{ns}}.json'
}]
}
})
you can also lazy load the in memory translations, i.e. when using webpack:
i18next.use(ChainedBackend).init({
backend: {
backends: [
HttpBackend,
resourcesToBackend((language, namespace) => import(`./locales/${language}/${namespace}.json`))
],
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.