Language selector

Language selector widget

If your application supports multiple languages, you can add to the CSPR.click toolbar a language selector widget adding a LanguageSettings object to the <ClickTopBar> component:

const languageSettings = {
    languages: LANGUAGES,
    creditsUrl: "/credits",
    contributeUrl: "/contribute",
    currentLanguage:  lang,
    onChangeLanguage: (l: Lang) => { setLang(l); }
}

<ClickTopBar
   languageSettings={languageSettings}
/>

The settings object must have a languages property with an array containing the languages your application is available in. Set them in the order you want to appear in the selector:

const LANGUAGES: Lang[] = [
  Lang.EN,
  Lang.DE,
  Lang.ES,
  Lang.FR,
];

The Lang enumeration contains the list of all supported languages for this widget.

If you want to show a credits page to shout out your contributors, specify a URL in the credits field.

And if you want to ask your visitors to help you maintain the translations, specify a URL in the contribute field.

Note that both, credits and contribute links are optional. If you don't specify one or both, such options won't show in the language selector widget.