react-phone-input-2

Highly customizable phone input component with auto formatting.

Installation

npm install react-phone-input-2 --save

React.render(
  <ReactPhoneInput defaultCountry={'us'} onChange={handleOnChange}/>,
  document.getElementById('root')
);

Your handler for the onChange event should expect a string as parameter, where the value is that of the entered phone number. For example:

function 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	initial phone value
placeholder	string	custom placeholder
name	string	input name
required	bool	false by default, used in input
disabled	bool	disable input and dropdown
inputStyle	object	styles for input
buttonStyle	object	styles for dropdown button
dropdownStyle	object	styles for dropdown container
containerClass	string	class for container
inputClass	string	class for input
buttonClass	string	class for dropdown button
dropdownClass	string	class for dropdown container
autoFormat	bool	on/off auto formatting, true by default
disableAreaCodes	bool	disable local codes for all countries
disableCountryCode	bool	false by default
disableDropdown	bool	false by default
enableLongNumbers	bool	false by default

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'}

<ReactPhoneInput
  defaultCountry='it'
  regions={'europe'}
/>

Regions selected: {['north-america', 'carribean']}

<ReactPhoneInput
  defaultCountry='ca'
  regions={['north-america', 'carribean']}
/>

Name	Type
localization	object

<ReactPhoneInput
  onlyCountries=['de', 'es']
  localization={{'Germany': 'Deutschland', 'Spain': 'España'}}
/>

onChange

onFocus

onBlur

onClick

onKeyDown

Country data object not returns from onKeyDown event

Data	Type	Description
value/event	string/object	the event or the phone number
country data	object	the country object { name, dialCode, country code (iso2 format) }