material-ui-phone-number

material-ui-phone-number

Highly customizable phone input component with auto formatting. Based on the wonderful react-phone-input-2 package.

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 --save

Usage

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
value	string	input state value
placeholder	string	placeholder for the TextField input
label	string | element	label for the TextField
name	string	input name
required	bool	false by default
disabled	bool	disable input and dropdown
helperText	string	TextField helper text
inputProps	object	props that get spread to TextField InputProps
inputRef	function	callback for getting the input reference
autoFocus	bool	autoFocus input
error	boolean	TextField error state
variant	string	'standard' by default
fullWidth	boolean	TextField property - false by default

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'}

<MuiPhoneInput
  defaultCountry='it'
  regions={'europe'}
/>

Regions selected: {['north-america', 'carribean']}

<MuiPhoneInput
  defaultCountry='ca'
  regions={['north-america', 'carribean']}
/>

Localization

Name	Type
localization	object

<MuiPhoneInput
  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

Based on react-phone-input-2

Based on react-phone-input using MIT