react-phone-input-2

You can define specific input masks and area codes for certain countries.

Custom Masks

Use the masks prop to provide a mapping of country codes to mask patterns.

Custom Area Codes

Use the areaCodes prop to provide a mapping of country codes to arrays of valid area codes.

Local Area Codes

Enable local area code support using enableAreaCodes. You can pass an array of country codes to limit this feature to specific countries and use enableAreaCodeStretch to prevent the mask from stretching to the full length of the area code section.

<PhoneInput
  onlyCountries={['fr', 'at']}
  masks={{fr: '(...) ..-..-..', at: '(....) ...-....'}}
/>

<PhoneInput
  enableAreaCodes={true}
  enableAreaCodes={['us', 'ca']}
  enableAreaCodeStretch
/>

<PhoneInput
  onlyCountries={['gr', 'fr', 'us']}
  areaCodes={{gr: ['2694', '2647'], fr: ['369', '463'], us: ['300']}}
/>

You can localize the component using predefined language files or custom localization objects.

Predefined Localization

Import language JSON files from react-phone-input-2/lang/ (e.g., es, de, ru, fr, jp, cn, pt, it, ir, ar, tr, id, hu, pl, ko).

Custom Localization

Pass a mapping object to the localization prop where keys are country names or codes and values are the translated strings.

import es from 'react-phone-input-2/lang/es.json'

<PhoneInput localization={es} />

// Or custom mapping
<PhoneInput
  onlyCountries={['de', 'es']}
  localization={{de: 'Deutschland', es: 'España'}}
/>

Install the package using npm to add the highly customizable phone input component to your React project.

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

You can customize the appearance of the component using CSS classes or inline styles for various sub-elements.

CSS Classes

• containerClass: Class for the main container.
• inputClass: Class for the input field.
• buttonClass: Class for the dropdown button.
• dropdownClass: Class for the dropdown container.
• searchClass: Class for the search field.

Inline Styles

Use the following keys to pass style objects:

• containerStyle
• inputStyle
• buttonStyle
• dropdownStyle
• searchStyle

To use the component, import PhoneInput and its required CSS file. You should manage the phone number in your component's state and update it via the onChange callback.

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

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

The isValid prop allows you to provide a custom validation function. The function receives (value, country, countries) and should return true if valid, or false/a string if invalid.

<PhoneInput
  isValid={(value, country) => {
    if (value.match(/12345/)) {
      return 'Invalid value: '+value+', '+country.name;
    } else if (value.match(/1234/)) {
      return false;
    } else {
      return true;
    }
  }}
/>

The component supports several event listeners:

• onChange: Triggered when the value changes. Signature: onChange(value, country, e, formattedValue).
  • value: The phone number string.
  • country: An object containing { name, dialCode, countryCode (iso2) }.
  • e: The event object.
  • formattedValue: The formatted phone number string.
• onFocus
• onBlur
• onClick
• onKeyDown (Note: The country data object is not returned from the onKeyDown event).

The component allows granular control over its visual presentation via styles and CSS classes:

Styles (Objects):

• containerStyle: Style for the outer wrapper.
• inputStyle: Style for the text input.
• buttonStyle: Style for the flag/dropdown button.
• dropdownStyle: Style for the country list container.
• searchStyle: Style for the search input.

CSS Classes (Strings):

• className: Applied to the outer container.
• containerClass: Custom class for the container.
• inputClass: Custom class for the input.
• buttonClass: Custom class for the flag button.
• dropdownClass: Custom class for the dropdown list.
• searchClass: Custom class for the search box.
• inputProps: An object passed directly to the underlying <input> element.

You can control which countries appear in the dropdown using the following props:

• country: The initial selected country. Can be an ISO2 string (e.g., 'us') or a dial code (e.g., 1).
• onlyCountries: An array of ISO2 strings to restrict the list to specific countries.
• preferredCountries: An array of ISO2 strings to show at the top of the list.
• excludeCountries: An array of ISO2 strings to remove from the list.
• regions: A string or array of strings to filter countries by region.
• preserveOrder: An array of ISO2 strings to maintain a specific order in the list.

<PhoneInput
  onlyCountries={['us', 'gb', 'ca']}
  preferredCountries={['us']}
  excludeCountries={['ca']}
  country='us'
/>

Filter the available countries by specifying regions as a string or an array of strings.

Available Regions:

• ['america', 'europe', 'asia', 'oceania', 'africa']

Available Subregions:

• ['north-america', 'south-america', 'central-america', 'carribean', 'eu-union', 'ex-ussr', 'ex-yugos', 'baltic', 'middle-east', 'north-africa']

<PhoneInput
  country='de'
  regions={'europe'}
/>

<PhoneInput
  country='us'
  regions={['north-america', 'carribean']}
/>