braxex / mui-phone-input-ssr

An SSR-friendly, highly customizable Material UI React phone number input component with auto number formatting. Based on the excellent material-ui-phone-number, based on react-phone-input-2, based on react-phone-input.

mui-phone-input-ssr

An SSR-friendly, highly customizable Material UI React phone number input component with auto number formatting.

Based on the excellent material-ui-phone-number, based on react-phone-input-2, based on react-phone-input.

Additional credit to Nathaniel Allred (@neallred).

It uses @material-ui/core/TextField for rendering the phone input and looks like this:

Installation

yarn add mui-phone-input-ssr

npm install mui-phone-input-ssr --save

Usage

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

Additional documentation

See the following repos for additional documentation:

• material-ui-phone-number
• react-phone-input-2
• react-phone-input

Issues

Please submit unrelated PRs to material-ui-phone-number

License

MIT

Based on material-ui-phone-number, based on react-phone-input-2, based on react-phone-input using MIT.

mui-phone-input-ssr's Issues

Rekindle collaboration?

I have been added as a collaborator to https://github.com/alexplumb/material-ui-phone-number/

I think you might as well retain this package since you appear to be working on it and can maintain your deployment agility with your own npm package etc.. But, do you have interest in syncing up again from time to time?

-Ben

Issue formatting some countries

Hi,
Thank you for the work on library. Very useful.
We have some issues with autoformat. We need the following format
Italy ⇒ +39 XXX XXX XXX or +39 XXX XXX XXXX not +39 XXX XXXXXXX
Luxembourg ⇒ +35 2 XXX XXX XXX
Netherlands ⇒ +31 6 XXXXXXXX not +31 XX XXXXXXXX

We tried to set autoFormat to false, and set a value with our format, but input deletes the spaces anyway.

inputRef is shadowed by spread

There is an issue regarding inputRef:

• in the source code, you intercept this value in order to use it internaly
• in the render method, spreading the rest of the props shadow the previously set inputRef value

<TextField
        placeholder={statePlaceholder}
        value={formattedNumber}
        className={inputClass}
        inputRef={this.handleRefInput} // this value will be replaced by the value from restProps
        error={error || !this.checkIfValid()}
        onChange={this.handleInput}
        onClick={this.handleInputClick}
        onFocus={this.handleInputFocus}
        onBlur={this.handleInputBlur}
        onKeyDown={this.handleInputKeyDown}
        type="tel"
        InputProps={{
          ...dropdownProps,
          ...InputProps,
        }}
        {...restProps}
      />

An easy fix is to remove inputRef from ...restProps.