material-ui-phone-number
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.0 • Public • Published

    material-ui-phone-number

    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:

    alt tag

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

    Installation

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

    Usage

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

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

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

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

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

    Localization

    Name Type
    localization object
    <MuiPhoneInput
      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

    Based on react-phone-input-2

    Based on react-phone-input using MIT

    Install

    npm i material-ui-phone-number

    DownloadsWeekly Downloads

    25,731

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    407 kB

    Total Files

    20

    Last publish

    Collaborators

    • bherila
    • alexplumb