react-intl-tel-input
Version:
Telephone input component. Rewrite intl-tel-input in React.js.
297 lines (266 loc) • 12.2 kB
HTML
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8">
<title>React-Intl-Tel-Input</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
<meta name="author" content="patw" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/tomorrow-night-eighties.min.css">
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>
<script src="https://rawgit.com/paulmillr/console-polyfill/master/index.js"></script>
<!--[if gte IE 9]><!-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
<!--<![endif]-->
<style>
.footer {
text-align: center;
margin: 20px auto;
}
</style>
</head>
<body>
<a href="https://github.com/patw0929/react-intl-tel-input"><img style="position: absolute; top: 0; right: 0; border: 0; z-index: 1;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
<div class="container-fluid">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="page-header">
<h1>React-Intl-Tel-Input</h1>
</div>
<h2>Demo</h2>
<div class="panel panel-default">
<div class="panel-body">
<form class="form-inline">
<div id="content">
<h1>If you can see this, something is broken (or JS is not enabled)!!.</h1>
</div>
</form>
</div>
</div>
<hr>
<h2>Installation</h2>
<pre><code>npm install --save react-intl-tel-input</code></pre>
<hr>
<h2>Syntax</h2>
<h3>General</h3>
<pre><code class="javascript">import React from 'react';
import ReactDOM from 'react-dom';
import IntlTelInput from 'react-intl-tel-input';
import 'file?name=libphonenumber.js!./node_modules/react-intl-tel-input/dist/libphonenumber.js';
import './node_modules/react-intl-tel-input/dist/main.css';
ReactDOM.render(<IntlTelInput preferredCountries={['tw']}
css={['intl-tel-input', 'form-control']}
utilsScript={'libphonenumber.js'} />,
document.getElementById('content'));
</code></pre>
<h3>Demo: Lookup user's country</h3>
<pre><code class="javascript">import React from 'react';
import ReactDOM from 'react-dom';
import IntlTelInput from 'react-intl-tel-input';
import 'file?name=libphonenumber.js!./node_modules/react-intl-tel-input/dist/libphonenumber.js';
import './node_modules/react-intl-tel-input/dist/main.css';
const loadJSONP = (url, callback) => {
const ref = window.document.getElementsByTagName('script')[0];
const script = window.document.createElement('script');
script.src = `${url + (url.indexOf('?') + 1 ? '&' : '?')}callback=${callback}`;
ref.parentNode.insertBefore(script, ref);
script.onload = () => {
script.remove();
};
};
const lookup = (callback) => {
loadJSONP('http://ipinfo.io', 'sendBack');
window.sendBack = (resp) => {
const countryCode = (resp && resp.country) ? resp.country : '';
callback(countryCode);
}
};
ReactDOM.render(<IntlTelInput defaultCountry={'auto'}
geoIpLookup={lookup}
css={['intl-tel-input', 'form-control']}
utilsScript={'libphonenumber.js'} />, document.getElementById('content'));
</code></pre>
<h3>Validation callback</h3>
<pre><code class="javascript">import React from 'react';
import ReactDOM from 'react-dom';
import IntlTelInput from 'react-intl-tel-input';
import 'file?name=libphonenumber.js!./node_modules/react-intl-tel-input/dist/libphonenumber.js';
import './node_modules/react-intl-tel-input/dist/main.css';
const handler = (status, value, countryData, number, id) => {
console.log(status, value, countryData, number, id);
};
ReactDOM.render(<IntlTelInput onPhoneNumberChange={handler}
onPhoneNumberBlur={handler}
css={['intl-tel-input', 'form-control']}
utilsScript={'libphonenumber.js'} />, document.getElementById('content'));
</code></pre>
<hr>
<h2>Props</h2>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">key</th>
<th scope="col">default</th>
<th scope="col">description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">css</th>
<td><code>['intl-tel-input', '']</code></td>
<td>CSS classnames. First one is for the component wrapper, and second one is for text input.</td>
</tr>
<tr>
<th scope="row">value</th>
<td><code>''</code></td>
<td>Value.</td>
</tr>
<tr>
<th scope="row">fieldName</th>
<td><code>''</code></td>
<td>It's used as `input` field `name` attribute.</td>
</tr>
<tr>
<th scope="row">fieldId</th>
<td><code>''</code></td>
<td>It's used as `input` field `id` attribute.</td>
</tr>
<tr>
<th scope="row">countriesData</th>
<td><code>array</code></td>
<td>Countries data can be configured, it defaults to data defined in `AllCountries`.</td>
</tr>
<tr>
<th scope="row">disabled</th>
<td><code>null</code></td>
<td>Disable this component.</td>
</tr>
<tr>
<th scope="row">allowDropdown</th>
<td><code>true</code></td>
<td>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.</td>
</tr>
<tr>
<th scope="row">autoPlaceholder</th>
<td><code>true</code></td>
<td>Add or remove input placeholder with an example number for the selected country.</td>
</tr>
<tr>
<th scope="row">autoHideDialCode</th>
<td><code>true</code></td>
<td>If there is just a dial code in the input: remove it on blur, and re-add it on focus.</td>
</tr>
<tr>
<th scope="row">placeholder</th>
<td><code>null</code></td>
<td>Static placeholder for input controller. When defined it takes priority over autoPlaceholder.</td>
</tr>
<tr>
<th scope="row">customPlaceholder</th>
<td><code>null</code></td>
<td>Change the placeholder generated by autoPlaceholder. Must return a string.</td>
</tr>
<tr>
<th scope="row">defaultCountry</th>
<td><code>''</code></td>
<td>Default country.</td>
</tr>
<tr>
<th scope="row">excludeCountries</th>
<td><code>undefined</code></td>
<td>Don't display the countries you specify. (<code>Array</code>)</td>
</tr>
<tr>
<th scope="row">formatOnInit</th>
<td><code>true</code></td>
<td>Format the input value during initialisation.</td>
</tr>
<tr>
<th scope="row">noCountryDataHandler</th>
<td><code>null</code></td>
<td>The function which can catch the "no this default country" exception.</td>
</tr>
<tr>
<th scope="row">geoIpLookup</th>
<td><code>null</code></td>
<td>GeoIp lookup function.</td>
</tr>
<tr>
<th scope="row">nationalMode</th>
<td><code>true</code></td>
<td>Don't insert international dial codes.</td>
</tr>
<tr>
<th scope="row">numberType</th>
<td><code>'MOBILE'</code></td>
<td>Number type to use for placeholders.</td>
</tr>
<tr>
<th scope="row">onlyCountries</th>
<td><code>[]</code></td>
<td>Display only these countries.</td>
</tr>
<tr>
<th scope="row">preferredCountries</th>
<td><code>['us', 'gb']</code></td>
<td>The countries at the top of the list. defaults to United States and United Kingdom.</td>
</tr>
<tr>
<th scope="row">separateDialCode</th>
<td><code>false</code></td>
<td>Display the country dial code next to the selected flag so it's not part of the typed number. Note that this will disable <code>nationalMode</code> because technically we are dealing with international numbers, but with the dial code separated.</td>
</tr>
<tr>
<th scope="row">utilsScript</th>
<td><code>''</code></td>
<td>Specify the path to the libphonenumber script to enable validation/formatting.</td>
</tr>
<tr>
<th scope="row">onSelectFlag</th>
<td><code>null</code></td>
<td>Allow main app to do things when a country is selected.</td>
</tr>
<tr>
<th scope="row">onPhoneNumberChange</th>
<td><code>null</code></td>
<td>Optional validation callback function. It returns validation status, input box value and selected country data.</td>
</tr>
<tr>
<th scope="row">onPhoneNumberBlur</th>
<td><code>null</code></td>
<td>Optional validation callback function. It returns validation status, input box value and selected country data.</td>
</tr>
</tbody>
</table>
</div>
<hr>
<h2>Inspired by</h2>
<p><a href="https://github.com/jackocnr" target="_blank">@jackocnr</a> and his awesome project <a href="https://github.com/jackocnr/intl-tel-input" target="_blank">International Telephone Input</a>.</p>
<hr>
<h2>Lincense</h2>
<p>MIT License</p>
</div>
</div>
<div class="row footer">
<div class="col-md-12">
<ul class="list-inline">
<li><a href="https://github.com/patw0929/react-intl-tel-input" target="_blank">GitHub</a></li>
<li><a href="https://patw.me" target="_blank">@patw</a></li>
</ul>
</div>
</div>
</div>
<script src="https://fb.me/react-15.1.0.min.js"></script>
<script src="https://fb.me/react-dom-15.1.0.min.js"></script>
<script>
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__
</script>
<script type="text/javascript" src="assets/example.js"></script>
<!--[if gte IE 9]><!-->
<script>hljs.initHighlightingOnLoad();</script>
<!--<![endif]-->
</body>
</html>