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

DONATIONS / FUNDING NEEDED

bitcoin bc1qa7q6gf9e06ssqrc46j5lekq886rlyyk6sdhjj0
ethereum 0x2b9429a7362a9b14f3d84a408d33caab29bdc225

---

Highly customizable phone input component with auto formatting.

Installation

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

Usage

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

available styles - style • high-res • material • bootstrap • semantic-ui • plain

Demo 1 (UI) - Demo 2 (CSS)

Options

Name	Type	Description	Example
country	string	initial country	'us' | 1
value	string	input state value
onlyCountries	array	country codes to be included	['cu','cw','kz']
preferredCountries	array	country codes to be at the top	['cu','cw','kz']
excludeCountries	array	array of country codes to be excluded	['cu','cw','kz']
placeholder	string	custom placeholder
inputProps	object	props to pass into the input

Booleans	Default	Description
autoFormat	true	on/off phone formatting
disabled	false	disable input and dropdown
disableDropdown	false	disable dropdown only
disableCountryCode	false
enableAreaCodes	false	enable local codes for all countries
enableTerritories	false	enable dependent territories with population of ~100,000 or lower
enableLongNumbers	false	boolean/number
countryCodeEditable	true
enableSearch	false	enable search in the dropdown
disableSearchIcon	false	hide icon for the search field

<PhoneInput
  inputProps={{
    name: 'phone',
    required: true,
    autoFocus: true
  }}
/>

Contents

• Style
• Events
• Regions
• Localization
• Local area codes
• Custom masks
• Custom area codes
• Other props
• Custom localization
• Guides
  • Phone without dialCode
  • Check validity of the phone number
  • CDN
• Contributing
• Support

Style

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
searchStyle	object	styles for search field

Events

onChange

onFocus

onBlur

onClick

onKeyDown

onChange(value, country, e, formattedValue)

Country data object not returns from onKeyDown event

Data	Type	Description
value/event	string/object	event or the phone number
country data	object	country object { name, dialCode, countryCode (iso2) }

Regions

Name	Type	Description
regions	array/string	to show countries only from specified regions

Regions
['america', 'europe', 'asia', 'oceania', 'africa']
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']}
/>

Predefined localization

es Spanish, de Deutsch, ru Russian, fr French
jp Japanese, cn Chinese, pt Portuguese, it Italian
ir Iranian, ar Arabic, tr Turkish, id Indonesian
hu Hungarian, pl Polish, ko Korean

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

<PhoneInput
  localization={es}
/>

Local area codes

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

Flexible mask

If enableAreaCodeStretch is added, the part of the mask with the area code will not stretch to length of the respective section of phone mask. Example: +61 (2), +61 (02)

Custom masks

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

Custom area codes

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

Other props

defaultMask	... ... ... ... ..
alwaysDefaultMask	false
prefix	+
searchPlaceholder	'search'
searchNotFound	'No entries to show'
copyNumbersOnly	true
renderStringAsFlag	string
autocompleteSearch	false
jumpCursorToEnd	false
priority	{{ca: 0, us: 1, kz: 0, ru: 1}}
enableClickOutside	true
showDropdown	false
defaultErrorMessage	string
specialLabel	string
disableInitialCountryGuess	false
disableCountryGuess	false

Custom localization

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

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

Preserve countries order

<PhoneInput
  onlyCountries={['fr', 'at']}
  preserveOrder={['onlyCountries', 'preferredCountries']}
/>

Guides

Phone without dialCode

handleOnChange(value, data, event, formattedValue) {
  this.setState({ rawPhone: value.slice(data.dialCode.length) })
}

Check validity of the phone number

isValid(value, country, countries, hiddenAreaCodes)

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

import startsWith from 'lodash.startswith';

<PhoneInput
  isValid={(inputNumber, country, countries) => {
    return countries.some((country) => {
      return startsWith(inputNumber, country.dialCode) || startsWith(country.dialCode, inputNumber);
    });
  }}
/>

Clear country

To clear country, pass null as value.

Dynamic placeholder

Show

const phoneCountryFormat = useMemo(() => phoneCountry?.format || undefined, [phoneCountry]);
const placeholder = useMemo(() => {
  if (phoneCountryFormat) {
    const words = phoneCountryFormat.split(' ');
    words.shift(); // I'm using only local numbers so here I remove the country code from the format
    let text = words.join(' ');
     // first digit is special on french numbers, these 3 lines could be removed
    if (country === 'fr') {
      text = text.replace('.', '6');
    }
    while (text.indexOf('.') > -1) {
      text = text.replace('.', `${Math.min(9, Math.max(1, Math.floor(Math.random() * 10)))}`);
    }
    return text;
  }
  return '';
}, [phoneCountryFormat, country]);

CDN

<script src="https://unpkg.com/react-phone-input-2@2.x/dist/lib.js"></script>

Contributing

• Code style changes not allowed
• Do not create issues about incorrect or missing country masks (of already present countries) or absent area codes (they will be closed). Only create issues if the subject is an actual mechanism that is not present in the component. Otherwise create a PR with a link that proves the correctness of your newly suggested mask or list of area codes
• Do not send new languages

License

Based on react-phone-input

Make sure you donated for lib maintenance