Add TypeScript support

[andrewsantarin]

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

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:

react-intl-tel-input/src/components/IntlTelInput.js

Lines 1324 to 1401 in d769a1e

	IntlTelInput.propTypes = {
	/** Container CSS class name. */
	containerClassName: PropTypes.string,
	/** Text input CSS class name. */
	inputClassName: PropTypes.string,
	/** It's used as `input` field `name` attribute. */
	fieldName: PropTypes.string,
	/** It's used as `input` field `id` attribute. */
	fieldId: PropTypes.string,
	/** The value of the input field. Useful for making input value controlled from outside the component. */
	value: PropTypes.string,
	/** The value used to initialize input. This will only work on uncontrolled component. */
	defaultValue: PropTypes.string,
	/** Countries data can be configured, it defaults to data defined in `AllCountries`. */
	countriesData: PropTypes.arrayOf(PropTypes.array),
	/**
	* Whether or not to allow the dropdown. If disabled, there is no dropdown arrow, and the selected flag is not clickable.
	* Also we display the selected flag on the right instead because it is just a marker of state.
	*/
	allowDropdown: PropTypes.bool,
	/** If there is just a dial code in the input: remove it on blur, and re-add it on focus. */
	autoHideDialCode: PropTypes.bool,
	/** Add or remove input placeholder with an example number for the selected country. */
	autoPlaceholder: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types
	/** Change the placeholder generated by autoPlaceholder. Must return a string. */
	customPlaceholder: PropTypes.func,
	/** Don't display the countries you specify. (Array) */
	excludeCountries: PropTypes.arrayOf(PropTypes.string),
	/** Format the input value during initialisation. */
	formatOnInit: PropTypes.bool,
	/** Display the country dial code next to the selected flag so it's not part of the typed number.
	* Note that this will disable nationalMode because technically we are dealing with international numbers,
	* but with the dial code separated.
	* */
	separateDialCode: PropTypes.bool,
	/** Default country. */
	defaultCountry: PropTypes.string,
	/** GeoIp lookup function. */
	geoIpLookup: PropTypes.func,
	/** Don't insert international dial codes. */
	nationalMode: PropTypes.bool,
	/** Number type to use for placeholders. */
	numberType: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
	/** The function which can catch the "no this default country" exception. */
	noCountryDataHandler: PropTypes.func,
	/** Display only these countries. */
	onlyCountries: PropTypes.arrayOf(PropTypes.string),
	/** The countries at the top of the list. defaults to United States and United Kingdom. */
	preferredCountries: PropTypes.arrayOf(PropTypes.string),
	/** Optional validation callback function. It returns validation status, input box value and selected country data. */
	onPhoneNumberChange: PropTypes.func,
	/** Optional validation callback function. It returns validation status, input box value and selected country data. */
	onPhoneNumberBlur: PropTypes.func,
	/** Optional validation callback function. It returns validation status, input box value and selected country data. */
	onPhoneNumberFocus: PropTypes.func,
	/** Allow main app to do things when a country is selected. */
	onSelectFlag: PropTypes.func,
	/** Disable this component. */
	disabled: PropTypes.bool,
	/** Static placeholder for input controller. When defined it takes priority over autoPlaceholder. */
	placeholder: PropTypes.string,
	/** Enable auto focus */
	autoFocus: PropTypes.bool,
	/**
	* Set the value of the autoComplete attribute on the input. For example, set it to phone to tell the browser where to auto complete phone numbers.
	*/
	autoComplete: PropTypes.string,
	/** Style object for the wrapper div. Useful for setting 100% width on the wrapper, etc. */
	style: StylePropTypes,
	/** Render fullscreen flag dropdown when mobile useragent is detected. The dropdown element is rendered as a direct child of document.body */
	useMobileFullscreenDropdown: PropTypes.bool,
	/** Pass through arbitrary props to the tel input element. */
	telInputProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
	/** Format the number. */
	format: PropTypes.bool,
	/** Allow main app to do things when flag icon is clicked. */
	onFlagClick: PropTypes.func,
	}

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

• Version:
• Browser:

Detailed Description

[mcataford]

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]

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

[mcataford]

Awesome! Looking forward to it!

[github-actions]

🎉 This issue has been resolved in version 8.1.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