Multi Language Support.
Mate supports multi language. It became very useful to people from around the world.
For multi-language conversion Mate use https://github.com/yahoo/react-intl library.
Lets discuss the procedure step by step of how to Add/Convert into new languages.
Step 1 :
Go to Project Root folder >src
folder >languageProvider
folder
Openindex.js
file and Add the language name intoconst AppLocale
which you want to add into Mate App.
const
AppLocale = {
en: Enlang,
zh: Zhlang,
sa: Salang,
it: Itlang,
es: Eslang,
fr: Frlang
};
for example you want to Add/Convert German language.
then addde
language code into AppLocale constant like this.
const AppLocale = {
en: Enlang,
zh: Zhlang,
sa: Salang,
it: Itlang,
es: Eslang,
fr: Frlang,
de: GermanLang
};
and Add this codeaddLocaleData(AppLocale.de.data);
Step 2 :
create a new file insrc > languageProvider > entries > de_DE.js file
and paste this code.
import antdSA from 'antd/lib/locale-provider/de_DE';
import appLocaleData from 'react-intl/locale-data/de';
import deMessages from '../locales/de_DE.json';
const deLang = {
messages: {
...deMessages
},
antd: antdDE,
locale: 'de-DE',
data: appLocaleData
};
export default deLang;
Step 3 :
Now, create a JSON file namedde_DE.json
insrc > languageProvider > locales
folder.
Step 4 :
This is the big step for the language conversion. To change language in every MeteAdmin components this is the general procedure. Let's discuss an Alert box component inside the FeedBack section.
Step 4.1
copy all the element from_en_US.json _file and paste this into_de_DE.json _file. Now all the text strings are listed there. Just translate every json element's value into German language.
Example :
"sidebar.formsWithValidation": "Forms With Validation"
will be convert like this
"sidebar.formsWithValidation": "Formulare mit Validierung"
Step 5 :
To add this new language into Sidebar switcher option, follow this file pathsrc > containers > languageSwitcher > config.js
file.
add the new icon image from image folder in the top of the file like thisimport italianLang from '../../image/flag/german.svg';
Then add this new Language into config -> option array by this
{
languageId: 'german',
locale: 'de',
text: 'German',
icon: germanLang,
},
Step 6 (additional step) :+
To chose the default language of Mate go to this filesrc > settings > index.js
and change this codeconst language = 'english';
intoconst language = 'german';
This will initiate german language as default language.
Ta-Da!!
Thanks for reading & understanding the process. It's not that hard. For any inquiries or issues you can contact with us via our support portal https://redqsupport.ticksy.com/