Language selector

If your application supports multiple languages, you can add to the navigation bar a language selector.

Language selector set up

Define an array with the list of languages your application supports:

export const LANGUAGES: Lang[] = [

Create a state value to store the current language. For example, with useState() hook, but you can use any other method.

const [language, setLanguage] = useState<Lang>(Lang.EN);

Define a languageSettings object with the list of languages, the current language, and a callback method to handle language selection by the user. Add this object to the topBarSettings prop in the <ClickUI> component:

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

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.

Last updated