Phone Input With Auto Number Formatting – React-Phone-Input

Description:

A highly customizable telephone number input component with auto-formatting.

How to use it:

1. Install and import the PhoneInput component.

import PhoneInput from 'react-phone-input-2'
import 'react-phone-input-2/lib/style.css'

2. Add the <PhoneInput /> component to your app.

<PhoneInput
  country={'us'}
  value={this.state.phone}
  onChange={phone => this.setState({ phone })}
/>

3. All default options.

country: '',
value: '',
onlyCountries: [],
preferredCountries: [],
excludeCountries: [],
placeholder: '1 (702) 123-4567',
searchPlaceholder: 'search',
searchNotFound: 'No entries to show',
flagsImagePath: './flags.png',
disabled: false,
containerStyle: {},
inputStyle: {},
buttonStyle: {},
dropdownStyle: {},
searchStyle: {},
containerClass: '',
inputClass: '',
buttonClass: '',
dropdownClass: '',
searchClass: '',
className: '',
autoFormat: true,
enableAreaCodes: false,
enableTerritories: false,
disableCountryCode: false,
disableDropdown: false,
enableLongNumbers: false,
countryCodeEditable: true,
enableSearch: false,
disableSearchIcon: false,
disableInitialCountryGuess: false,
disableCountryGuess: false,
regions: '',
inputProps: {},
localization: {},
masks: null,
priority: null,
areaCodes: null,
preserveOrder: [],
defaultMask: '... ... ... ... ..', // prefix+dialCode+' '+defaultMask
alwaysDefaultMask: false,
prefix: '+',
copyNumbersOnly: true,
renderStringAsFlag: '',
autocompleteSearch: false,
jumpCursorToEnd: true,
enableAreaCodeStretch: false,
enableClickOutside: true,
showDropdown: false,
isValid: true, // (value, selectedCountry, onlyCountries, hiddenAreaCodes) => true | false | 'Message'
defaultErrorMessage: '',
specialLabel: 'Phone',
onEnterKeyPress: null, // null or function
keys: {
  UP: 38, DOWN: 40, RIGHT: 39, LEFT: 37, ENTER: 13,
  ESC: 27, PLUS: 43, A: 65, Z: 90, SPACE: 32, TAB: 9,
}

Preview:

React-Phone-Input

Add Comment