react-phone-input-2

What is react-phone-input-2?

The react-phone-input-2 package is a React component for entering and validating international telephone numbers. It provides a user-friendly interface with country flags, auto-formatting, and validation features.

What are react-phone-input-2's main functionalities?

Basic Phone Input

This feature allows you to create a basic phone input field with a default country set to the United States. The phone number entered is logged to the console.

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

const App = () => {
  return (
    <PhoneInput
      country={'us'}
      value={''}
      onChange={phone => console.log(phone)}
    />
  );
};

export default App;

Custom Styles

This feature allows you to customize the styles of the phone input component, including the container, input field, and button.

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

const App = () => {
  return (
    <PhoneInput
      country={'us'}
      containerStyle={{ border: '1px solid red' }}
      inputStyle={{ width: '300px' }}
      buttonStyle={{ backgroundColor: 'blue' }}
    />
  );
};

export default App;

Country Dropdown

This feature enables a dropdown for selecting the country code, with an option to search for countries.

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

const App = () => {
  return (
    <PhoneInput
      country={'us'}
      enableSearch={true}
      disableDropdown={false}
    />
  );
};

export default App;

Localization

This feature allows you to localize the country names in the dropdown.

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

const App = () => {
  return (
    <PhoneInput
      country={'us'}
      localization={{ 'us': 'United States', 'gb': 'United Kingdom' }}
    />
  );
};

export default App;

Other packages similar to react-phone-input-2

react-phone-number-input

react-phone-number-input is another React component for phone number input. It focuses on providing a simple and customizable phone number input field with validation. Compared to react-phone-input-2, it offers a more minimalistic approach without country flags and advanced styling options.

react-intl-tel-input

react-intl-tel-input is a React wrapper for the intl-tel-input library. It provides a comprehensive solution for international phone number input with country flags, validation, and formatting. It is similar to react-phone-input-2 but offers more advanced features and customization options.

README

react-phone-input-2

Highly customizable phone input component with auto formatting.

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	input state value
placeholder	string	custom placeholder
containerClass	string	class for container
inputClass	string	class for input
buttonClass	string	class for dropdown button
dropdownClass	string	class for dropdown container
searchClass	string	class for search field
containerStyle	object	styles for container
inputStyle	object	styles for input
buttonStyle	object	styles for dropdown button
dropdownStyle	object	styles for dropdown container
inputExtraProps	object	props to pass into the input
autoFormat	bool	on/off phone formatting, true by default
disableAreaCodes	bool	disable local codes for all countries
disabled	bool	disable input and dropdown
disableDropdown	bool	disable dropdown only, false by default
disableCountryCode	bool	false by default
enableLongNumbers	bool	false by default
countryCodeEditable	bool	true by default
enableSearchField	bool	enables search field in the dropdown

<ReactPhoneInput
  inputExtraProps={{
    name: 'phone',
    required: true,
    autoFocus: true
  }}
/>

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

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

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

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

Localization

Name	Type
localization	object

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

License

Based on react-phone-input using MIT

Changelog

2.7.1 (November 29, 2018)

• Styles update, fix SearchField autoFocus
• SearchField @awthwathje