@quantfive/react-phone-input-2
v2.14.3
Published
A react component to format phone numbers
Downloads
201
Readme
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
- 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/[email protected]/dist/lib.js"></script>
Contributing
Code style changes not allowed
License
Based on react-phone-input