React-Phone-Input-2

Highly customizable phone input component with auto formatting.

Installation

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

Usage

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

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

handleOnChange(value) {
  this.setState({ phone: value })
}

Options

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

Contents

• Style
• Events
• Regions
• Custom area codes
• Custom masks
• Localization
• Guides
  • Phone without dialCode
  • Check validity of the phone number
  • CDN
• Contributing
• Support

Style

Events

Country data object not returns from onKeyDown event

Regions

Regions selected: {'europe'}

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

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

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

Custom area codes

<PhoneInput
  onlyCountries={['gr', 'fr', 'us']}
  areaCodes={{gr: ['2694', '2647'], fr: ['369', '463'], us: ['300']}}
/>

Custom masks

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

Localization

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

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

Predefined translations es, de, ru, fr

import es from 'lang/es.json'

<PhoneInput
  localization={es}
/>

Preserve countries order

<PhoneInput
  onlyCountries={['fr', 'at']}
  preserveOrder={['onlyCountries', 'preferredCountries']}
/>

Other props

Guides

Phone without dialCode

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

Check validity of the phone number

<PhoneInput
  isValid={v => v === '1'}
/>

CDN

<script src="https://unpkg.com/[email protected]/dist/lib.js"></script>

Contributing

Code style changes not allowed

License

Make sure you have donated for lib maintenance: