react-phone-input-mui

react-phone-input-2 for Material UI v1+

Highly customizable phone input component with auto formatting.

$3

!alt tag

$3

!alt tag

Installation

``shell-script
npm install react-phone-input-mui --save
`

Usage with Material UI

Mandatory props: value and onChange for controlling field; component, ideally TextField

`jsx
import React from 'react';
import ReactPhoneInput from 'react-phone-input-mui';
import { TextField, withStyles } from '@material-ui/core';

const styles = theme => ({
field: {
margin: '10px 0',
},
countryList: {
...theme.typography.body1,
},
});


function PhoneField(props) {
const { value, defaultCountry, onChange, classes } = props;

return (

{/ Simple usage /}
value={value}
onChange={onChange} // passed function receives the phone value
component={TextField}
/>

{/ Configure more /}
value={value}
defaultCountry={defaultCountry || 'gb'}
onChange={onChange}
inputClass={classes.field}
dropdownClass={classes.countryList}
component={TextField}
inputExtraProps={{
margin: 'normal',
autoComplete: 'phone',
name: 'custom-username'
}}
/>

);
}

export default withStyles(styles)(PhoneField);
`

Original usage docs

`jsx
import ReactPhoneInput from 'react-phone-input-2'
import 'react-phone-input-2/dist/style.css'


`

Your handler for the onChange event should expect a string as
parameter, where the value is that of the entered phone number. For example:

`jsx
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'
value	string	input state value
placeholder	string	custom placeholder
searchPlaceholder	string	custom search placeholder
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
inputExtraProps	object	props to pass into the input
autoFormat	bool	on/off phone formatting, true by default
disableAreaCodes	bool	disable local codes for all countries
disabled	bool	disable input and dropdown
disableDropdown	bool	disable dropdown only, false by default
disableCountryCode	bool	false by default
enableLongNumbers	bool	false by default
countryCodeEditable	bool	true by default
enableSearchField	bool	enables search field in the dropdown
disableSearchIcon	bool	hide icon for the search field

`jsx
inputExtraProps={{
name: 'phone',
required: true,
autoFocus: true
}}
/>
`

$3

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'}
`jsx
defaultCountry='it'
regions={'europe'}
/>
`

Regions selected: {['north-america', 'carribean']}
`jsx
defaultCountry='ca'
regions={['north-america', 'carribean']}
/>
`

$3

Name	Type
localization	object

`jsx
onlyCountries={['de', 'es']}
localization={{'Germany': 'Deutschland', 'Spain': 'España'}}
/>

onlyCountries={['de', 'es']}
localization={{'de': 'Deutschland', 'es': 'España'}}
/>
`

$3

Name	Type
masks	object

`jsx
onlyCountries={['fr', 'at']}
masks={{'fr': '+.. (...) ..-..-..', 'at': '+.. (....) ...-....'}}
/>
`

$3

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, countryCode (iso2 format) }

$3

`jsx
function handleOnChange(value, data) {
this.setState({ rawPhone: value.replace(/[^0-9]+/g,'').slice(data.dialCode.length) })
}
``

Contributing

Code style changes not allowed

License


Based on react-phone-input