feat(phone-input): new phone input component

[omeralpi]

Hello everyone,

I noticed many users struggling with phone input validation in forms (#903).
Inspired by this, I'm simplifying the process by adding a user-friendly phone input feature. 🚀

Features

• This component offers a blend of customization and out-of-the-box styling.
• It utilizes the react-phone-number-input package.
• Ensure proper validation for any country.

const FormSchema = z.object({
  phone: z
    .string()
    .refine(isValidPhoneNumber, { message: "Invalid phone number" }),
})

Here is a complete video of the different use cases:

Screen.Recording.2024-02-06.at.20.45.26.mov

[vercel]

@omeralpi is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[NebraskaCoder]

Something is not right with the values as I get a warning about duplicate keys:

Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information.
    at eval (webpack-internal:///(ssr)/./components/ui/command.tsx:128:84)
    at CountrySelect (webpack-internal:///(ssr)/./components/ui/custom/phone-input.tsx:76:26)
    at div
    at PhoneNumberInput_ (webpack-internal:///(ssr)/./node_modules/react-phone-number-input/modules/PhoneInputWithCountry.js:243:9)
    at eval (webpack-internal:///(ssr)/./node_modules/react-phone-number-input/modules/PhoneInputWithCountryDefault.js:62:34)
    at div
    at eval (webpack-internal:///(ssr)/./components/ui/custom/phone-input.tsx:27:83)
    at eval (webpack-internal:///(ssr)/./node_modules/@radix-ui/react-slot/dist/index.mjs:42:23)
    at eval (webpack-internal:///(ssr)/./node_modules/@radix-ui/react-slot/dist/index.mjs:16:23)
    at eval (webpack-internal:///(ssr)/./components/ui/form.tsx:100:87)
    at div
    at eval (webpack-internal:///(ssr)/./components/ui/form.tsx:65:84)
    at Controller (webpack-internal:///(ssr)/./node_modules/react-hook-form/dist/index.esm.mjs:511:39)
    at FormField (webpack-internal:///(ssr)/./components/ui/form.tsx:28:25)
    at div
    at div
    at eval (webpack-internal:///(ssr)/./components/ui/card.tsx:58:84)
    at div
    at eval (webpack-internal:///(ssr)/./components/ui/card.tsx:18:77)
    at div
    ...

I fixed it for now by changing the key to key={option.label + option.value}, although I don't like that method.

[omeralpi]

@NebraskaCoder

And then as the solution; key={option.value || "ZZ"}.
"ZZ" means "International" (see).

Thank you for the review. 😊

[damianricobelli]

@omeralpi thanks for this component!

I wonder if the best idea is to use the react-phone-number-input library which uses under the hood the libphonenumber-js library or a better way would be to use directly the latter with direct shadcn/ui components.

[damianricobelli]

@omeralpi I will be building this same component with the libphonenumber-js core without react-phone-input-number to simplify it

[omeralpi]

@omeralpi I will be building this same component with the libphonenumber-js core without react-phone-input-number to simplify it

Thanks for the review!

I can say that it's not as simple as that. Because; We'll need to import packages like InputFormat, etc.

Additionally, both libphonenumber-js and react-phone-input-number packages are created by the same person.
libphonenumber-js and react-phone-number-input

[damianricobelli]

@omeralpi I will be building this same component with the libphonenumber-js core without react-phone-input-number to simplify it

Thanks for the review!

I can say that it's not as simple as that. Because; We'll need to import packages like InputFormat, etc.

Additionally, both libphonenumber-js and react-phone-input-number packages are created by the same person. libphonenumber-js and react-phone-number-input

@omeralpi Last night I uploaded this app with the repo

https://shadcn-phone-input-five.vercel.app/

[juanpmarin]

Hello guys, is the development of this component still active?