phone-number-material-ui

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

Look

Uses @material-ui/core/TextField for rendering the phone input

Installation

npm install phone-number-material-ui --save

or

yarn add phone-number-material-ui

Usage

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

import React from 'react';
import PhoneInput from 'phone-number-material-ui';
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 */}
      <PhoneInput
        value={value}
        onChange={onChange} // passed function receives the phone value
        component={TextField}
      />

      {/* Configure more */}
      <PhoneInput
        value={value}
        defaultCountry={defaultCountry || 'gb'}
        onChange={onChange}
        inputClass={classes.field}
        dropdownClass={classes.countryList}
        component={TextField}
      />
    </React.Fragment>
  );
}

export default withStyles(styles)(PhoneField);

Options

<PhoneInput
  inputProps={{
    name: 'phone',
    required: true,
    autoFocus: true
  }}
/>

Contents

• phone-number-material-ui
  • Look
  • Installation
  • Usage
  • Options
    • Contents
    • Style
    • Events
    • Regions
    • Predefined localization
    • Local area codes
      • Flexible mask
    • Custom masks
    • Custom area codes
    • Other props
    • Custom localization
    • Preserve countries order
  • Guides
    • Phone without dialCode
    • Check validity of the phone number
    • Clear country
    • Dynamic placeholder
  • Contributing
  • License

Style

Events

onChange(value, country, e, formattedValue)

Country data object not returns from onKeyDown event

Regions

<PhoneInput
  country='de'
  regions={'europe'}
/>

<PhoneInput
  country='us'
  regions={['north-america', 'carribean']}
/>

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 hu Hungarian, pl Polish, ko Korean

import es from 'react-phone-input-2/lang/es.json'

<PhoneInput
  localization={es}
/>

Local area codes

<PhoneInput
  enableAreaCodes={true}
  enableAreaCodes={['us', 'ca']}
  enableAreaCodeStretch
/>

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
  onlyCountries={['fr', 'at']}
  masks={{fr: '(...) ..-..-..', at: '(....) ...-....'}}
/>

Custom area codes

<PhoneInput
  onlyCountries={['gr', 'fr', 'us']}
  areaCodes={{gr: ['2694', '2647'], fr: ['369', '463'], us: ['300']}}
/>

Other props

Custom localization

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

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

Preserve countries order

<PhoneInput
  onlyCountries={['fr', 'at']}
  preserveOrder={['onlyCountries', 'preferredCountries']}
/>

Guides

Phone without dialCode

handleOnChange(value, data, event, formattedValue) {
  this.setState({ rawPhone: value.slice(data.dialCode.length) })
}

Check validity of the phone number

isValid(value, country, countries, hiddenAreaCodes)

<PhoneInput
  isValid={(value, country) => {
    if (value.match(/12345/)) {
      return 'Invalid value: '+value+', '+country.name;
    } else if (value.match(/1234/)) {
      return false;
    } else {
      return true;
    }
  }}
/>

import startsWith from 'lodash.startswith';

<PhoneInput
  isValid={(inputNumber, country, countries) => {
    return countries.some((country) => {
      return startsWith(inputNumber, country.dialCode) || startsWith(country.dialCode, inputNumber);
    });
  }}
/>

Clear country

To clear country, pass null as value.

Dynamic placeholder

const phoneCountryFormat = useMemo(() => phoneCountry?.format || undefined, [phoneCountry]);
const placeholder = useMemo(() => {
  if (phoneCountryFormat) {
    const words = phoneCountryFormat.split(' ');
    words.shift(); // I'm using only local numbers so here I remove the country code from the format
    let text = words.join(' ');
     // first digit is special on french numbers, these 3 lines could be removed
    if (country === 'fr') {
      text = text.replace('.', '6');
    }
    while (text.indexOf('.') > -1) {
      text = text.replace('.', `${Math.min(9, Math.max(1, Math.floor(Math.random() * 10)))}`);
    }
    return text;
  }
  return '';
}, [phoneCountryFormat, country]);

Contributing

• PRs are welcome for any of the changes

License

Based on react-phone-input

Make sure you donated for lib maintenance