@alisson-amaral/material-ui-phone-number-text-fiel

material-ui-phone-number-text-field

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:

alt tag

Uses @mui/material/TextField for rendering the phone input

Installation

npm install @alisson-amaral/material-ui-phone-number-text-field --save

Usage

import MaterialUiPhoneNumberTextField from '@alisson-amaral/material-ui-phone-number-text-field';

React.render(
  <MaterialUiPhoneNumberTextField 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

Localization

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

You can check the current supported countries over here

If the country that you want does not have on the default country list, you can also use your own custom list

Example

    <MaterialUiPhoneNumberTextField
      defaultCountry="ar"
      label="Phone number"
      countryList={customList}
    />

Country List example

export default [
  {
    iso2: 'al',
    dialCode: '355',
    format: '+... .........',
    name: 'Albania'
  },
  {
    iso2: "ar",
    dialCode: "54",
    format: "+.. (..) ........",
    name: "Argentina"
  },
  {
    iso2: "au",
    dialCode: "61",
    format: "+.. ... ... ...",
    name: "Australia",
  }
]