react-languages-select
[![Coveralls][coveralls-badge]][coveralls]
A customizable language select components for React Js.
This work is derived from https://ekwonye-richard.github.io/react-languages-select/.
Demo and Example
Live demo: marcosolari.gitlab.io/react-languages-select/
Installation
The package can be installed via NPM:
npm install react-languages-select --save
react-languages-select can be imported as follows
; //import css module; //OR import sass module;
Usage
<ReactLanguageSelect />
All language Codes: Language Codes
Default Language
You can select a default language to be rendered.
<ReactLanguageSelect defaultLanguage="en" />
Searchable
You can enable search filter using prop searchable
.
<ReactLanguageSelect searchable=true />
Search Placeholder
You can set the placeholder text for search using prop searchPlaceholder
.
<ReactLanguageSelect searchable=true searchPlaceholder="Search for a language" />
Languages
You can use an array of countries rather than the full list of languages.
<ReactLanguageSelect languages="en" "fr" "de" "it" "es" />
or create a black list of countries
<ReactLanguageSelect languages="ar" "ch" /> blackList=true />
Local languages names or English languages names or both
You can choose to show the local language names, the international languages names or both.
The default value is "local".
To show local language names:
<ReactLanguageSelect names="local" />
To show international language names:
<ReactLanguageSelect names="international" />
To show both (local and international) language names:
<ReactLanguageSelect names="both" />
Custom Labels
You can use an object of languages labels to replace the languages name. The default language name for a language will be used when the language code has no label passed.
<ReactLanguageSelect languages="en" "fr" "de" "it" "es" /> customLabels="en": "EN-US" "fr": "FR" "de": "DE" "it": "IT" />
Placeholder
You can replace the default placeholder text.
<ReactLanguageSelect languages="en" "fr" "de" "it" "es" /> customLabels="en": "EN-US" "fr": "FR" "de": "DE" "it": "IT" /> placeholder="Select Language" />
Show Selected Label
You can hide or show the label of a selected flag. The default value is true.
<ReactLanguageSelect languages="en" "fr" "de" "it" "es" /> customLabels="en": "EN-US" "fr": "FR" "de": "DE" "it": "IT" /> placeholder="Select Language" showSelectedLabel=false />
Show Option Label
You can hide or show the label of the flags in the options dropdown. The default value is true.
<ReactLanguageSelect languages="en" "fr" "de" "it" "es" /> customLabels="en": "EN-US" "fr": "FR" "de": "DE" "it": "IT" /> placeholder="Select Language" showSelectedLabel=false showOptionLabel=false />
Selected Size
You can set the size in pixels for the svg flag and label of the selected option.
<ReactLanguageSelect languages="en" "fr" "de" "it" "es" /> customLabels="en": "EN-US" "fr": "FR" "de": "DE" "it": "IT" /> placeholder="Select Language" showSelectedLabel=false showOptionLabel=false selectedSize=14 />
Options Size
You can set the size in pixels for the svg flags and labels in the options dropdown.
<ReactLanguageSelect languages="en" "fr" "de" "it" "es" /> customLabels="en": "EN-US" "fr": "FR" "de": "DE" "it": "IT" /> placeholder="Select Language" showSelectedLabel=false showOptionLabel=false selectedSize=18 optionsSize=14 />
className
You can pass a style className that will be attached to the top-level div
of the component.
<ReactLanguageSelect className="menu-languages" />
Align Options
You can align the options dropdown to either left or right. The default value is right.
<ReactLanguageSelect alignOptions="left" />
Disabled
You can disable the options dropdown, however the selected language can be updated using the updateSelected()
method. This can be used for language badges.
<ReactLanguageSelect defaultLanguage="en" showSelectedLabel=false disabled=true />
onSelect
You can use onSelect event handler which fires each time an option is selected.
onSelect(languageCode)
.
//onSelect Method { console } //component render <ReactLanguageSelect defaultLanguage="en" onSelect=thisonSelectLanguage />
updateSelected
You can dynamically update the selected language on the component using updateSelected()
method.
//updateSelected Method thisrefsuserLanguage //component render <ReactLanguageSelect ref="userLanguage" defaultLanguage="en" />
License
MIT Licensed. Copyright (c) Marco Solari 2020.