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

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

Download Details:

Author: Manjul1225

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/Manjul1225/Phone_number_generator-react-

License: MIT

Add Comment