CODEWITHSUNDEEP
reactjsvalidationlibphonenumber
Idris
Idris

Reputation: 518

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.

Upvotes: 4

Views: 10644

Answers (3)

Tanvir
Tanvir

Reputation: 31

addInternationalOption={false}

This will remove international option from the list.

Upvotes: 3

S.M Naveen
S.M Naveen

Reputation: 190

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

Upvotes: 1

Sachin Yadav
Sachin Yadav

Reputation: 806

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"]}
 />

Upvotes: 1

Related Questions