CODEWITHSUNDEEP
reactjs
juztcode
juztcode

Reputation: 1345

react-phone-number-input without the country selector

I'm trying to use the popular react-phone-number-input package, but, I get various errors with typescript, When using the option with country everything is find, what I did so far:

npm install --save react-phone-number-input
npm install --save @types/react-phone-number-input


import PhoneInput from 'react-phone-number-input'

<PhoneInput/>

But,for without country we gotta do something like this as pointed out in their site:

import PhoneInput from 'react-phone-number-input/input'

function Example() {
  // `value` will be the parsed phone number in E.164 format.
  // Example: "+12133734253".
  const [value, setValue] = useState()
  // If `country` property is not passed
  // then "International" format is used.
  // Otherwise, "National" format is used.
  return (
    <PhoneInput
      country="US"
      value={value}
      onChange={setValue} />
  )
}

but, the problem is typescript complains, and it seems they forgot to mention @types thing for `react-phone-number-input/input.

This is the specific error I get:

    TS7016: Could not find a declaration file for module 'react-phone-number-input/input'. 
'/home/liz/prj/node_modules/react-phone-number-input/input/index.commonjs.js' implicitly has an 'any' type.   
Try `npm install @types/react-phone-number-input-input-min` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-phone-number-input/input';

How do I solve this problem? Any workarounds or installations that are mentioned in the docs?

Upvotes: 4

Views: 6195

Answers (2)

Glider
Glider

Reputation: 56

I believe it's an error in their instructions. Judging by their demo, it should be

import Input from 'react-phone-number-input/input'

<Input
  placeholder="Enter phone number"
  value={value}
  onChange={setValue} />

Note that it's Input, not PhoneInput.

Upvotes: 2

juztcode
juztcode

Reputation: 1345

Create custom type declaration.Steps:

  1. Create folder called 'react-phone-number-input'
  2. Create subfolder input
  3. Create index.d.ts inside of it
  4. Copy and paste the following code

Here I present only a minimal bit of type which were as per my requirements sufficient, but it'd be sufficient to build upon:

/// <reference types="react">

declare module 'react-phone-number-input/input' {
  interface CustomPhoneInputProps {
    onChange: (value: string) => void;
    value: string;
    placeholder: string;
    className: string;
  }

  export default class PhoneInput extends React.Component<CustomPhoneInputProps, object> {}
}

Upvotes: 2

Related Questions