@andrewsantarin/react-intl-tel-input NPM

React-Intl-Tel-Input

Rewrite International Telephone Input in React.js.

Collaborators Wanted!

Due to the long commuting time, I do not have much time to maintain this project often. 😣

So if anybody else is willing to take on the work of bug fixes, integrating pull requests, etc, please let me know. 🙌

I hope we can maintain the project together, and make this project better! 💪

Demo & Examples

Live demo: patw0929.github.io/react-intl-tel-input

To build the examples locally, run:

yarn
yarn start

Then open localhost:3000 in a browser.

Installation

The easiest way to use react-intl-tel-input is to install it from NPM and include it in your own React build process (using Webpack, etc).

yarn add react-intl-tel-input

TypeScript

react-intl-tel-input ships with official type declarations for TypeScript in NPM package out of the box.

Usage

JavaScript

import IntlTelInput from 'react-intl-tel-input';
import 'react-intl-tel-input/dist/main.css';

<IntlTelInput
  containerClassName="intl-tel-input"
  inputClassName="form-control"
/>

TypeScript

import * as IntlTelInput from 'react-intl-tel-input';
import 'react-intl-tel-input/dist/main.css';

<IntlTelInput
  containerClassName="intl-tel-input"
  inputClassName="form-control"
/>

If your tsconfig.json contains the following config:

tsconfig.json

{
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
  }
}

... use the default import workflow instead:

import IntlTelInput from 'react-intl-tel-input';
import 'react-intl-tel-input/dist/main.css';

<IntlTelInput
  containerClassName="intl-tel-input"
  inputClassName="form-control"
/>

Properties

Please see the Demo Page

Development (`src` and the build process)

To build, watch and serve the examples (which will also watch the component source), run yarn start.

You can prepare a distribution build using yarn build.

Contributing

To contribute to react-intl-tel-input, clone this repo locally and commit your code on a separate branch. Please write tests for your code, and run the linter before opening a pull-request:

yarn test    # if you are enhancing the JavaScript modules
yarn test:ts # if you are enhancing the TypeScript type declarations
yarn tsd     # in addition to test:ts, also check that the type declarations work as intended
yarn lint