react-phone-input-2: Cannot install type

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.

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 1
Comments: 19 (4 by maintainers)

Commits related to this issue

Add typescript support #112 — committed to bl00mber/react-phone-input-2 by bl00mber 4 years ago

Most upvoted comments

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 😉

ml-devninja on Apr 7, 2020