Multi Language

Configure the different Language translation settings:

Vixon provides a range of options for language translation settings, allowing you to support multiple languages in your application. With these settings, you can offer your users the ability to switch between different languages for a localized experience.

Let's enhance the existing language support by incorporating Spanish into the available languages.

  1. Create a new file sp.json in the src/Common/lang/sp.json directory. This file will contain the translations for the Spanish language. The structure of the file should be as follows:
  2. Open the src/Common/i18n.tsx file and update the code to include the Spanish language and its corresponding language file.

    import translationGr from './lang/sp.json';
                
    const resources = {
      sp: {
        translation: translationSp,
      }
    }; 
    
    const language = typeof window !== "undefined" && localStorage.getItem("I18N_LANGUAGE");
    if (!language) {
        typeof window !== "undefined" && localStorage.setItem("I18N_LANGUAGE", "en")
    }
  3. To change the default language to Spanish, you can update the code in the src/Common/i18n.tsx file

    i18n.use(detector).use(initReactI18next).init({
        resources,
        lng: typeof window !== 'undefined' && localStorage.getItem("I18N_LANGUAGE") || 'en',
        fallbackLng: "en",
        keySeparator: false, // we do not use keys in form messages.welcome
    
        interpolation: {
            escapeValue: false, // react already safes from xss
        },
    });