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 @zampou-spec/material-ui-phone-number-2 --save

Usage

import MuiPhoneNumber from '@zampou-spec/material-ui-phone-number-2'

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'}

<MuiPhoneNumber defaultCountry="it" regions={'europe'} />

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

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

Localization

<MuiPhoneNumber 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