i18n Language translation settings

How to add new language?

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

1. Create a new file src/locales/gr.json
2. update the below code in the src/i18n.ts 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 src/Layouts/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 src/locales/{language}.json.
5. To change default language to german? update below code in the src/i18n.ts file
   
   

                                               
   i18n
   .use(detector)
   .use(initReactI18next) // passes i18n down to react-i18next
   .init({
     resources,
     lng: localStorage.getItem("I18N_LANGUAGE") || "en",
     fallbackLng: "en", // 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
     },
   });