lev-material-ui-phone-number-2 v1.2.13

material-ui-phone-number-2

Highly customizable phone input component with auto formatting. Based on mui-phone-number which is not maintained anymore; and which was in turn based on the wonderful react-phone-input-2 package.

This library is actively maintained and currently being rewritten into functional style (previous one was class based).

It looks like this, but in Material Design:

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

Installation

npm install material-ui-phone-number2 --save

Usage

import MuiPhoneNumber from 'material-ui-phone-number2'

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

MIT Licence.

Based on material-ui-phone-number

Based on react-phone-input-2

Based on react-phone-input using MIT