react-phone-input-intl
v3.0.53
Published
A react component to format International phone numbers
Downloads
162
Maintainers
Readme
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