react-phone-input-2

Highly customizable phone input component with auto formatting.

Installation

npm install @upinion/phone-input --save

Usage

React.render(
  <PhoneInput 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

<PhoneInput
  inputExtraProps={{
    name: 'phone',
    required: true,
    autoFocus: true
  }}
/>

Regions

Regions selected: {'europe'}

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

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

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

Localization

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

Supported events

Country data object not returns from onKeyDown event

License

Based on react-phone-input using MIT