https://github.com/alexplumb/material-ui-phone-number

Fork of react-phone-input-2 for the Material-UI library
https://github.com/alexplumb/material-ui-phone-number

Last synced: 16 days ago
JSON representation

Fork of react-phone-input-2 for the Material-UI library

• Host: GitHub
• URL: https://github.com/alexplumb/material-ui-phone-number
• Owner: alexplumb
• License: mit
• Created: 2018-09-06T12:29:54.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2024-02-14T19:10:36.000Z (4 months ago)
• Last Synced: 2024-05-22T08:44:03.607Z (about 1 month ago)
• Language: JavaScript
• Size: 2.64 MB
• Stars: 121
• Watchers: 5
• Forks: 180
• Open Issues: 85
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Authors: AUTHORS

Lists

• my-awesome-stars - alexplumb/material-ui-phone-number - Fork of react-phone-input-2 for the Material-UI library (JavaScript)

README

        
# material-ui-phone-number

Highly customizable phone input component with auto formatting. Based on the wonderful [react-phone-input-2](https://github.com/bl00mber/react-phone-input-2) package.

It looks like this, but in Material Design:

![alt tag](https://media.giphy.com/media/l378A8qFNzgiuPUre/giphy.gif)

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

## Installation

```shell-script

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

```

## Usage

```jsx

import MuiPhoneNumber from 'material-ui-phone-number';

React.render(

  ,

  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:

```jsx

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

```jsx

```

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

```jsx

```

### Localization

  

     Name 

     Type 

  

  

     localization 

     object 

  

```jsx

```

### 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](https://github.com/bl00mber/react-phone-input-2)

Based on [react-phone-input](https://github.com/razagill/react-phone-input) using [MIT](https://opensource.org/licenses/MIT)