How do I remove the international option in React Phone Number Input?

Question

How do I remove the international option from the select options in react-phone-number-input package? I am trying to limit the countries to only six. I have added the defaultCountry and countries prop but it still allows for other countries' phone numbers to be typed in. Here is how I am using it:

<PhoneInput
   placeholder={placeholder}
   name={name}
   value={value}
   onChange={onValueChange}
   onBlur={handleInputBlur}
   onFocus={handleInputFocus}
   defaultCountry={country}
   countries={["NG", "MG", "SC", "KM", "BW", "MR"]}
 />

Here is how it shows up with the international option included without being specified in the props:

How do I remove the international option.

https://www.npmjs.com/package/react-phone-number-input docs mention "Creating a custom country". You might be able to figure out a way from there. — Amila Senadheera, Nov 13 '21 at 08:34

score 3 · Answer 1 · edited Apr 05 '22 at 21:06

3

addInternationalOption={false}

This will remove international option from the list.

edited Apr 05 '22 at 21:06

Skatox

4,237
12
42
47

answered Apr 05 '22 at 14:23

Tanvir

31
4

score 1 · Answer 2 · edited Nov 14 '21 at 08:17

It is mentioned in the documentary

defaultCountry: string? — If defaultCountry is specified then the phone number can be input both in "international" format and "national" format. A phone number that's being input in "national" format will be parsed as a phone number belonging to the defaultCountry. Must be a supported country code. Example: defaultCountry="US".

SRC: https://www.npmjs.com/package/react-phone-number-input

<PhoneInput
   placeholder={placeholder}
   name={name}
   value={value}
   onChange={onValueChange}
   onBlur={handleInputBlur}
   onFocus={handleInputFocus}
   defaultCountry={US}//  Instead of "country" specify the country 
   countries={["NG", "MG", "SC", "KM", "BW", "MR"]}
 />

Please read the documentation

score 1 · Answer 3 · answered Nov 13 '21 at 08:35

Set the international prop to false, in order to remove it.

By the Documentation if country is US and international property is not passed then the phone number can only be input in the "national" format for US ((213) 373-4253). But if country is "US" and international property is true then the phone number can only be input in the "international" format for US (213 373 4253) without the "country calling code" part (+1)

Your code should be

<PhoneInput
   placeholder={placeholder}
   name={name}
   value={value}
   international = {false}
   onChange={onValueChange}
   onBlur={handleInputBlur}
   onFocus={handleInputFocus}
   defaultCountry={country}
   countries={["NG", "MG", "SC", "KM", "BW", "MR"]}
 />

How do I remove the international option in React Phone Number Input?

3 Answers3