omeralpi / shadcn-phone-input

Customizable phone input component with proper validation for any country. Built on top of shadcn.
https://shadcn-phone-input.vercel.app
MIT License
422 stars 28 forks source link

Set actual value format independently #11

Closed ahkhanjani closed 3 months ago

ahkhanjani commented 5 months ago

Hi,

Is it possible to add the ability to set the field's value formatting (not display value) to something like E.164 etc.? Manually doing it throws and invalidated the country code for some reason. Probably skill issues on my side. But it would be nice to have that built in.

omeralpi commented 5 months ago

Hi,

Is it like this?

import { parsePhoneNumber } from "react-phone-number-input";

const parsedPhoneNumber: PhoneNumber | undefined = parsePhoneNumber("+905354511357");
{
        "country": "TR",
        "countryCallingCode": "90",
        "nationalNumber": "5354511357",
        "number": "+905354511357",
        "__countryCallingCodeSource": "FROM_NUMBER_WITH_PLUS_SIGN"
}
PhoneNumber {
  country?: CountryCode;
  countryCallingCode: CountryCallingCode;
  nationalNumber: NationalNumber;
  number: E164Number;
}
ahkhanjani commented 5 months ago

Hi,

Is it like this?

import { parsePhoneNumber } from "react-phone-number-input";

const parsedPhoneNumber: PhoneNumber | undefined = parsePhoneNumber("+905354511357");
{
        "country": "TR",
        "countryCallingCode": "90",
        "nationalNumber": "5354511357",
        "number": "+905354511357",
        "__countryCallingCodeSource": "FROM_NUMBER_WITH_PLUS_SIGN"
}
PhoneNumber {
  country?: CountryCode;
  countryCallingCode: CountryCallingCode;
  nationalNumber: NationalNumber;
  number: E164Number;
}

I don't quite understand what you mean by this. What I'm trying to say would be something like:

<PhoneInput {...props} outputFormat="E.164" />

Is this what you're asking? Could you please elaborate?