Introduction

Taking insipration from i18next-resources-to-backend this package enrich the functionality by support more file formats in i18next. 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-multi-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 with json:

import i18next from 'i18next';
import resourcesToBackend from 'i18next-resources-to-backend';

i18next
  .use(multiResourcesBackend(
    (language:any, namespace:any) => import(`./content/${namespace}/${namespace}-config-${language}.json`)
  ),)
  .on('failedLoading', (lng, ns, msg) => console.error(msg);
  .init({ /* other options */ })

Or you can import other file format

import i18next from 'i18next';
import resourcesToBackend from 'i18next-resources-to-backend';

i18next
  .use(multiResourcesBackend(
    (language:any, namespace:any) => import(`./content/markdown/${namespace}-${language}.md`), 'content'
  ),)
  .on('failedLoading', (lng, ns, msg) => console.error(msg);
  .init({ /* other options */ })

Then you can use key 'content' to access the corresponding namespace and language markdown file content.

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)
  .use(ChainedBackend)
  .init<ChainedBackendOptions>({
  fallbackLng: supportedLanguages[0],
  lng: supportedLanguages[0], //default language
  supportedLngs: supportedLanguages,
  defaultNS: "about",
  backend: {
    backends: [
      multiResourcesBackend(
        (language:any, namespace:any) => import(`./content/${namespace}/${namespace}-config-${language}.json`)
      ),
      multiResourcesBackend(
        (language:any, namespace:any) => import(`./content/markdown/${namespace}-${language}.md`), 'content'
      )
    ]
  }
});