1.0.38 • Published 4 years ago
racese-react-phone-input-2 v1.0.38
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
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/react-phone-input-2@2.x/dist/lib.js"></script>
Contributing
Code style changes not allowed
License
1.0.38
4 years ago
1.0.37
4 years ago
1.0.36
4 years ago
1.0.35
5 years ago
1.0.34
5 years ago
1.0.33
5 years ago
1.0.32
5 years ago
1.0.31
5 years ago
1.0.30
5 years ago
1.0.29
5 years ago
1.0.28
5 years ago
1.0.27
5 years ago
1.0.26
5 years ago
1.0.25
5 years ago
1.0.24
5 years ago
1.0.23
5 years ago
1.0.22
5 years ago
1.0.21
5 years ago
1.0.20
5 years ago
1.0.19
5 years ago
1.0.18
5 years ago
1.0.17
5 years ago
1.0.16
5 years ago
1.0.15
5 years ago
1.0.14
5 years ago
1.0.13
5 years ago
1.0.12
5 years ago
1.0.11
5 years ago
1.0.10
5 years ago
1.0.9
5 years ago
1.0.8
5 years ago
1.0.7
5 years ago
1.0.6
5 years ago
1.0.5
5 years ago
1.0.4
5 years ago
1.0.3
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago