react-phone-input-mui

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

Highly customizable phone input component with auto formatting.

Original look:

With Materiall UI's TextField:

Installation

npm install react-phone-input-mui --save

Usage with Material UI

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

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 (
    <React.Fragment>
      {/* Simple usage */}
      <ReactPhoneInput
        value={value}
        onChange={onChange} // passed function receives the phone value
        component={TextField}
      />

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

export default withStyles(styles)(PhoneField);

Original usage docs

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

<ReactPhoneInput defaultCountry={'us'} value={this.state.phone} onChange={handleOnChange}/>

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

<ReactPhoneInput
  inputExtraProps={{
    name: 'phone',
    required: true,
    autoFocus: true
  }}
/>

Regions

Regions selected: {'europe'}

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

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

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

Localization

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

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

Custom masks

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

Supported events

Country data object not returns from onKeyDown event

Phone without dialCode

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