We supports multiple language integration throughout the admin portal. User will get language switcher on the top right of the Appbar.
You'll need language files for all the supported files in JSON format. For example:
For English JSON: english.json
For French JSON: french.json
After this, you'll need to import and include these files into the
src/App.js as follows:
In Above sample, fr and en are the language codes which will be used as the identifiers of the language. Messages object will be supplied to
i18nProvider as follows
Here we are using
polyglotI18nProvider for i18n and setting
'en' as the default language.
Once you are done with setting up the provider, you just need to include it in the
<Provider> selectors as follows,
Now you can move forward to add languages in
src/ For example:
Here we have 2 languages, French and English with following parameters:
- "id" : language identifier // Should be same as in the messages object
- "title" : lable, which will be visible in the language switcher on the top right of Appbar
- "flag" : (optional) This will be the name of flag for the language to display in language switcher. You will have to save these flag files (as png) in
All the translation of texts inside the
<Admin> selector will be taken care of automatically by the react-admin. But you'll have to implement all other translations by yourself and you can translate static text as well as dynamic text through translation provider as follows:
Translation provider will pick the language file according to the selected language and will look for property
ra.actions.add and will display the value of that propery dynamically.