Highly customizable phone input component with auto formatting.
npm install react-phone-input-2 --save
import PhoneInput from 'react-phone-input-2'
import 'react-phone-input-2/dist/style.css'
<PhoneInput defaultCountry={'us'} value={this.state.phone} onChange={handleOnChange} />
handleOnChange(value) {
this.setState({ phone: value })
}
Name |
Type |
Description |
Example |
excludeCountries |
array |
array of country codes to be excluded |
['cu','cw','kz'] |
onlyCountries |
array |
country codes to be included |
['cu','cw','kz'] |
preferredCountries |
array |
country codes to be at the top |
['cu','cw','kz'] |
defaultCountry |
string |
initial country |
'us' |
value |
string |
input state value |
placeholder |
string |
custom placeholder |
searchPlaceholder |
string |
custom search placeholder |
inputExtraProps |
object |
props to pass into the input |
Booleans |
Default |
Description |
disableAreaCodes |
false |
disable local codes for all countries |
autoFormat |
true |
on/off phone formatting |
disabled |
false |
disable input and dropdown |
disableDropdown |
false |
disable dropdown only |
disableCountryCode |
false |
|
enableLongNumbers |
false |
|
countryCodeEditable |
true |
|
enableSearchField |
false |
enable search in the dropdown |
disableSearchIcon |
false |
hide icon for the search field |
<PhoneInput
inputExtraProps={{
name: 'phone',
required: true,
autoFocus: true
}}
/>
containerClass |
string |
class for container |
inputClass |
string |
class for input |
buttonClass |
string |
class for dropdown button |
dropdownClass |
string |
class for dropdown container |
searchClass |
string |
class for search field |
containerStyle |
object |
styles for container |
inputStyle |
object |
styles for input |
buttonStyle |
object |
styles for dropdown button |
dropdownStyle |
object |
styles for dropdown container |
searchStyle |
object |
styles for search field |
onChange |
onFocus |
onBlur |
onClick |
onKeyDown |
Country data object not returns from onKeyDown event
Data |
Type |
Description |
value/event |
string/object |
event or the phone number |
country data |
object |
country object { name, dialCode, countryCode (iso2) } |
Name |
Type |
Description |
regions |
array/string |
to only show codes from selected regions |
Regions |
['america', 'europe', 'asia', 'oceania', 'africa'] |
Subregions |
['north-america', 'south-america', 'central-america', 'carribean', 'european-union', 'ex-ussr', 'middle-east', 'north-africa'] |
Regions selected: {'europe'}
<PhoneInput
defaultCountry='it'
regions={'europe'}
/>
Regions selected: {['north-america', 'carribean']}
<PhoneInput
defaultCountry='ca'
regions={['north-america', 'carribean']}
/>
Name |
Type |
areaCodes |
object |
<PhoneInput
onlyCountries={['gr', 'fr', 'us']}
areaCodes={{gr: ['2694', '2647'], fr: ['369', '463'], us: ['300']}}
/>
<PhoneInput
onlyCountries={['fr', 'at']}
masks={{fr: '+.. (...) ..-..-..', at: '+.. (....) ...-....'}}
/>
Name |
Type |
localization |
object |
<PhoneInput
onlyCountries={['de', 'es']}
localization={{de: 'Deutschland', es: 'España'}}
/>
<PhoneInput
onlyCountries={['de', 'es']}
localization={{'Germany': 'Deutschland', 'Spain': 'España'}}
/>
Predefined translations
es
, de
, ru
, fr
import es from 'lang/es.json'
<PhoneInput
localization={es}
/>
Name |
Type |
preserveOrder |
array |
<PhoneInput
onlyCountries={['fr', 'at']}
preserveOrder={['onlyCountries', 'preferredCountries']}
/>
renderStringAsFlag |
string |
handleOnChange(value, data) {
this.setState({ rawPhone: value.replace(/[^0-9]+/g,'').slice(data.dialCode.length) })
}
Check validity of the phone number
<PhoneInput
isValid={v => v === '1'}
/>
<script src="https://unpkg.com/react-phone-input-2@2.x/dist/lib.js"></script>
Code style changes not allowed
Make sure you have donated for lib maintenance: