Install the react-i18n library with a backend loader, typically i18next-xhr-backend
Install NPM package
npm install react-i18n i18next-xhr-backend
Main.ts
configure i18n loader with assets folder
import i18n from'i18next';import Backend from'i18next-http-backend';i18n.use(Backend).use(initReactI18next) // passes i18n down to react-i18next.init({// the translations// (tip move them in a JSON file and import them, // or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui)
// backend: {// loadPath: 'assets/locales/{{lng}}/{{ns}}.json',// }, resources: { en: { translation: localeEn }, fr: { translation: localeFr }, }, lng:'en', fallbackLng:'en', debug:false, interpolation: { escapeValue: false // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
} });
Class sample
You need to add a translation key via the property headerKey to each column definition, for example: headerKey: 'TITLE'
Note
For the Select Filter, you will use labelKey instead of label. Anytime a translation key will come in play, we will add the word key to the end (hence headerKey, labelKey, more to come...)
Instead of defining a custom formatter over and over, you could also use the built-in slickgrid-react Formatters.translate. However for the formatter to work, you need to provide the i18n Service instance, you can do so using the params properties which is made to pass any type of data, however you need to pass it with this structure: params: { i18n: i18next } .
constcolumnDefinitions= [ { id:'title', name:'Title', field:'title', headerKey:'TITLE', formatter:Formatters.translate, params: { i18n: i18next } // provide the `i18n instance through the params.i18n property }];
Passing i18n in the Grid Options for Formatter
The best and quick way to pass the i18n service is to pass it through the generic params grid option. However make sure that you use the following structure: params: { i18n: i18next } .
constgridOptions= { enableTranslate:true, params: { i18n: i18next } // provide the `i18n instance through the params.i18n property};
Locales
The final step is of course the actual translations. There's multiple ways to copy them to your assets folder. See below for a few ways:
Manually copy the translation keys/values
Manually copy the JSON files to your assets folder
For React-CLI, you can modify react.json file to copy the JSON files to your assets folder via a copy scripts.
You can implement something like the following (I did not test this one, please report back if this is not accurate)
If you want to manually re-create the translation in your own files, the list of translations that you will need are displayed in the asset i18n translation folder (from that file, you need all translations shown before the 'BILLING', the next few ones are for the demo page only).