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.
-
Create a new file sp.json in the
src/Common/lang/sp.jsondirectory. This file will contain the translations for the Spanish language. The structure of the file should be as follows: -
Open the
src/Common/i18n.tsxfile 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") } -
To change the default language to Spanish, you can update the code
in the
src/Common/i18n.tsxfile
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 }, });