# @andrewsantarin/react-intl-tel-input

> Telephone input component. Rewrite intl-tel-input in React.js.

Latest version **0.0.0** (published 2020-06-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @andrewsantarin/react-intl-tel-input
pnpm add @andrewsantarin/react-intl-tel-input
yarn add @andrewsantarin/react-intl-tel-input
bun add @andrewsantarin/react-intl-tel-input
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.0.0 |
| Published | 2020-06-18 |
| First published | 2020-06-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=6.2.2 |
| Dependencies | 5 |
| Unpacked size | 247.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 287 |
| Author | patw |
| Maintainers | andrewsantarin |
| Keywords | react, react-component, tel, telephone, intl-tel-input, international-telephone-input, phonenumber |

## Links

- npm: https://www.npmjs.com/package/@andrewsantarin/react-intl-tel-input
- Repository: https://github.com/patw0929/react-intl-tel-input
- Issues: https://github.com/patw0929/react-intl-tel-input/issues
- npm.io page: https://npm.io/package/@andrewsantarin/react-intl-tel-input

## Dependencies (5)

- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.1
- [underscore.deferred](https://npm.io/package/underscore.deferred.md) ^0.4.0
- [react-style-proptype](https://npm.io/package/react-style-proptype.md) ^3.0.0
- [libphonenumber-js-utils](https://npm.io/package/libphonenumber-js-utils.md) ^8.10.5

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.0 (latest) — 2020-06-18

## README

# React-Intl-Tel-Input

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![Build Status](https://travis-ci.org/patw0929/react-intl-tel-input.svg)](https://travis-ci.org/patw0929/react-intl-tel-input)
[![npm version](https://badge.fury.io/js/react-intl-tel-input.svg)](http://badge.fury.io/js/react-intl-tel-input)
[![Coverage Status](https://coveralls.io/repos/github/patw0929/react-intl-tel-input/badge.svg?branch=master)](https://coveralls.io/github/patw0929/react-intl-tel-input?branch=master)
[![npm](https://img.shields.io/npm/l/express.svg?maxAge=2592000)]()

[![NPM](https://nodei.co/npm/react-intl-tel-input.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/react-intl-tel-input/)

Rewrite [International Telephone Input](https://github.com/jackocnr/intl-tel-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](https://patw0929.github.io/react-intl-tel-input/)

To build the examples locally, run:

```bash
yarn
yarn start
```

Then open [`localhost:3000`](http://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](http://webpack.github.io/), etc).

```bash
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
```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
```tsx
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**
```json
{
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
  }
}
```

... use the default import workflow instead:
```tsx
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](https://patw0929.github.io/react-intl-tel-input/)


## 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:

```sh
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](https://github.com/jackocnr/intl-tel-input) - [@jackocnr](https://github.com/jackocnr)


## License

MIT

Copyright (c) 2015-2019 patw.

---
_Source: https://npm.io/package/@andrewsantarin/react-intl-tel-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._