Material-UI Phone Field

Simple React phone input field based on Material-UI, i18n-iso-countries and libphonenumber-js. Overall look and feel will change when we add country flags.

Installation

To install the component run this command:

npm i -S @ambiot/material-ui-phone-field

Prop Name	Type	Default	Description
value	string	empty string	Accepts plain phone number, without any formatting. For example, `+79031234567`
onChange	`(value: string) => void`, required	—	Callback when user changes the input. Returns plain phone number without any formatting. If user didn't choose the country, returns just the value of the text field. If user did, returns text field value with plus sign and country calling code prepended.
defaultCountry	string	`null`	ISO country code to be selected by default
fullWidth	boolean	`false`	If `true`, field will take 100% of the available width.
language	string	`en`	Language in which country names are displayed. Currently supports only `en` and `ru` values for English and Russian language respectively.

[ ] Correctly expose registerLocale method of i18n-iso-countries without increasing the bundle size, so user can required languages manually.
[ ] Add country flags to Select field from the flags folder. See this TSDX issue and this StackOverflow question.

The package is built using TSDX. Refer to its documentation if you need some advanced stuff. Here's simple stuff:

Clone the repository: git clone https://github.com/ambiot-llc/material-ui-phone-field.git
Get inside the folder: cd material-ui-phone-field
Install all the general dependencies: npm install
Run TSDX watcher using npm start
Open another terminal and get inside the example folder: cd example
Install all dependencies needed to launch the example: npm install
Run npm start to launch the example app
Library is located in src. Edit the code and watch the changes in the browser