JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 8478
  • Score
    100M100P100Q135258F
  • License MIT

A material-ui react component to format phone numbers. Based on Material UI Phone Number, which ceased to be maintained.

Package Exports

  • material-ui-phone-number-2
  • material-ui-phone-number-2/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (material-ui-phone-number-2) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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:

alt tag

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

Installation

npm install material-ui-phone-number-2 --save

Usage

import MuiPhoneNumber from '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

Name Type Description Example
excludeCountries array array of country codes to be excluded ['cu','cw','kz']
onlyCountries array country codes to be included ['cu','cw','kz']
preferredCountries array country codes to be at the top ['cu','cw','kz']
defaultCountry string initial country 'us'
inputClass string class for input
dropdownClass string class for dropdown container
autoFormat bool on/off auto formatting, true by default
disableAreaCodes bool disable local codes for all countries
disableCountryCode bool false by default
disableDropdown bool false by default
enableLongNumbers bool false by default
countryCodeEditable bool true by default
Supported TextField props
See TextField API for possible values https://material-ui.com/api/text-field/

Regions

Name Type Description
regions array/string to only show codes from selected regions
Regions
['america', 'europe', 'asia', 'oceania', 'africa']
Subregions
['north-america', 'south-america', 'central-america', 'carribean', 'european-union', 'ex-ussr', 'middle-east', 'north-africa']

Regions selected: {'europe'}

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

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

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

Localization

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

Supported events

onChange onFocus onBlur onClick onKeyDown

Country data object not returns from onKeyDown event

Data Type Description
value/event string/object the event or the phone number
country data object the country object { name, dialCode, country code (iso2 format) }

License

MIT Licence.

Based on material-ui-phone-number

Based on react-phone-input-2

Based on react-phone-input using MIT