Skip to content

Highly customizable phone input component with auto formatting

License

Notifications You must be signed in to change notification settings

ilyaagarkov/react-phone-input

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-phone-input-2

Highly customizable phone input component with auto formatting.

alt tag

Installation

npm install react-phone-input-2 --save

Usage

React.render(
  <ReactPhoneInput 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'
value string initial phone value
placeholder string custom placeholder
inputStyle object styles for input
buttonStyle object styles for dropdown button
dropdownStyle object styles for countries container
autoFormat bool on/off auto formatting (on by default)
disabled bool disable input and dropdown
disableAreaCodes bool disable local codes for all countries

Regions

You can specify custom regions use string or array of strings.

Regions
['america', 'europe', 'asia', 'oceania', 'africa']
Subregions (used region property too)
['north-america', 'south-america', 'central-america', 'carribean', 'european-union', 'ex-ussr', 'middle-east', 'north-africa']

Region selected: {'europe'}

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

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

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

Supported events

onChange onFocus onBlur onClick onKeyDown

License

Based on react-phone-input using MIT

About

Highly customizable phone input component with auto formatting

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 76.6%
  • CSS 23.4%