Modify countries

You can define your own country list for PhoneInput. Just import defaultCountries and update it how you want.

Example

import { useState } from 'react';
import {
  PhoneInput,
  defaultCountries,
  parseCountry,
} from 'react-international-phone';

const countries = defaultCountries.filter((country) => {
  const { iso2 } = parseCountry(country);
  return ['us', 'ua', 'gb'].includes(iso2);
});

const App = () => {
  const [phone, setPhone] = useState('');

  return (
    <div>
      <PhoneInput
        defaultCountry="ua"
        phone={phone}
        onChange={setPhone}
        countries={countries}
      />
    </div>
  );
};

Output:

• Ukraine+380
• United Kingdom+44
• United States+1

Country Data Type

Each country in defaultCountries follows this format:

[
  string, // country name
  CountryIso2, // iso2 code
  string, // international dial code
  FormatConfig | string, // format (optional)
  number, // order priority (optional)
  string[], // area codes (optional)
]

note

The format can be either a string or a format-config object of the following type:

// Record with required "default" key
type FormatConfig = Record<string, string> & { default: string };

It should contain stringified regexp as keys and mask as value. Providing default key is required.
Example of format config object:

{
  'default': '. .... ....',
  '/^4/': '... ... ...',
  '/^5(?!50)/': '... ... ...'
}

You can use these data to filter/modify country list.

const [name, iso2, dialCode, format, priority, areaCodes] = defaultCountries[0];

tip

You can use the parseCountry helper function to convert the country data array to an object, modify it in some way, and build back with buildCountryData

const lowercasedCountries = defaultCountries.map((country) => {
  const parsedCountry = parseCountry(country);
  // lowercase country names, for example
  parsedCountry.name = parsedCountry.name.toLowerCase();

  return buildCountryData(parsedCountry);
});

Country data was originally taken from react-phone-input-2 🙏