search

patw0929 / react-intl-tel-input

Rewrite International Telephone Input in React.js. (Looking for maintainers, and PRs & contributors are also welcomed!)
https://patw0929.github.io/react-intl-tel-input/
MIT License
284 stars 220 forks source link

Add TypeScript support #346

Closed andrewsantarin closed 3 years ago

andrewsantarin commented 4 years ago

I use react-intl-tel-input for a variety of projects over the past 3 years but recently, I've included typescript because the latest project I'm working on is quite big. I want to have a reasonable amount of strictly-typed control over my components which this library doesn't have at the time of writing.

Expected Behavior

This library should already have type definitions out of the box.

Current Behavior

Without any type definitions, the TypeScript compiler will complain. You need to get definitions from DefinitelyTyped (which doesn't exist yet) or declare the types yourself in every new project you write (inconvenient, of course).

image

Possible Solution

I've written drop-in support that you can check out in this gist. It was built to match the prop types of 7.x, but I imagine that 8.x hasn't changed anything, so those type definitions wouldn't be far off from the real thing:

https://github.com/patw0929/react-intl-tel-input/blob/d769a1e9a8b5b921b1f9bef74e8b6e75ceea7d73/src/components/IntlTelInput.js#L1324-L1401

If there are more modules exported by this library, then we should write type definitions for them, too, for full support.

Steps to Reproduce

  1. Create a React TypeScript sandbox: https://codesandbox.io/s/create-react-app-typescript-enhvd (my template)
  2. Insert the Code below to the top of App.tsx.
  3. Expect the results shown in the Current Behavior.

Code:

import IntlTelInput from 'react-intl-tel-input';

Live Example: https://codesandbox.io/s/serene-leakey-b8uph

This is with the type definitions applied. To simulate what it looks like without type definitions, simply remove index.d.ts in the example.

Environment

Detailed Description

mcataford commented 4 years ago

Hi @andrewsantarin! Thanks for opening an issue! Adding type definitions to make TS usage easier definitely makes sense! It looks like you have the definitions all set up already, would you like to open up a PR for it? I think the suggestion you outlined makes a ton of sense.

andrewsantarin commented 4 years ago

@mcataford Cool! Allow me to whip one up. You'll be seeing that PR within a day or two.

mcataford commented 4 years ago

Awesome! Looking forward to it!

github-actions[bot] commented 3 years ago

:tada: This issue has been resolved in version 8.1.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket: