Internationalization

i18n Language translation settings

How to add new language?

Let's add German language in the existing language.

  1. Create a new file src/locales/fr/translation.json
  2. 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",
    }
    
  3. Now add the new option of German language in the topbar language dropdown menu src/components/CommonForBoth/TopbarDropdown/LanguageDropdown.js
  4. 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 files src/locales/{language}/translation.json.
  5. 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
    }
    });
© Themesbrand.
Crafted with by Themesbrand