i18next-resources-to-backend

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.

README

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 package
$ 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:

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 */ })

used as fallback in combination with another i18next backend

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

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

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

---

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.

---