Package Exports

react-phone-input-2

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-phone-input-2) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-phone-input-2

Highly customizable phone input component with auto formatting.

alt tag

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	initial phone value
placeholder	string	custom placeholder
inputStyle	object	styles for input
buttonStyle	object	styles for dropdown button
dropdownStyle	object	styles for dropdown container
autoFormat	bool	on/off auto formatting (on by default)
disabled	bool	disable input and dropdown
disableAreaCodes	bool	disable local codes for all countries
disableCountryCode	bool
disableDropdown	bool

Regions

You can specify custom regions use string or array of strings.

Regions
['america', 'europe', 'asia', 'oceania', 'africa']
Subregions (used region property too)
['north-america', 'south-america', 'central-america', 'carribean', 'european-union', 'ex-ussr', 'middle-east', 'north-africa']

Region selected: {'europe'}

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

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

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

Supported events

onChange

onFocus

onBlur

onClick

onKeyDown

License

Based on react-phone-input using MIT