Cannot install type

[AnneMedvedeva]

npm install @types/react-phone-input-2 is causing this:

npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2freact-phone-input-2 - Not found
npm ERR! 404
npm ERR! 404  '@types/react-phone-input-2@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

[Polombo98]

Well, there is no support for TypeScript for this package

[Polombo98]

If you need some help with that - our team created some really basic typescript definitions file.

[bl00mber]

@Polombo98 you can publish that file using github gists or here, so I will be able to use it

[Stephen2]

TypeScript types would be sweet

[gwuah]

@Polombo98 Can you please post the type definitions your team developed?

[abe-hashan]

If you need some help with that - our team created some really basic typescript definitions file.

Please post the types here

[Polombo98]

Unfortunately, not working with the team anymore, but you can poke @eduardomcv

[n8sabes]

@gwuah tried the typedef above w/o success.

@bl00mber It would be hugely valuable to support TypeScript out of the box due to the momentum Typescript has. I completely appreciate your project is generously shared with the community and takes time to maintain. Thanks for sharing your code base -- much appreciated!

[bl00mber]

@n8sabes this is incorrect types

[n8sabes]

@bl00mber Indeed! Clearly the .d.ts above doesn't track with the codebase nor docs. Duh!! 🙈

[lucksp]

@abe-hashan , save as index.d.ts in the file that contains the component.

// See: // https://github.com/catamphetamine/react-phone-number-input/issues/195

This is for a different library

[ml-devninja]

I've made a simple starter for those types so basically at your repo create a file react-phone-input-2.d.ts

and paste it there

declare module "react-phone-input-2" {
  import React from "react";

  interface ICountryData {
    name: string;
    dialCode: string;
    countryCode: string;
    format: string;
  }

  interface IStyle {
    containerClass?: string;
    inputClass?: string;
    buttonClass?: string;
    dropdownClass?: string;
    searchClass?: string;

    containerStyle?: React.CSSProperties;
    inputStyle?: React.CSSProperties;
    buttonStyle?: React.CSSProperties;
    dropdownStyle?: React.CSSProperties;
    searchStyle?: React.CSSProperties;
  }

  interface IPhoneInputEventsProps {
    onChange?(value: string, data: ICountryData | {}): void;
    onFocus?(
      event: React.FocusEvent<HTMLInputElement>,
      data: ICountryData | {}
    ): void;
    onBlur?(
      event: React.FocusEvent<HTMLInputElement>,
      data: ICountryData | {}
    ): void;
    onClick?(
      event: React.MouseEvent<HTMLInputElement>,
      data: ICountryData | {}
    ): void;
    onKeyDown?(event: React.KeyboardEvent<HTMLInputElement>): void;
  }

  export interface IPhoneInputProps extends IPhoneInputEventsProps, IStyle {
    country?: string;
    value?: string;
    onlyCountries?: string[];
    preferredCountries?: string[];
    excludeCountries?: string[];
    placeholder?: string;
    searchPlaceholder?: string;
    inputProps?: object;

    autoFormat?: boolean;
    disabled?: boolean;
    disableDropdown?: boolean;
    disableCountryCode?: boolean;
    enableAreaCodes?: boolean;
    enableTerritories?: boolean;
    enableLongNumbers?: boolean;
    countryCodeEditable?: boolean;
    enableSearch?: boolean;
    disableSearchIcon?: boolean;
  }
  const PhoneInput: React.FC<IPhoneInputProps>;
  export default PhoneInput;
}

Please remind that it was done for my needs so not all props are included

So the simple usage will looks like: import PhoneInput, { IPhoneInputProps } from 'react-phone-input-2'

If anyone is interested in please you can build on top of that and add to DefinitelyTyped or maybe @bl00mber you want to build on top of that ;)

[mrfambo]

@ml-devninja Thanks a TON man, thanks a lootttttt <3 Worked like a charm !!!

[bl00mber]

@ml-devninja will it work if placed in node_modules/react-phone-input-2 folder? Want to send a PR?

[mrfambo]

@bl00mber Can i send a PR?? :P Please. It will be my open source contribution !!!

[ml-devninja]

@bl00mber It's so nice that you've managed those types ;) Glad to see them merged :D

[bl00mber]

@mrfambo I've added types but I do not know if they work or not. You can check if they work, report here and send a PR with the missing props because there is a lot of missing props and methods.

[ml-devninja]

@bl00mber it will work as it's .d.ts global file and as you have mentioned - there's still a lot of props and methods missing - but it's one step closer anyway ;)

[nmenal]

@bl00mber defaultCountry is missing in props is there a way to add it please ?