Language Picker

Beta

A language picker is very similar to a dropdown visually but it let users select languages from the panel and then represent the selection in the button.

install	yarn add @clayui/core
version
use	`import {LanguagePicker} from '@clayui/core';`

Table of Contents

Example
Introduction
Controlled and Uncontrolled component
Translations Variant
Trigger Options
Trigger Without Language Label
Small Trigger
API Reference

Example

Open Sandbox

import {Provider, LanguagePicker} from '@clayui/core';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4" style={{width: 'fit-content'}}>
				<LanguagePicker
					locales={[
						{
							id: 'en_US',
							label: 'en-US',
							name: 'English (United States)',
							symbol: 'en-us',
						},
						{
							id: 'ar_SA',
							label: 'ar-SA',
							name: 'Arabic (Saudi Arabia)',
							symbol: 'ar-sa',
						},
						{
							id: 'ca_ES',
							label: 'ca-ES',
							name: 'Catalan (Spain)',
							symbol: 'ca-es',
						},
						{
							id: 'nl_NL',
							label: 'nl-NL',
							name: 'Dutch (Netherlands)',
							symbol: 'nl-nl',
						},
						{
							id: 'fi_FI',
							label: 'fi-FI',
							name: 'Finnish (Finland)',
							symbol: 'fi-fi',
						},
						{
							id: 'fr_FR',
							label: 'fr-FR',
							name: 'French (France)',
							symbol: 'fr-fr',
						},
						{
							id: 'de_DE',
							label: 'de-DE',
							name: 'German (Germany)',
							symbol: 'de-de',
						},
						{
							id: 'hu_HU',
							label: 'hu-HU',
							name: 'Hungarian (Hungary)',
							symbol: 'hu-hu',
						},
					]}
				/>
			</div>
		</Provider>
	);
}

Introduction

The Language Picker component is visually similar to a DropDown component but developed specifically for the user to select languages from the menu but following the w3c accessibility recommendations.

The Language Picker is a component based on the Picker component that provides an accessible experience for selecting languages. It follows standard accessibility patterns for a combobox-only and offers flexibility to customize the content of the options.

Controlled and Uncontrolled component

As with any component in Clay, controlled and uncontrolled components are the ability to manage state in the parent or let Clay control the state of the component. You can read more about this in our blog.

For the <LanguagePicker /> component you can control the selectedLocaleId and active states by adding a state to your component, this is only advisable when you need this information otherwise don’t use it.

If you just need to set the initial state of the selectedLocaleId, use the defaultSelectedLocaleId property which is appropriate for that use case. In case defaultSelectedLocaleId is not defined, it will take the first locale as the default locale.

Info The selectedLocaleId property is equivalent to selectedKey in the Picker, which is represented by the key property configured in the


Option

component, so the component can identify which value is selected and which should be shown in the trigger.

function Example() {
	// Controlled
	const [active, setActive] = useState(false);

	// Controlled
	const [selectedLocaleId, setSelectedLocaleId] = useState('');

	return (
		<LanguagePicker
			active={active}
			locales={[
				{
					id: 'en_US',
					label: 'en-US',
					name: 'English (United States)',
					symbol: 'en-us',
				},
				{
					id: 'ar_SA',
					label: 'ar-SA',
					name: 'Arabic (Saudi Arabia)',
					symbol: 'ar-sa',
				},
				{
					id: 'ca_ES',
					label: 'ca-ES',
					name: 'Catalan (Spain)',
					symbol: 'ca-es',
				},
				{
					id: 'nl_NL',
					label: 'nl-NL',
					name: 'Dutch (Netherlands)',
					symbol: 'nl-nl',
				},
			]}
			onActiveChange={setActive}
			onSelectedLocaleChange={setSelectedLocaleId}
			selectedLocaleId={selectedLocaleId}
		/>
	);
}

Translations Variant

Unlike the default Language Picker, translations variant is used to select a translation from a list of translation languages that have been translated or not. An example of using this variant could be a form with one or more localizable fields, where we want to select and view the status of translations.

Open Sandbox

import {Provider, LanguagePicker} from '@clayui/core';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	const translations = {
		'ca-ES': {total: 4, translated: 2},
		'nl-NL': {total: 4, translated: 4},
	};

	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4" style={{width: 'fit-content'}}>
				<LanguagePicker
					locales={[
						{
							id: 'en_US',
							label: 'en-US',
							name: 'English (United States)',
							symbol: 'en-us',
						},
						{
							id: 'ar_SA',
							label: 'ar-SA',
							name: 'Arabic (Saudi Arabia)',
							symbol: 'ar-sa',
						},
						{
							id: 'ca_ES',
							label: 'ca-ES',
							name: 'Catalan (Spain)',
							symbol: 'ca-es',
						},
						{
							id: 'nl_NL',
							label: 'nl-NL',
							name: 'Dutch (Netherlands)',
							symbol: 'nl-nl',
						},
					]}
					translations={translations}
				/>
			</div>
		</Provider>
	);
}

