Language selector

v.3.0.1

Installation

yarn
pnpm
npm

yarn add @mercell/language-selector-react

pnpm add @mercell/language-selector-react

npm install --save @mercell/language-selector-react

The LanguageSelector has necessary peerDependencies, please make sure that you have them in your project

"@carbon/icons-react": "^10.49.0",
"@mercell/tailwind": "^6.0.1",
"classnames": "^2.3.1",
"react": "^17.0.2" 

Usage

Using the Language Selector component is as simple as importing it like this.

import { LanguageSelector, Country } from '@mercell/language-selector-react';

The Language Selector Component is intended to be used as a child of the GlobalMenu component.

Live Editor

// You can play with code, with HTML tags and text as much as you want!
    const LngSelectorWrapper = () => {
    const countries: Country[] = [
        {
            name: 'Great Britain',
            domain: 'gb',
            locale: 'en-GB',
            language: 'English',
            phonePrefix: '+44',
        },
        {
            name: 'Norge',
            domain: 'no',
            locale: 'nb-NO',
            language: 'Norsk',
            phonePrefix: '+47',
        },
        {
            name: 'Sverige',
            domain: 'se',
            locale: 'sv-SE',
            language: 'Svenska',
            phonePrefix: '+46',
        },
        {
            name: 'Danmark',
            domain: 'dk',
            locale: 'da-DK',
            language: 'Dansk',
            phonePrefix: '+45',
        },
    ];
    const [language, setLanguage] = React.useState<string>('en-GB');
    const changeLanguage = (lngCode: string) => {
        setLanguage(lngCode);
    };
    return (
        <div className="space-y-10">
            <div className="flex justify-around mt-3 ">
                <p>Header</p>
                <LanguageSelector
                    id="language-selector"
                    label="Language selector"
                    closeMenuText="Close menu"
                    countries={countries}
                    localeLng={language}
                    onClick={changeLanguage}
                />
            </div>
        </div>
    );
    }
    render (<LngSelectorWrapper/>)

// You can play with code, with HTML tags and text as much as you want!
    const LngSelectorWrapper = () => {
    const countries: Country[] = [
        {
            name: 'Great Britain',
            domain: 'gb',
            locale: 'en-GB',
            language: 'English',
            phonePrefix: '+44',
        },
        {
            name: 'Norge',
            domain: 'no',
            locale: 'nb-NO',
            language: 'Norsk',
            phonePrefix: '+47',
        },
        {
            name: 'Sverige',
            domain: 'se',
            locale: 'sv-SE',
            language: 'Svenska',
            phonePrefix: '+46',
        },
        {
            name: 'Danmark',
            domain: 'dk',
            locale: 'da-DK',
            language: 'Dansk',
            phonePrefix: '+45',
        },
    ];
    const [language, setLanguage] = React.useState<string>('en-GB');
    const changeLanguage = (lngCode: string) => {
        setLanguage(lngCode);
    };
    return (
        <div className="space-y-10">
            <div className="flex justify-around mt-3 ">
                <p>Header</p>
                <LanguageSelector
                    id="language-selector"
                    label="Language selector"
                    closeMenuText="Close menu"
                    countries={countries}
                    localeLng={language}
                    onClick={changeLanguage}
                />
            </div>
        </div>
    );
    }
    render (<LngSelectorWrapper/>)

Result

Types, definitions, etc.

Types
Changelog
Figma

LanguageSelectorProps

interface LanguageSelectorProps {
    localeLng: string;
    countries: Country[];
    label: string;
    id: string;
    onClick: (locale: string) => void;
    trackingAction?: TrackingActionType;
    additionalTrackingParams?: Record<string, string | string[]>;
} & Omit<JSX.IntrinsicElements['nav'], 'onClick>'

Name	Type	Default	Required	Description
localeLng	string	-	yes	locale (e.g., en-GB)
countries	Country[]	-	yes	`Country` is defined below
label	string	-	yes	aria-label
id	string	-	yes	necessary for aria-controls
onClick	function	-	yes	function for onClick
trackingAction	TrackingActionType	(_trackingEventType: string, _trackingProperties: Record<string, string \| string[]>, defaultAction?: any ) => (e: any) => defaultAction(e),	no	Method passed from context tracking hook to establish event tracking
additionalTrackingParams	Record<string, string\|string[]>	{}	no	Any additional tracking properties which will be passed to all events

Link to TrackingActionType

Country

interface Country {
    name: string;
    language: string;
    domain: string;
    locale: string;
    phonePrefix: string;
}

Name	Type	Default	Required	Description
name	string	-	yes	country name (e.g.,Great Britain)
language	string	-	yes	language name (e.g., English)
domain	string	-	yes	language code ISO 639-1 (e.g., gb)
locale	string	-	yes	locale (e.g., en-GB)
phonePrefix	string	-	yes	phone prefix (e.g., +44)

Language selector

Installation​

The LanguageSelector has necessary peerDependencies, please make sure that you have them in your project

Usage​

Types, definitions, etc.​

Change Log - @mercell/language-selector-react

3.0.1​

Patches​

3.0.0​

Breaking changes​

2.0.0​

Breaking changes​

1.0.15​

Patches​

1.0.14​

1.0.13​

Patches​

1.0.12​

Patches​

1.0.11​

Patches​

1.0.10​

Patches​

1.0.9​

Patches​

1.0.8​

Patches​

1.0.7​

Patches​

1.0.6​

Patches​

1.0.5​

Patches​

1.0.4​

Patches​

1.0.3​

Patches​

1.0.2​

Patches​

1.0.1​

Patches​

1.0.0​

Breaking changes​

0.0.3​

Patches​

0.0.2​

Patches​

Installation

Usage

Types, definitions, etc.

3.0.1

Patches

3.0.0

Breaking changes

2.0.0

Breaking changes

1.0.15

Patches

1.0.14

1.0.13

Patches

1.0.12

Patches

1.0.11

Patches

1.0.10

Patches

1.0.9

Patches

1.0.8

Patches

1.0.7

Patches

1.0.6

Patches

1.0.5

Patches

1.0.4

Patches

1.0.3

Patches

1.0.2

Patches

1.0.1

Patches

1.0.0

Breaking changes

0.0.3

Patches

0.0.2

Patches