Highly customizable phone input component with auto formatting.
![travis build](https://camo.githubusercontent.com/9bbe36e4bc11b94444e30214b65b5ec70156e8dba257072dc0246815dda6dd13/68747470733a2f2f7472617669732d63692e6f72672f626c30306d6265722f72656163742d70686f6e652d696e7075742d322e7376673f6272616e63683d6d6173746572)
![alt tag](https://camo.githubusercontent.com/cf594ab54aba3c01bce639d52d608f85e91001972690621a3f26a186c81c5892/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f78694f5241576e716f544a44734830554f492f67697068792e676966)
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
![GitHub license](https://camo.githubusercontent.com/2bb6ac78e5a9f4f688a6a066cc71b62012101802fcdb478e6e4c6b6ec75dc694/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e737667)
Make sure you have donated for lib maintenance: ![Donate](https://camo.githubusercontent.com/0283ea90498d8ea623c07906a5e07e9e6c2a5eaa6911d52033687c60cfa8d22f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f446f6e6174652d50617950616c2d677265656e2e737667)