Typescript support

[krisko4]

Hello, can you provide some details on how to use the library with TypeScript? So far I have noticed, that there is no TypeScript module in this library other than the default one provided by react-phone-input, so I created a new .d.ts file with the following snippet:

 declare module 'react-phone-input-material-ui'{
  const ReactPhoneInput: React.FC<any>;
  export default ReactPhoneInput;
 }

Then I managed to display the default TextField:

     <ReactPhoneInput
           component={TextField}
           value={value}
           onChange={(phone: any) => setValue(phone)}
       />

Unfortunately, no countries are displayed in the start adornment:

I am using MaterialUI v5. Thanks in advance.

[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.

[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]

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.