Skip to main content

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
  • 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
  • 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)

PropTypeDescription
styleCSSPropertiesCustom styles for CountrySelectorDropdown container
classNamestringCustom className for CountrySelectorDropdown container
listItemStyleCSSPropertiesCustom styles for CountrySelectorDropdown list-item container
listItemClassNamestringCustom className for CountrySelectorDropdown list-item container
listItemFlagStyleCSSPropertiesCustom styles for CountrySelectorDropdown list-item flag
listItemFlagClassNamestringCustom className for CountrySelectorDropdown list-item flag
listItemCountryNameStyleCSSPropertiesCustom styles for CountrySelectorDropdown list-item country name
listItemCountryNameClassNamestringCustom className for CountrySelectorDropdown list-item country name
listItemDialCodeStyleCSSPropertiesCustom styles for CountrySelectorDropdown list-item country dial code
listItemDialCodeClassNamestringCustom className for CountrySelectorDropdown list-item country dial code

CSS variables

VariableDefault value
--react-international-phone-dropdown-item-font-size14px
--react-international-phone-dropdown-item-text-color--react-international-phone-text-color
--react-international-phone-dropdown-item-height28px
--react-international-phone-dropdown-item-background-color--react-international-phone-background-color
--react-international-phone-dropdown-item-dial-code-colorgray
--react-international-phone-selected-dropdown-item-text-color--react-international-phone-text-color
--react-international-phone-selected-dropdown-item-background-colorwhitesmoke
--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-shadow2px 2px 16px rgb(0 0 0 / 25%)
--react-international-phone-dropdown-left0
--react-international-phone-dropdown-top44px
--react-international-phone-dropdown-preferred-list-divider-color--react-international-phone-border-color
--react-international-phone-dropdown-preferred-list-divider-margin0