Introduction
This changes i18n format from i18next json to ICU using yahoo/intl-messageformat
Getting started
Source can be loaded via npm or downloaded from this repo.
# npm package
$ npm install i18next-icu
Wiring up:
import i18next from "i18next";
import ICU from "i18next-icu";
i18next.use(ICU).init(i18nextOptions);
- As with all modules you can either pass the constructor function (class) to the i18next.use or a concrete instance.
- If you don't use a module loader it will be added to
window.i18nextICU
Plural Support
- While on node.js all plurals will work out of the box in browser you will need to load additional locale data files like:
import i18next from 'i18next';
import ICU from 'i18next-icu';
import fr from 'i18next-icu/locale-data/fr';
i18next
.use(ICU)
.init({
i18nFormat: {
localeData: fr // you also can pass in array of localeData
formats: {
// https://github.com/yahoo/intl-messageformat#user-defined-formats
}
}
});
// or for react-i18next when using SSR
import i18next from 'i18next';
import ICU from 'i18next-icu';
import fr from 'i18next-icu/locale-data/fr';
const icu = new ICU();
icu.addLocaleData(fr);
icu.addUserDefinedFormats({ /* https://github.com/yahoo/intl-messageformat#user-defined-formats */ })
i18next
.use(icu)
.init({
i18nFormat: {}
});
Backend Options
{
// per default icu functions are parsed once and cached for subsequent calls
memoize: true,
// memoize if not having a lookup and just using the key fallback as value
memoizeFallback: false,
// array or single object of loaded 'i18next-icu/locale-data
localeData: null,
// which events should clear the cache, can be set to false or string of events separated by " "
bindI18n: '',
// which events on resourceSource should clear the cache, can be set to false or string of events separated by " "
bindI18nStore: ''
}
Options can be passed in by setting options.i18nFormat in i18next.init:
import i18next from "i18next";
import ICU from "i18next-icu";
i18next.use(ICU).init({
i18nFormat: options
});
more complete sample
import i18next from "i18next";
import ICU from "i18next-icu";
i18next.use(ICU).init({
lng: "en",
resources: {
en: {
translation: {
key:
"You have {numPhotos, plural, " +
"=0 {no photos.}" +
"=1 {one photo.}" +
"other {# photos.}}"
}
}
}
});
i18next.t("key", { numPhotos: 1000 }); // -> You have 1,000 photos.