Internationalization
i18n Language translation settings
How to add new language?
Let's add German language in the existing language.
-
Create a new file
src/locales/fr/translation.json
-
update the below code in the
src/i18n.js
file
import translationGr from './locales/gr/translation.json'; const resources = { gr: { translation: translationGr } };
The translationGr JSON file,
{ "Mega Menu": "Mega-Menu", }
-
Now add the new option of German language in the
topbar language dropdown menu
src/components/Common/TopbarDropdown/LanguageDropdown.js
-
You must have to write all text like
{this.props.t('Search_keyword')}
to make it working with all languages. Also make sure to add new words in all other language filessrc/locales/{language}/translation.json
. -
To change default language to german? update below
code in the
src/i18n.js
file
i18n .use(detector) .use(reactI18nextModule) // passes i18n down to react-i18next .init({ resources, lng: "gr", fallbackLng: "gr", // use en if detected lng is not available keySeparator: false, // we do not use keys in form messages.welcome interpolation: { escapeValue: false // react already safes from xss } });