i18n Language translation settings

How to add or change the language?

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

1. Create a new file resources/locales/gr.json

   {
           "Menu": "Speisekarte",
           "Orders": "Aufträge",
           "Customers": "Kunden",
           "Sellers": "Verkäufer",
   }; 



2. update the below code in the js/i18n.ts in typescript file.
   

   import i18n from "i18next";
   import translationGr from "./locales/gr.json"; 
         
   const resources = {
             gr: {
                 translation: translationGr
             }
         }; 
         
   const language = localStorage.getItem("I18N_LANGUAGE");
         if (!language) {
           localStorage.setItem("I18N_LANGUAGE", "en");  // replace "en" to "gr".
         }
         
         i18n
           .use(detector)
           .use(initReactI18next) // passes i18n down to react-i18next
           .init({
           resources,
           lng: localStorage.getItem("I18N_LANGUAGE") || "en",  // replace "en" to "gr" to set the gr language as default.
           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
           },
         });
         

   The translationGr JSON originates from the file located at resources/locales/gr.json.

3. Now add the new option of German language in the topbar language dropdown menu js/Components/Common/LanguageDropdown.tsx in typescript file.


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 js/commom/data/language.ts.

// i18n
      import { withTranslation } from "react-i18next";
      
      const index = () => {
        return (
          <Link
            to={subItem.link ? subItem.link : "/#"}
            className="nav-link">
            {props.t('Search_keyword')}
          </Link>
      )
      }
      
      export default withTranslation()(index);