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/lib/style.css'

<PhoneInput
  country={'us'}
  value={this.state.phone}
  onChange={phone => this.setState({ phone })}
/>

available styles - style • high-res • material • bootstrap • semantic-ui • plain

Demo 1 (UI) - Demo 2 (CSS)

Options

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

Contents

• Style
• Events
• Regions
• Localization
• Local area codes
• Custom masks
• Custom area codes
• Other props
• Custom 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

<PhoneInput
  country='de'
  regions={'europe'}
/>

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

Predefined localization

es Spanish, de Deutsch, ru Russian, fr French
jp Japanese, cn Chinese, pt Portuguese, it Italian
ir Iranian, ar Arabic, id Indonesian

import es from 'react-phone-input-2/lang/es.json'

<PhoneInput
  localization={es}
/>

Local area codes

<PhoneInput
  enableAreaCodes={true}
  enableAreaCodes={['us', 'ca']}
/>

Custom masks

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

Custom area codes

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

Other props

Custom localization

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

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

Preserve countries order

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

Guides

Phone without dialCode

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

Check validity of the phone number

<PhoneInput
  isValid={(inputNumber, onlyCountries) => {
    return onlyCountries.some((country) => {
      return startsWith(inputNumber, country.dialCode) || startsWith(country.dialCode, inputNumber);
    });
  }}
/>

CDN

<script src="https://unpkg.com/react-phone-input-2@2.x/dist/lib.js"></script>

Contributing

Code style changes not allowed

License

Based on react-phone-input

Make sure you have donated for lib maintenance:

2.11.0 (December 4, 2019)

• Add languages: jp, cn, pt, it, ir, ar, id
• Replace disableAreaCodes to enableAreaCodes
• defaultCountry → country
• enableSearchField → enableSearch
• Search update, search countries firstly using iso2 codes
• Set countries using dialCode
• Add Kosovo, subregions: ex-yugos, baltic
• Add defaultMask, prefix
• Copy number from input without formatting
• Select whole number when double click
• Pass event object to onChange handler
• Style update: style.css high-res.css material.css bootstrap.css semantic-ui.css plain.css

2.10.0 (September 18, 2019)

• Add languages: es, de, ru, fr
• Custom areaCodes
• Search localized country name #123
• renderStringAsFlag to show string instead of flag
• Fix input freezing on area codes #119
• Add preserveOrder #109
• Better keyboard support
• Make lib work inside shadow DOM #105 @newying61
• IE Polyfyll startswith #102

2.9.3 (April 8, 2019)

• SSR support (removed references to browser objects)
• Change importing method
• defaultCountry update fix #70
• Add disableSearchIcon, searchStyle props
• Tests

2.8.0 (February 20, 2019)

• Custom phone masks
• Localization using iso2 codes
• Upgrade dependencies & webpack #65 @jnsdls
• Remove lodash #44
• Keep detection of area codes with disableAreaCodes #49
• Drop setSelectionRange() check #50
• Customizable placeholder for search field
• Update phone masks
• Fix first number cutting #72

2.7.1 (November 29, 2018)

• Styles update, fix SearchField autoFocus
• SearchField @awthwathje

2.6.1 (September 26, 2018)

• Pass props into the input via inputExtraProps
• Remove autoFocus, name, required props

2.5.1 (July 26, 2018)

• Add autoFocus prop to input @mikesholiu
• Focus and highlight preferred country
• Abstracts global document and document related properties @Alex-ray

2.4.1 (July 1, 2018)

• Fix backspace
• Always show right bracket
• Add containerStyle prop
• Fix areaCodes doesn't change when same country selected
• Make country code not editable by passing prop countryCodeEditable @HasanShehryarJaffri

2.3.0 (May 27, 2018)

• Add localization feature
• Add classname to the main container
• Add custom class configurations @Alex-ray

2.2.1 (March 15, 2018)

• Add masks for disableCountryCode attribute
• Add attribute to enable non-mask phone lengths
• Make phone formatter to reject non-mask phone lengths

2.1.1 (January 23, 2018)

• Add country object to be return to props functions @shaypeleg1
• SearchCountry error fix
• Add disableDropdown and disableCountryCode

2.0.0 (September 4, 2017)

• Add feature to select from regions
• Add regions and encapsulation
• Styles changed, styles customization
• Hide dropdown by click outside
• String refs replaced by callback refs
• Hide flag by default, custom placeholder
• Add property to disable area codes
• Fix preferred countires dropdown bug
• Auto-update flag if value field used, caret right-auto-align