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
src
and the build process)
Development (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.