Multi Language Settings

Let's add the German language.

1. Create a new file src/locales/gr/translation.json.

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

2. update the below code in the src/i18n.ts file.
   

   Copy
   import i18n from "i18next";
   import translationGr from "./locales/gr/translation.json"; 
   
   const resources : any = {
       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/translation.json.

3. Now add the new option of German language in the topbar language dropdown menu object src/common/languages.ts in 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/translation.json.

                            Copy
// 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));