HeaderLanguageSwitcher

HeaderLanguageSwitcher is a sub-component of the Header organism.

It is used to allow the user to switch between languages on a consuming website.

Basic Usage


import { Header, HeaderLanguageSwitcher } from '@krakentech/coral-organisms';
 
<Header currentLocale="en" locales={{ en: 'English', es: 'Español' }}>
    <HeaderLanguageSwitcher
        onLanguageSelect={(_, selectedLanguage) => {
            console.log('onLanguageSelect: ', selectedLanguage);
        }}
    />
</Header>

With aria labels


import { Header, HeaderLanguageSwitcher } from '@krakentech/coral-organisms';
 
<Header
    currentLocale="en"
    locales={{
        en: { label: 'English', ariaLabel: 'Change language to: English' },
        es: { label: 'Español', ariaLabel: 'Cambiar el idioma a: Español' },
    }}
>
    <HeaderLanguageSwitcher
        onLanguageSelect={(_, selectedLanguage) => {
            console.log('onLanguageSelect: ', selectedLanguage);
        }}
        ariaLabel="Open to select a different language."
    />
</Header>

Full API

Name	Type	Default
`onLanguageSelect`	`({ event, selectedLanguage }: OnLanguageSelectType) => void` Callback function that is called when a language is selected. `event` is the click event that triggered the selection. `selectedLanguage` is the language that was selected.
`iconColor`	`string` The color of the globe icon.
`ariaLabel`	`string` Aria label for the language switcher button.