material-ui-phone-number-react-18 v3.0.1

material-ui-phone-number

fork from alexplumb/material-ui-phone-number

change react version 18 and fix chinese mobile format

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

Installation

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

Usage

import MuiPhoneNumber from "material-ui-phone-number-react-18";

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