material-ui-phone-number-2
Highly customizable phone input component with auto formatting. Based on mui-phone-number which is not maintained anymore; and which was in turn based on the wonderful react-phone-input-2 package.
This library is actively maintained and currently being rewritten into functional style (previous one was class based).
It looks like this, but in Material Design:
Uses @material-ui/core/TextField for rendering the phone input
Installation
npm install material-ui-phone-number-2 --save
Usage
import MuiPhoneNumber from 'material-ui-phone-number-2'
React.render(<MuiPhoneNumber defaultCountry={'us'} onChange={handleOnChange} />, document.getElementById('root'))
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
| Name | Type | Description | Example |
|---|
| excludeCountries | array | array of country codes to be excluded | ['cu','cw','kz'] |
| onlyCountries | array | country codes to be included | ['cu','cw','kz'] |
| preferredCountries | array | country codes to be at the top | ['cu','cw','kz'] |
| defaultCountry | string | initial country | 'us' |
| inputClass | string | class for input |
| dropdownClass | string | class for dropdown container |
| autoFormat | bool | on/off auto formatting, true by default |
| disableAreaCodes | bool | disable local codes for all countries |
| disableCountryCode | bool | false by default |
| disableDropdown | bool | false by default |
| enableLongNumbers | bool | false by default |
| countryCodeEditable | bool | true by default |
| Supported TextField props |
| See TextField API for possible values https://material-ui.com/api/text-field/ |
Regions
| Name | Type | Description |
|---|
| regions | array/string | to only show codes from selected regions |
| Regions |
|---|
| ['america', 'europe', 'asia', 'oceania', 'africa'] |
| Subregions |
|---|
| ['north-america', 'south-america', 'central-america', 'carribean', 'european-union', 'ex-ussr', 'middle-east', 'north-africa'] |
Regions selected: {'europe'}
<MuiPhoneNumber defaultCountry="it" regions={'europe'} />
Regions selected: {['north-america', 'carribean']}
<MuiPhoneNumber defaultCountry="ca" regions={['north-america', 'carribean']} />
Localization
| Name | Type |
|---|
| localization | object |
<MuiPhoneNumber onlyCountries={['de', 'es']} localization={{ Germany: 'Deutschland', Spain: 'España' }} />
Supported events
| onChange | onFocus | onBlur | onClick | onKeyDown |
Country data object not returns from onKeyDown event
| Data | Type | Description |
|---|
| value/event | string/object | the event or the phone number |
| country data | object | the country object { name, dialCode, country code (iso2 format) } |
License
MIT Licence.
Based on material-ui-phone-number
Based on react-phone-input-2
Based on react-phone-input using MIT
