Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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:

enter image description here

How do I remove the international option.

like image 910
Idris Avatar asked Oct 20 '25 13:10

Idris


2 Answers

addInternationalOption={false}

This will remove international option from the list.

like image 135
Tanvir Avatar answered Oct 22 '25 04:10

Tanvir


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"]}
 />
like image 30
Sachin Yadav Avatar answered Oct 22 '25 02:10

Sachin Yadav