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

```shell-script npm install mui-phone-number --save

## Usage

```jsx
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

<th> Name </th>
<th> Type </th>
<th> Description </th>
<th> Example </th>

<td> excludeCountries </td>
<td> array </td>
<td> array of country codes to be excluded </td>
<td> ['cu','cw','kz'] </td>

<td> onlyCountries </td>
<td> array </td>
<td> country codes to be included </td>
<td> ['cu','cw','kz'] </td>

<td> preferredCountries </td>
<td> array </td>
<td> country codes to be at the top </td>
<td> ['cu','cw','kz'] </td>

<td> defaultCountry </td>
<td> string </td>
<td> initial country </td>
<td> 'us' </td>

<td> inputClass </td>
<td> string </td>
<td colspan="2"> class for input </td>

<td> dropdownClass </td>
<td> string </td>
<td colspan="2"> class for dropdown container </td>

<td> autoFormat </td>
<td> bool </td>
<td colspan="2"> on/off auto formatting, true by default </td>

<td> disableAreaCodes </td>
<td> bool </td>
<td colspan="2"> disable local codes for all countries </td>

<td> disableCountryCode </td>
<td> bool </td>
<td colspan="2"> false by default </td>

<td> disableDropdown </td>
<td> bool </td>
<td colspan="2"> false by default </td>

<td> enableLongNumbers </td>
<td> bool </td>
<td colspan="2"> false by default </td>

<td> countryCodeEditable </td>
<td> bool </td>
<td colspan="2"> true by default </td>

<td colspan="4"><b>Supported TextField props</b></td>

<td colspan="4">See TextField API for possible values https://mui.com/api/text-field/</td>

Regions

<th> Name </th>
<th> Type </th>
<th> Description </th>

<td> regions </td>
<td> array/string </td>
<td> to only show codes from selected regions </td>

<th> Regions </th>

<td> ['america', 'europe', 'asia', 'oceania', 'africa'] </td>

<th> Subregions </th>

<td> ['north-america', 'south-america', 'central-america', 'carribean', 'european-union', 'ex-ussr', 'middle-east', 'north-africa'] </td>

Regions selected: {'europe'}

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

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

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

Localization

<th> Name </th>
<th> Type </th>

<td> localization </td>
<td> object </td>

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

Supported events

<td> onChange </td>
<td> onFocus </td>
<td> onBlur </td>
<td> onClick </td>
<td> onKeyDown </td>

Country data object not returns from onKeyDown event

<th> Data </th>
<th> Type </th>
<th> Description </th>

<td> value/event </td>
<td> string/object </td>
<td> the event or the phone number </td>

<td> country data </td>
<td> object </td>
<td> the country object { name, dialCode, country code (iso2 format) } </td>

License

Based on react-phone-input-2
Based on react-phone-input using MIT\
Based on material-ui-phone-number