React-Phone-Input-2

Highly customizable phone input component with auto formatting.

Installation

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

Usage

import ReactPhoneInput from 'react-phone-input-2'
import 'react-phone-input-2/dist/style.css'

<ReactPhoneInput defaultCountry={'us'} value={this.state.phone} onChange={handleOnChange}/>

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

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

Regions

Regions selected: {'europe'}

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

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

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

Localization

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

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

Custom masks

<ReactPhoneInput
  onlyCountries={['fr', 'at']}
  masks={{'fr': '+.. (...) ..-..-..', 'at': '+.. (....) ...-....'}}
/>

Supported events

Country data object not returns from onKeyDown event

Phone without dialCode

function handleOnChange(value, data) {
  this.setState({ rawPhone: value.replace(/[^0-9]+/g,'').slice(data.dialCode.length) })
}

Contributing

Code style changes not allowed

License

Based on react-phone-input