CountrySelectorDropdown API
CountrySelectorDropdown is a dropdown component for selecting a country that opens after click on CountrySelector.
Usage Example
Import component
import { CountrySelectorDropdown } from 'react-international-phone';
Use by providing the show, selectedCountry and onSelect properties.
<CountrySelectorDropdown
show={true}
selectedCountry="al"
onSelect={handleSelect}
onClose={handleClose}
/>
Output:
- Afghanistan+93
- Albania+355
- Algeria+213
- Andorra+376
- Angola+244
- Antigua and Barbuda+1268
- Argentina+54
- Armenia+374
- Aruba+297
- Australia+61
- Austria+43
- Azerbaijan+994
- Bahamas+1242
- Bahrain+973
- Bangladesh+880
- Barbados+1246
- Belarus+375
- Belgium+32
- Belize+501
- Benin+229
- Bhutan+975
- Bolivia+591
- Bosnia and Herzegovina+387
- Botswana+267
- Brazil+55
- British Indian Ocean Territory+246
- Brunei+673
- Bulgaria+359
- Burkina Faso+226
- Burundi+257
- Cambodia+855
- Cameroon+237
- Canada+1
- Cape Verde+238
- Caribbean Netherlands+599
- Cayman Islands+1
- Central African Republic+236
- Chad+235
- Chile+56
- China+86
- Colombia+57
- Comoros+269
- Congo+243
- Congo+242
- Costa Rica+506
- Côte d'Ivoire+225
- Croatia+385
- Cuba+53
- Curaçao+599
- Cyprus+357
- Czech Republic+420
- Denmark+45
- Djibouti+253
- Dominica+1767
- Dominican Republic+1
- Ecuador+593
- Egypt+20
- El Salvador+503
- Equatorial Guinea+240
- Eritrea+291
- Estonia+372
- Ethiopia+251
- Fiji+679
- Finland+358
- France+33
- French Guiana+594
- French Polynesia+689
- Gabon+241
- Gambia+220
- Georgia+995
- Germany+49
- Ghana+233
- Greece+30
- Greenland+299
- Grenada+1473
- Guadeloupe+590
- Guam+1671
- Guatemala+502
- Guinea+224
- Guinea-Bissau+245
- Guyana+592
- Haiti+509
- Honduras+504
- Hong Kong+852
- Hungary+36
- Iceland+354
- India+91
- Indonesia+62
- Iran+98
- Iraq+964
- Ireland+353
- Israel+972
- Italy+39
- Jamaica+1876
- Japan+81
- Jordan+962
- Kazakhstan+7
- Kenya+254
- Kiribati+686
- Kosovo+383
- Kuwait+965
- Kyrgyzstan+996
- Laos+856
- Latvia+371
- Lebanon+961
- Lesotho+266
- Liberia+231
- Libya+218
- Liechtenstein+423
- Lithuania+370
- Luxembourg+352
- Macau+853
- Macedonia+389
- Madagascar+261
- Malawi+265
- Malaysia+60
- Maldives+960
- Mali+223
- Malta+356
- Marshall Islands+692
- Martinique+596
- Mauritania+222
- Mauritius+230
- Mexico+52
- Micronesia+691
- Moldova+373
- Monaco+377
- Mongolia+976
- Montenegro+382
- Morocco+212
- Mozambique+258
- Myanmar+95
- Namibia+264
- Nauru+674
- Nepal+977
- Netherlands+31
- New Caledonia+687
- New Zealand+64
- Nicaragua+505
- Niger+227
- Nigeria+234
- North Korea+850
- Norway+47
- Oman+968
- Pakistan+92
- Palau+680
- Palestine+970
- Panama+507
- Papua New Guinea+675
- Paraguay+595
- Peru+51
- Philippines+63
- Poland+48
- Portugal+351
- Puerto Rico+1
- Qatar+974
- Réunion+262
- Romania+40
- Russia+7
- Rwanda+250
- Saint Kitts and Nevis+1869
- Saint Lucia+1758
- Saint Vincent and the Grenadines+1784
- Samoa+685
- San Marino+378
- São Tomé and Príncipe+239
- Saudi Arabia+966
- Senegal+221
- Serbia+381
- Seychelles+248
- Sierra Leone+232
- Singapore+65
- Slovakia+421
- Slovenia+386
- Solomon Islands+677
- Somalia+252
- South Africa+27
- South Korea+82
- South Sudan+211
- Spain+34
- Sri Lanka+94
- Sudan+249
- Suriname+597
- Swaziland+268
- Sweden+46
- Switzerland+41
- Syria+963
- Taiwan+886
- Tajikistan+992
- Tanzania+255
- Thailand+66
- Timor-Leste+670
- Togo+228
- Tonga+676
- Trinidad and Tobago+1868
- Tunisia+216
- Turkey+90
- Turkmenistan+993
- Tuvalu+688
- Uganda+256
- Ukraine+380
- United Arab Emirates+971
- United Kingdom+44
- United States+1
- Uruguay+598
- Uzbekistan+998
- Vanuatu+678
- Vatican City+39
- Venezuela+58
- Vietnam+84
- Yemen+967
- Zambia+260
- Zimbabwe+263
Properties
show
*
Show dropdown
- Type:
boolean
dialCodePrefix
Prefix for country code
- Type:
string
- Default:
"+"
selectedCountry
Selected option country code (iso2)
- Type:
CountryIso2
- Default:
undefined
onSelect
Callback that calls on option select
- Type:
(country: ParsedCountry) => void
- Default:
undefined
onClose
Callback that calls on dropdown close without select any item (usually by keyboard events)
- Type:
() => void
- Default:
undefined
Style properties (CountrySelectorDropdownStyleProps
type)
Prop | Type | Description |
---|---|---|
style | CSSProperties | Custom styles for CountrySelectorDropdown container |
className | string | Custom className for CountrySelectorDropdown container |
listItemStyle | CSSProperties | Custom styles for CountrySelectorDropdown list-item container |
listItemClassName | string | Custom className for CountrySelectorDropdown list-item container |
listItemFlagStyle | CSSProperties | Custom styles for CountrySelectorDropdown list-item flag |
listItemFlagClassName | string | Custom className for CountrySelectorDropdown list-item flag |
listItemCountryNameStyle | CSSProperties | Custom styles for CountrySelectorDropdown list-item country name |
listItemCountryNameClassName | string | Custom className for CountrySelectorDropdown list-item country name |
listItemDialCodeStyle | CSSProperties | Custom styles for CountrySelectorDropdown list-item country dial code |
listItemDialCodeClassName | string | Custom className for CountrySelectorDropdown list-item country dial code |
CSS variables
Variable | Default value |
---|---|
--react-international-phone-dropdown-item-font-size | 14px |
--react-international-phone-dropdown-item-text-color | --react-international-phone-text-color |
--react-international-phone-dropdown-item-height | 28px |
--react-international-phone-dropdown-item-background-color | --react-international-phone-background-color |
--react-international-phone-dropdown-item-dial-code-color | gray |
--react-international-phone-selected-dropdown-item-text-color | --react-international-phone-text-color |
--react-international-phone-selected-dropdown-item-background-color | whitesmoke |
--react-international-phone-selected-dropdown-item-dial-code-color | --react-international-phone-dropdown-item-dial-code-color |
--react-international-phone-focused-dropdown-item-background-color | --react-international-phone-selected-dropdown-item-background-color |
--react-international-phone-dropdown-shadow | 2px 2px 16px rgb(0 0 0 / 25%) |
--react-international-phone-dropdown-left | 0 |
--react-international-phone-dropdown-top | 44px |
--react-international-phone-dropdown-preferred-list-divider-color | --react-international-phone-border-color |
--react-international-phone-dropdown-preferred-list-divider-margin | 0 |