Highly customizable phone input component with auto formatting

react-phone-input-2

Highly customizable phone input component with auto formatting.

Installation

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

Usage

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
   });
}

Options

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
name string input name
required bool false by default
disabled bool disable input and dropdown
containerStyle object styles for container
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
countryCodeEditable bool true by default

Regions

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

Localization

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

Supported events

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

GitHub