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 = = =/>
available styles - style • high-res • material • bootstrap • semantic-ui • plain
Demo 1 (UI) - Demo 2 (CSS)
Options
Name | Type | Description | Example |
---|---|---|---|
country | string | initial country | 'us' | 1 |
value | string | input state value | |
onlyCountries | array | country codes to be included | ['cu','cw','kz'] |
preferredCountries | array | country codes to be at the top | ['cu','cw','kz'] |
excludeCountries | array | array of country codes to be excluded | ['cu','cw','kz'] |
placeholder | string | custom placeholder | |
inputProps | object | props to pass into the input |
Booleans | Default | Description |
---|---|---|
autoFormat | true | on/off phone formatting |
disabled | false | disable input and dropdown |
disableDropdown | false | disable dropdown only |
disableCountryCode | false | |
enableAreaCodes | false | enable local codes for all countries |
enableTerritories | false | enable dependent territories with population of ~100,000 or lower |
enableLongNumbers | false | boolean/number |
countryCodeEditable | true | |
enableSearch | false | enable search in the dropdown |
disableSearchIcon | false | hide icon for the search field |
<PhoneInput =/>
Contents
- Style
- Events
- Regions
- Localization
- Local area codes
- Custom masks
- Custom area codes
- Other props
- Custom localization
- Guides
- Contributing
- Support
Style
containerClass | string | class for container | |
inputClass | string | class for input | |
buttonClass | string | class for dropdown button | |
dropdownClass | string | class for dropdown container | |
searchClass | string | class for search field | |
containerStyle | object | styles for container | |
inputStyle | object | styles for input | |
buttonStyle | object | styles for dropdown button | |
dropdownStyle | object | styles for dropdown container | |
searchStyle | object | styles for search field |
Events
onChange | onFocus | onBlur | onClick | onKeyDown |
onChange(value, country, e, formattedValue)
Country data object not returns from onKeyDown event
Data | Type | Description |
---|---|---|
value/event | string/object | event or the phone number |
country data | object | country object { name, dialCode, countryCode (iso2) } |
Regions
Name | Type | Description |
---|---|---|
regions | array/string | to show countries only from specified regions |
Regions |
---|
['america', 'europe', 'asia', 'oceania', 'africa'] |
Subregions |
['north-america', 'south-america', 'central-america', 'carribean', 'eu-union', 'ex-ussr', 'ex-yugos', 'baltic', 'middle-east', 'north-africa'] |
<PhoneInput ='de' =/> <PhoneInput ='us' =/>
Predefined localization
es
Spanish, de
Deutsch, ru
Russian, fr
French
jp
Japanese, cn
Chinese, pt
Portuguese, it
Italian
ir
Iranian, ar
Arabic, tr
Turkish, id
Indonesian
import es from 'react-phone-input-2/lang/es.json' <PhoneInput =/>
Local area codes
<PhoneInput = = />
Flexible mask
If enableAreaCodeStretch
is added, the part of the mask with the area code will not stretch to length of the respective section of phone mask.
Example: +61 (2), +61 (02)
Custom masks
<PhoneInput = =/>
Custom area codes
<PhoneInput = =/>
Other props
defaultMask | ... ... ... ... .. |
alwaysDefaultMask | false |
prefix | + |
searchPlaceholder | 'search' |
searchNotFound | 'No entries to show' |
copyNumbersOnly | true |
renderStringAsFlag | string |
autocompleteSearch | false |
jumpCursorToEnd | false |
priority | {{ca: 0, us: 1, kz: 0, ru: 1}} |
enableClickOutside | true |
showDropdown | false |
defaultErrorMessage | string |
specialLabel | string |
disableInitialCountryGuess | false |
disableCountryGuess | false |
Custom localization
<PhoneInput = =/> <PhoneInput = =/>
Preserve countries order
<PhoneInput = =/>
Guides
Phone without dialCode
{ this}
Check validity of the phone number
isValid(value, country, countries, hiddenAreaCodes)
<PhoneInput =/>
import startsWith from 'lodash.startswith'; <PhoneInput =/>
Clear country
To clear country
, pass null
as value
.
CDN
Contributing
- Code style changes not allowed
- Do not create issues about incorrect or missing country masks (of already present countries) or absent area codes (they will be closed). Only create issues if the subject is an actual mechanism that is not present in the component. Otherwise create a PR with a link that proves the correctness of your newly suggested mask or list of area codes
- Do not send new languages
License
Based on react-phone-input