This variant shows translation status labels next to each translation language to indicate the translation status for the content. The states are described below:

Default : Indentifies the default language. This default language is set with the property defaultLocaleId . If there is no defaultLocaleId it will take the first of the locales.
Translated : Used when all fields have been translated.
Not Translated : Used when none of the localizable fields have been translated.
Translating x/x : Used when at least one of the localizable fields of a content item has been translated. This label indicates the number of fields translated compared to the total number of fields.

Trigger Options

Trigger Without Language Label

You can customize the Language Picker trigger to display only the icon by setting the hideTriggerText property to true. This removes the language label.

Open Sandbox

import {Provider, LanguagePicker} from '@clayui/core';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4" style={{width: 'fit-content'}}>
				<LanguagePicker
					hideTriggerText
					locales={[
						{
							id: 'en_US',
							label: 'en-US',
							name: 'English (United States)',
							symbol: 'en-us',
						},
						{
							id: 'ar_SA',
							label: 'ar-SA',
							name: 'Arabic (Saudi Arabia)',
							symbol: 'ar-sa',
						},
						{
							id: 'ca_ES',
							label: 'ca-ES',
							name: 'Catalan (Spain)',
							symbol: 'ca-es',
						},
						{
							id: 'nl_NL',
							label: 'nl-NL',
							name: 'Dutch (Netherlands)',
							symbol: 'nl-nl',
						},
					]}
				/>
			</div>
		</Provider>
	);
}

Small Trigger

You can reduce the size of the Language Picker trigger by setting the small property to true.

Open Sandbox

import {Provider, LanguagePicker} from '@clayui/core';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4" style={{width: 'fit-content'}}>
				<LanguagePicker
					locales={[
						{
							id: 'en_US',
							label: 'en-US',
							name: 'English (United States)',
							symbol: 'en-us',
						},
						{
							id: 'ar_SA',
							label: 'ar-SA',
							name: 'Arabic (Saudi Arabia)',
							symbol: 'ar-sa',
						},
						{
							id: 'ca_ES',
							label: 'ca-ES',
							name: 'Catalan (Spain)',
							symbol: 'ca-es',
						},
						{
							id: 'nl_NL',
							label: 'nl-NL',
							name: 'Dutch (Netherlands)',
							symbol: 'nl-nl',
						},
					]}
					small
				/>
			</div>
		</Provider>
	);
}

API Reference

({ active, classNamesTrigger, defaultActive, defaultLocaleId, defaultSelectedLocaleId, hideTriggerText, id, messages, locales, onActiveChange, onSelectedLocaleChange, selectedLocaleId, small, spritemap, translations, }: Props) => JSX.Element

Parameters

Properties

active

boolean | undefined

Flag to indicate if the Picker is active or not (controlled).

classNamesTrigger

string | undefined

Class names for the trigger.

defaultActive

boolean | undefined

Property to set the default value of active (uncontrolled).

defaultLocaleId

React.Key | undefined

The default locale id.

defaultSelectedLocaleId

React.Key | undefined

The initial selected locale id (uncontrolled).

hideTriggerText

boolean | undefined

Flag to hide the text in the trigger.

id

string | undefined

The id of the component.

messages

Messages | undefined=

{"default":"Default","option":"{0} language: {1}.","translated":"Translated","translating":"Translating {0}/{1}","trigger":"Select a language, current language: {0}.","untranslated":"Untranslated"}

Messages for the component.

locales *

Array<Item>

List of locales to allow localization for.

onActiveChange

any

Callback for when the active state changes (controlled).

onSelectedLocaleChange

any

Callback that gets called when a selected locale gets changed.

selectedLocaleId

React.Key | undefined

Exposes the currently selected locale id (controlled).

small

boolean | undefined

Flag to show the picker in small size.

spritemap

string | undefined

Path to the location of the spritemap resource.

translations

Translations | undefined= {}

Translations provided to the component to display the translation language status.

Returns

Element

Edit this page on GitHub

Table of Contents

Example
Introduction
Controlled and Uncontrolled component
Translations Variant
Trigger Options
Trigger Without Language Label
Small Trigger
API Reference