mui-phone-number

NOTE: I started this library because material-ui-phone-number took some time to upgrade to Material-ui v5. Now that some people are using this library, I feel like I should keep it up even if material-ui-phone-number has done a great job at upgrading and maintaning its library. I suggest you switch to material-ui-phone-number or if you feel like helping me maintaining this lib, let me know!. Thanks.

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 @mui/material/TextField for rendering the phone input

Installation

npm install mui-phone-number --save

Usage

import MuiPhoneNumber from 'mui-phone-number';

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

Regions

Regions selected: {'europe'}

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

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

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

Localization

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

Supported events

Country data object not returns from onKeyDown event

License

Based on react-phone-input-2

Based on react-phone-input using MIT\

Based on material-ui-phone-number