react-phone-input-intl v3.0.53

React-Phone-Input-Intl

This repo is a clone of the below React-Phone-Input-2 (2.9.3) The below repo however adds local country codes to the list. This package takes those out and only includes the International Dialing code.

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