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

Inspired by

International Telephone Input - @jackocnr

License

MIT

Copyright (c) 2015-2019 patw.