A customizable svg flags select components for React Js.
Live demo: ekwonye-richard.github.io/react-flags-select/
The package can be installed via NPM:
npm install react-flags-select --save
react-flags-select can be imported as follows
importReactFlagsSelectfrom'react-flags-select';//import css moduleimport'react-flags-select/css/react-flags-select.css';//OR import sass moduleimport'react-flags-select/scss/react-flags-select.scss';<ReactFlagsSelect/>All country Codes: Country Codes
You can select a default country to be rendered.
<ReactFlagsSelectdefaultCountry="US"/>You can enable search filter using prop searchable.
<ReactFlagsSelectsearchable={true}/>You can set the placeholder text for search using prop searchPlaceholder.
<ReactFlagsSelectsearchable={true}searchPlaceholder="Search for a country"/>You can use an array of countries rather than the full list of countries.
<ReactFlagsSelectcountries={["US","GB","FR","DE","IT","NG"]}/>or create a black list of countries
<ReactFlagsSelectcountries={["US","GB","FR","DE","IT","NG"]}blackList={true}/>You can use an object of countries labels to replace the countries name. The default country name for a country will be used when the country code has no label passed.
<ReactFlagsSelectcountries={["US","GB","FR","DE","IT"]}customLabels={{"US": "EN-US","GB": "EN-GB","FR": "FR","DE": "DE","IT": "IT"}}/>You can replace the default placeholder text.
<ReactFlagsSelectcountries={["US","GB","FR","DE","IT"]}customLabels={{"US": "EN-US","GB": "EN-GB","FR": "FR","DE": "DE","IT": "IT"}}placeholder="Select Language"/>You can hide or show the label of a selected flag. The default value is true.
<ReactFlagsSelectcountries={["US","GB","FR","DE","IT"]}customLabels={{"US": "EN-US","GB": "EN-GB","FR": "FR","DE": "DE","IT": "IT"}}placeholder="Select Language"showSelectedLabel={false}/>You can hide or show the label of the flags in the options dropdown. The default value is true.
<ReactFlagsSelectcountries={["US","GB","FR","DE","IT"]}customLabels={{"US": "EN-US","GB": "EN-GB","FR": "FR","DE": "DE","IT": "IT"}}placeholder="Select Language"showSelectedLabel={false}showOptionLabel={false}/>You can set the size in pixels for the svg flag and label of the selected option.
<ReactFlagsSelectcountries={["US","GB","FR","DE","IT"]}customLabels={{"US": "EN-US","GB": "EN-GB","FR": "FR","DE": "DE","IT": "IT"}}placeholder="Select Language"showSelectedLabel={false}showOptionLabel={false}selectedSize={14}/>You can set the size in pixels for the svg flags and labels in the options dropdown.
<ReactFlagsSelectcountries={["US","GB","FR","DE","IT"]}customLabels={{"US": "EN-US","GB": "EN-GB","FR": "FR","DE": "DE","IT": "IT"}}placeholder="Select Language"showSelectedLabel={false}showOptionLabel={false}selectedSize={18}optionsSize={14}/>You can pass a style className that will be attached to the top-level div of the component.
<ReactFlagsSelectclassName="menu-flags"/>You can align the options dropdown to either left or right. The default value is right.
<ReactFlagsSelectalignOptions="left"/>You can disable the options dropdown, however the selected country can be updated using the updateSelected() method. This can be used for flag badges.
<ReactFlagsSelectdefaultCountry="US"showSelectedLabel={false}disabled={true}/>You can use onSelect event handler which fires each time an option is selected.
onSelect(countryCode).
//onSelect MethodonSelectFlag(countryCode){console.log(countryCode)}//component render<ReactFlagsSelectdefaultCountry="US"onSelect={this.onSelectFlag}/>You can dynamically update the selected country on the component using updateSelected() method.
//updateSelected Methodthis.refs.userFlag.updateSelected("UK")//component render<ReactFlagsSelectref="userFlag"defaultCountry="US"/>MIT Licensed. Copyright (c) Richard Ekwonye 2017.