{"id":86,"date":"2020-04-01T11:05:39","date_gmt":"2020-04-01T11:05:39","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/hulk\/?page_id=86"},"modified":"2020-04-13T11:45:06","modified_gmt":"2020-04-13T11:45:06","slug":"translate-the-appmulti-language-support","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/hulk\/translate-the-appmulti-language-support\/","title":{"rendered":"Translate The App(Multi-Language Support)"},"content":{"rendered":"\n

Hulk<\/strong> support multilingual feature which helps you to build your app in your native language. Read the documentation below carefully and follow the given steps. <\/p>\n\n\n\n

How To Set Default Locale <\/h5>\n\n\n\n

Hulk<\/strong> provides you the options to change the default locale of the template according to your native language. You can change the locale in the AppConfig.js<\/code> file. You can find the AppConfig.js<\/code> file in the src->constants<\/code> folder. <\/p>\n\n\n\n

 \/**\n App Config File\n *\/\n const AppConfig = {\n     \u2026,\n     \/\/ set default locale \n     locale: {\n       languageId: 'english', \/\/ language id\n       locale: 'en',          \/\/ locale code\n       name: 'English',       \/\/ locale name\n       icon: 'usa.png'             \/\/ locale icon\n     }\n } \n export default AppConfig; <\/pre>\n\n\n\n
 You can find the details about the other supported languages & their locales in the src->reducers->Appsettingsreducer.js<\/code> file under the languages<\/code> array. Just select the locale in which you want to convert your template and pass this value in the above file.  <\/p>\n\n\n\n
 languages: [\n     \/\/ English\n     {\n         languageId: 'english',\n         locale: 'en',\n         name: 'English',\n         icon: 'en',\n     },\n     \u2026\n     \/\/ Chinese\n     {\n         languageId: 'chinese',\n         locale: 'zh',\n         name: 'Chinese',\n         icon: 'chinese.png',\n     }\n ] <\/pre>\n\n\n\n
Hulk <\/strong>provides supports to 7 languages(built-in), They are: English<\/strong>, Chinese<\/strong>, French<\/strong>, Arabic<\/strong>, Spanish<\/strong>, Japanese<\/strong> and Korean<\/strong>.<\/p>\n\n\n\n
 How To Add A New Locale <\/h4>\n\n\n\n
 Here are the instructions to add a new locale to your app. We have taken an example of adding the Greek<\/strong> language to the template. <\/p>\n\n\n\n
 Step 1:<\/strong> Create a file with the name of locale code inside the src->lang->locales<\/code> directory and define the static strings which you want to translate into Greek<\/strong>, you can check the other locale files to check how strings are defined. <\/p>\n\n\n\n
export default {\n     \"sidebar.general\": \"\u03b3\u03b5\u03bd\u03b9\u03ba\u03cc\u03c2\",\n     \"sidebar.horizontal\": \"\u03bf\u03c1\u03b9\u03b6\u03cc\u03bd\u03c4\u03b9\u03b1\"\n } <\/pre>\n\n\n\n
 Step 2:<\/strong> Create a file with the name of locale code inside the src->lang->entries<\/code> directory and follow the same steps as in other files e.g. <\/p>\n\n\n\n
 import appLocaleData from 'react-intl\/locale-data\/el';\n import elMessages from '..\/locales\/el_EL';\n const elLang = {\n     messages: {\n         \u2026elMessages\n     },\n     locale: 'el-EL',\n     data: appLocaleData\n };\n export default elLang; <\/pre>\n\n\n\n
 Step 3:<\/strong> Open index.js<\/code> file under the src->lang<\/code> directory and follow the steps given below in the code block.index.js <\/p>\n\n\n\n
 import appLocaleData from 'react-intl\/locale-data\/el';\n import elMessages from '..\/locales\/el_EL';\n const elLang = {\n     messages: {\n         \u2026elMessages\n     },\n     locale: 'el-EL',\n     data: appLocaleData\n };\n export default elLang; <\/pre>\n\n\n\n
 Step 4:<\/strong> Now you need to add your locale inside the  appsettingsreducer.js<\/code> file under the  src->reducers->Appsettingsreducer.js<\/code> <\/p>\n\n\n\n
 \/**\n * App Settings Reducers\n *\/\n ...\nconst INIT_STATE = {\n  ...,\n  languages: [\n     {\n         languageId: 'english',\n         locale: 'en',\n         name: 'English',\n         icon: 'usa.png',\n      },\n      ...\n      \/\/ your new locale will goes here\n      {\n        languageId: 'greek',\n        locale: 'el',\n        name: 'Greek',\n        icon: 'greek.png',\n      }\n   ]\n}  <\/pre>\n","protected":false},"excerpt":{"rendered":"
Hulk support multilingual feature which helps you to build your app in your native language. Read the documentation below carefully and follow the given steps. How To Set Default Locale Hulk provides you the options to change the default locale of the template according to your native language. You can change the locale in the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":24,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/pages\/86"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/comments?post=86"}],"version-history":[{"count":21,"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/pages\/86\/revisions"}],"predecessor-version":[{"id":110,"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/pages\/86\/revisions\/110"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/media?parent=86"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}