Typescript support

[krisko4]

Typescript support

[krisko4]

I'm sorry but I still don't see this working. In README.md file you're using ReactPhoneInput component, in the demo you've linked - PhoneInput. When I'm trying to use any of them I get the following error:

Property 'component' does not exist on type 'IntrinsicAttributes & PhoneInputProps & { children?: ReactNode; }'.

[harish-everest]

@krisko4 I'm not using the material-ui TextField API implementation. I have made changes to react-phone-input-2 so that it allows the input component as a prop.

Regarding typescript, I will change the type definitions and release a new version. I can see the countries dropdown while using MaterialUI v5. I will try to test it in typescript and update you.

You can see in the demo I'm using MaterialUI v5 and it works well

[krisko4]

Thank you for your reply. I am looking forward to seeing a typescript update 👍🏻

[harish-everest]

Hi, @krisko4 I tried with typescript everything works fine with typescript as well. I have released a 2.17.3 version with type definitions.
Here is the example.

[harish-everest]

Property 'component' does not exist on type 'IntrinsicAttributes & PhoneInputProps & { children?: ReactNode; }'.

Yeah, this is a warning and you can ignore that type error. Some styles are misaligned too I will try to fix those. You can override those until I fix those.

Here is a full setup of the working typescript example. https://github.com/harish50/material-ui-phone-input-typescript

[harish-everest]

@krisko4 I have published the new version with the correct types. Please let me know if you still see the error.

[krisko4]

The component property error is now gone, however it seems that PhoneInput doesn't accept any props other than component now, for example style property. Moreover, importing:
import "react-phone-input-material-ui/lib/style.css";
breaks the alignments.

So far I have used your solution just to take advantage of the masked input, without importing styles. Which means I have no access to country selector.

Your update has forced me to add some additional @ts-ignore marks to field properties.

[harish-everest]

Hey, @krisko4 I was busy with some home chores and had no time to look into it. Is it possible for you to contribute to this issue as I don't know much about package types?

[imskr]

@harish-everest Can I modify country flags image according to my style?

[harish-everest]

@imskr You can clone and modify according to your style in your repo.