{"id":82,"date":"2019-10-07T11:02:13","date_gmt":"2019-10-07T11:02:13","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/embryo\/?page_id=82"},"modified":"2019-10-15T09:44:15","modified_gmt":"2019-10-15T09:44:15","slug":"translate-the-app","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/embryo\/translate-the-app\/","title":{"rendered":"Translate The App"},"content":{"rendered":"\n

Embryo-ReactJS<\/strong><\/em> support multilingual feature which helps you to build your app in your native language. Read the documentation carefully and follow the steps. Embryo by default supports 2 languages, they are: English <\/strong>and French<\/strong>.\u200c<\/p>\n\n\n\n

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

If you want to change your default locale then you can change it 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

\/**
* App Config File
*\/
const AppConfig = {
    ...,
    \/\/ set default locale 
    locale: {
        locale: 'en',          \/\/ locale code
        name: 'English',       \/\/ locale name
        icon: 'en'             \/\/ locale icon
    }
}
export default AppConfig;  <\/pre>\n\n\n\n
The template by default supports two locales i.e. English<\/strong> & French<\/strong>. You can check the languages in src->assets->data->localeData.js<\/code> file. Copy the locale in which you want to convert your template and paste the locale in the AppConfig.js<\/code> file.<\/p>\n\n\n\n
\/**
 * locales data
 *\/
export const languages = [
    {
        locale: 'en',
        name: 'English',
        icon: 'en',
    },
    {
        locale: 'fr',
        name: 'French',
        icon: 'fr',
    }
]<\/pre>\n\n\n\n
How To Add A New Locale<\/h5>\n\n\n\n
Here are the instructions to add a new locale in your app. We are taking an example of Greek<\/strong> that we are going to add.\u200c<\/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
module.exports = {
   \"menu.Home\": \"\u03a3\u03c0\u03af\u03c4\u03b9\",
   \"menu.HomeOne\": \"\u03ba\u03b1\u03c4\u03ac\u03c3\u03c4\u03b7\u03bc\u03b1\",
   ...
}<\/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';
import elMessages from '..\/locales\/el_EL';
 
const elLang = {
    messages: {
        ...elMessages
    },
    locale: 'el-EL',
    data: appLocaleData
};
export default elLang;
\u200c
<\/pre>\n\n\n\n
\u200cStep 3:<\/strong> Open index.js<\/code> file under the src->lang<\/code> directory and follow the steps given below in the code block.<\/p>\n\n\n\n
import { addLocaleData } from 'react-intl';
import enLang from '.\/entries\/en-US';
...
import elLang from '.\/entries\/el_EL'; \/\/ Import the locale here
 
const AppLocale = {
    ...,
    el: elLang
};
 
...
addLocaleData(AppLocale.el.data);
 
export default AppLocale;
 <\/pre>\n\n\n\n
Step 4:<\/strong> Now you need to add your locale inside the  localeData.js<\/code> file under the src->assets->data<\/code> directory.<\/p>\n\n\n\n
\/**
 * locales data
 *\/
export const languages = [
    {
        locale: 'en',
        name: 'English',
        icon: 'en',
    },
    {
        locale: 'fr',
        name: 'French',
        icon: 'fr',
    },
    {
        locale: 'el',
        name: 'Greek',
        icon: 'el',
    }
]<\/pre>\n\n\n\n
That’s it, Now you are done with adding a new locale to the template. If you want this newly added locale as your default then you can follow the steps given in the above section How To Set Default Locale<\/strong> to set it as your default locale.<\/p>\n
\n    
\n    \n                        <\/i>\n                    <\/a>\n    1    <\/span>\n<\/div>
\n    \n                        <\/i>\n                    <\/a>\n    <\/span>\n<\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"
Embryo-ReactJS support multilingual feature which helps you to build your app in your native language. Read the documentation carefully and follow the steps. Embryo by default supports 2 languages, they are: English and French.\u200c How To Set Default Locale If you want to change your default locale then you can change it in the AppConfig.js […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":14,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/pages\/82"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/comments?post=82"}],"version-history":[{"count":8,"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/pages\/82\/revisions"}],"predecessor-version":[{"id":292,"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/pages\/82\/revisions\/292"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/media?parent=82"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}