https://github.com/ioki-mobility/mui-phone-number

Phone number input field for material UI (mui.com).
https://github.com/ioki-mobility/mui-phone-number

Last synced: 13 days ago
JSON representation

Phone number input field for material UI (mui.com).

• Host: GitHub
• URL: https://github.com/ioki-mobility/mui-phone-number
• Owner: ioki-mobility
• License: mit
• Created: 2022-12-08T11:01:46.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-05-01T22:04:48.000Z (8 months ago)
• Last Synced: 2024-05-02T15:22:10.763Z (8 months ago)
• Language: TypeScript
• Size: 1.51 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# mui-phone-number

A React phone input component with auto formatting for [Material UI](https://mui.com).

![mui-phone-number demo](doc/demo.gif)

Uses `@mui/material/TextField` for rendering the phone input.

## Installation

```shell

npm install mui-phone-number

```

```shell

yarn add mui-phone-number

```

## Usage

```jsx

import MuiPhoneNumber from "mui-phone-number";

;

```

The handler for the `onChange` event receives the entered phone number as a string (including the country dial code).

```js

const onPhoneNumberChanged = (phoneNumber, country) => {

  console.log(phoneNumber); // +4176 123 45 67

  console.log(country); // { name: "Switzerland", dialCode: "41", countryCode: "ch" }

};

```

## Options

  

     Name 

     Type 

     Description 

     Example 

     Default 

  

  

     excludeCountries 

     array 

     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 

    

    

  

  

     autoFormat 

     bool 

     add whitespace, brackets and dashes if true 

    

     true 

  

  

     disableDropdown 

     bool 

     hide the country selection 

    

     false 

  

  

     enableLongNumbers 

     bool 

    

    

     false 

  

  

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

  

Single region (without array notation): `'europe'`

```jsx

```

Multiple regions: `['north-america', 'carribean']`

```jsx

```

### Localization

  

     Name 

     Type 

  

  

     localization 

     object 

  

```jsx

```

### Supported events

  

     onChange 

     onFocus 

     onBlur 

     onClick 

  

  

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

  

## Development

To start and open the demo page:

```shell

yarn dev

```

## Authors

- [@phylor](https://github.com/phylor)

## License

[MIT](https://opensource.org/licenses/MIT)

Based on:

- [material-ui-phone-number-2](https://github.com/justdvl/material-ui-phone-number-2)

- [material-ui-phone-number](https://github.com/alexplumb/material-ui-phone-number)

- [react-phone-input-2](https://github.com/bl00mber/react-phone-input-2)

- [react-phone-input](https://github.com/razagill/react-phone-input)