i18n Language translation settings

How to add new language?

Let's add the German language in the existing language.

1. Create a new file Components/Common/locales/gr.json
2. update the below code in the Components/Common/i18n.tsx file
   
   

                                               
   import translationGr from "./locales/gr.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 Components/Common/Layout/TopBar.tsx
4. You must have to write all text like {props.t('Search_keyword')} to make it working with all languages. Also make sure to add new words in all other language files Components/Common/locales/{language}.json.
5. To change default language to german? update below code in the Components/Common/i18n.tsx 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
       }
   });