Adding New Language
In this article, we are going to follow below steps to add a new language into our app.
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/lngProvider/locales/
Now, you can copy the whole content of filesrc/lngProvider/locales/en_US.json
(this contains all translation variables with 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” : “Sample Page” to “pages.samplePage”: “Пример страницы”- Create i18 ContextNow, in this step, we are going to create an entry file
src/lngProvider/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 above step to the react-intl’s appLocales. This will be done in two further steps:
- 1.Open the file
src/lngProvider/index.js
and Import i18 context locale entry file into this. - 2.Add imported i18 context variable to the appLocale Object. Check following source code for reference.
- 3.Add an Option to Language SwitcherFor this, we need to access the languageData.js file which can be found under
src/containers/Topbar/
folder.Here in this file, we need to add 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}
Last modified 3yr ago