🪄 Enhancement - Disable area code for specific country

[MattiaDellOca]

Summary

It would be beneficial to omit the area code for countries that do not use it.
While it's not certain whether every country has an area code, even assuming that each technically does, its inclusion can be confusing for end-users. For example, an example of Swiss phone number could be +41 12 345 67 89, with no area code required.
Implementing a feature that allows you to decide when to include an area code would greatly simplify data entry and intuitivity for users

[ArtyomVancyan]

The area code is parsed anyway, so you can use the parsed value to convert to your desired format.

Value

{
  "countryCode": 41,
  "areaCode": "12",
  "phoneNumber": "3456789",
  "isoCode": "ch"
}

Transform

const onChange = ({countryCode, areaCode, phoneNumber}) => {
    const transformedValue = {countryCode, phoneNumber: `${areaCode}${phoneNumber}`};
    console.log("transformedValue: ", transformedValue);
}

<PhoneInput
    enableSearch
    onChange={onChange}
/>

[shaiju-tte]

How can I disable display formatting and show the number as +919995321122?

[ArtyomVancyan]

Unfortunately, there is no such option for disabling the input mask. The input mask is a feature that makes phone numbers more readable to users. I don't know why you would be interested in it, but you can extend react-phone-hooks to build your custom phone input component.

[MattiaDellOca]

While it is possible to get the final value as if the area code didn't matter, I find it to be quite confusing for the end user.
If I had to insert my phone number in a website and, seeing the final value, noticed that the format is not the one that I'm comfortable using, I would feel disoriented.
Plus, some phone numbers do use values in parentheses, but not as as a 2 digits parameter.

Taking again Swiss phone numbers as an example, they are usually formatted as followings:

• 0xx yyy zz ww if calling locally (no prefix required)
• +41 xx yyy zz ww if calling from abroad, this work also for local calls. Usually Swiss phone numbers are displayed using this format
• +41 (0)xx yyy zz ww alternative to the previous option

Therefore it would technically possible to insert the phone number in a format +41 (00) xx yyy zz ww, I find this option not to be user friendly, as you will never format your phone number like that. I guess the same reasoning could be applied to phone numbers from other countries.
It would be amazing if area code were adapted to every country use case, and not a static 2 digits mandatory field

[ArtyomVancyan]

The example you have provided is achievable. It is enough to define a new country entity in the countries.json list that will use a different input mask for certain types of dial codes. The current list of country entities includes only the general masks and is based on Google's libphonenumber, which is checked for updates weekly. I recommend you to fork the react-phone-hooks, make your changes in the countries.json (use development application for testing the result) and open a pull-request. I will review and release the changes so you can use it for your needs. This is an example of one entity that makes it possible to have area codes of different lengths for the same country.

[
  "ch",
  "Switzerland",
  "41",
  "+41 (..) ... ... ...."
],
[
  "ch",
  "Switzerland",
  "410",  // numbers starting with `410` dial code will use the following input mask
  "+41 (0) ... ... ...."
],

P.S. About the parenthesis, there is an issue that suggests avoiding them in some cases, and it will be available soon, it is already in my TODO list. Also, please feel free to open up any discussions or issues when contributing to the project. I will be there to answer your questions and fix your problem.