Adding New Language
Process to add a new language of your choice
In order to add a new language in the template, you need to follow the below steps.
We are taking the Russian language as an example. So, here are the steps:
- 1.Create a LocaleThis step can be completed by following below instructions:
- Create a Local JSON FileWe need a locale data JSON file where we can keep all our labels, messages, etc. language variables to set their translations for the specific language.For this, create a file “ru_RU.json” under the folder
src/i18n/locales
Now, you can copy the whole content of the filesrc/i18n/locales/en_US.json
This file contains all the translation variables with the value of English language strings and paste that into our newly created ru_RU.json file.The above step will give us all the labels, messages, etc variables and we can replace their values with the Russian translation.For example, let’s change value of pages.samplePage from "Sample Page" to "Пример страницы". - Create i18 ContextNow, in this step, we are going to create an entry file in the folder
src/i18n/entry/
with the name ru_RU.js.This file is needed to import both the react-intl’s local data and our locale data JSON file and setup the i18 context.
- 2.Add Locale to appLocalesIn this step, we will add our newly created i18 context in the above step to the react-intl’s appLocales. This will be done in two further steps:
- 1.Open the file
src/i18n/index.js
and Import i18 context locale entry file into this. - 2.Add imported i18 context variable to the appLocale Object. Check the following source code for reference:import enLang from './entries/en-US';import zhLang from './entries/zh-Hans-CN';import arLang from './entries/ar_SA';import itLang from './entries/it_IT';import esLang from './entries/es_ES';import frLang from './entries/fr_FR';/* adding the new Russian language */import ruLang from './entries/ru_RU';const AppLocale = {en: enLang,zh: zhLang,ar: arLang,it: itLang,es: esLang,fr: frLang,ru: ruLang};export default AppLocale;
- 3.Add an Option to Language SwitcherFor this, we need to access the data.js file which can be found under
src/@jumbo/components/AppLayout/partials/LanguageSwitcher/
folder.Here in this file, we need to add the following language object to the languageData array:{languageId: 'russian', // Unique ID for languagelocale : 'ru', // locale name to link with the previously named localename : 'Russian', // Display name of the languageIcon : 'ru' // To choose the flag of the country}
By following the above steps your app is now ready with the new language.
Last modified 2yr ago