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 src/locales/gr.json

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



2. update the below code in the src/i18n.js in javascript and src/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 src/locales/gr.json.

3. Now add the new option of German language in the topbar language dropdown menu src/Components/Common/LanguageDropdown.js in javascript and src/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 src/locales/language.json.

// 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 withRouter(withTranslation()(index));