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

Regions

Regions selected: {'europe'}

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

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

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

Localization

<MuiPhoneInput
  onlyCountries=['de', 'es']
  localization={{'Germany': 'Deutschland', 'Spain': 'España'}}
/>

Supported events

Country data object not returns from onKeyDown event

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.