<!DOCTYPE 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://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
<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">'use strict';
var React = require('react');
var IntlTelInput = require('react-intl-tel-input');
require('file?name=libphonenumber.js!./node_modules/react-intl-tel-input/dist/libphonenumber.js');
require('./node_modules/react-intl-tel-input/dist/styles/intlTelInput.scss');
React.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">'use strict';
var React = require('react');
var IntlTelInput = require('react-intl-tel-input');
require('file?name=libphonenumber.js!./node_modules/react-intl-tel-input/dist/libphonenumber.js');
require('./node_modules/react-intl-tel-input/dist/styles/intlTelInput.scss');
var loadJSONP = function (url, callback) {
var ref = window.document.getElementsByTagName( 'script' )[ 0 ];
var script = window.document.createElement( 'script' );
script.src = url + (url.indexOf( '?' ) + 1 ? '&' : '?') + 'callback=' + callback;
ref.parentNode.insertBefore( script, ref );
script.onload = function () {
this.remove();
};
};
var lookup = function (callback) {
loadJSONP('http://ipinfo.io', 'sendBack');
window.sendBack = function (resp) {
var countryCode = (resp && resp.country) ? resp.country : "";
callback(countryCode);
}
};
React.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">'use strict';
var React = require('react');
var IntlTelInput = require('react-intl-tel-input');
require('file?name=libphonenumber.js!./node_modules/react-intl-tel-input/dist/libphonenumber.js');
require('./node_modules/react-intl-tel-input/dist/styles/intlTelInput.scss');
var changeHandler = function (status, value, countryData, number) {
console.log(status, value, countryData, number);
};
React.render(<IntlTelInput onPhoneNumberChange={changeHandler}
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">defaultValue</th>
<td><code>''</code></td>
<td>Default value.</td>
</tr>
<tr>
<th scope="row">allowExtensions</th>
<td><code>false</code></td>
<td>Typing digits after a valid number will be added to the extension part of the number.</td>
</tr>
<tr>
<th scope="row">autoFormat</th>
<td><code>true</code></td>
<td>Automatically format the number according to the selected country.</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">defaultCountry</th>
<td><code>''</code></td>
<td>Default country.</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">utilsScript</th>
<td><code>''</code></td>
<td>Specify the path to the libphonenumber script to enable validation/formatting.</td>
</tr>
<tr>
<th scope="row">onPhoneNumberChange</th>
<td><code>null</code></td>
<td>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/Bluefieldscom/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="http://patw.me" target="_blank">@patw</a></li>
</ul>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react-with-addons.min.js"></script>
<script>
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__
</script>
<script type="text/javascript" src="assets/example.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>