i18n Language translation settings

How to add or change the language?

Let's add the German language to the existing languages.

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.ts TypeScript file.
   

   import i18n from "i18next";
   import { initReactI18next } from "react-i18next";
   import translationGr from "./locales/gr.json";
   
   const resources = {
       en: {
           translation: require("./locales/en.json")
       },
       gr: {
           translation: translationGr
       }
   };
   
   const language = localStorage.getItem("I18N_LANGUAGE");
   if (!language) {
     localStorage.setItem("I18N_LANGUAGE", "en");
   }
   
   i18n
     .use(initReactI18next)
     .init({
     resources,
     lng: localStorage.getItem("I18N_LANGUAGE") || "en",
     fallbackLng: "en",
     keySeparator: false,
     interpolation: {
       escapeValue: false,
     },
   });

   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.tsx 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 { useTranslation } from "react-i18next";

const Index = () => {
  const { t } = useTranslation();

  return (
    <Link
      to={subItem.link ? subItem.link : "/#"}
      className="nav-link">
      {t('Search_keyword')}
    </Link>
  )
}

export default Index;