Fork me on GitHub

React-Intl-Tel-Input

Demo

If you can see this, something is broken (or JS is not enabled)!!.

Installation

npm install --save react-intl-tel-input

Syntax

General

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'));

Demo: Lookup user's country

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'));

Validation callback

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'));

Props

key default description
css ['intl-tel-input', ''] CSS classnames. First one is for the component wrapper, and second one is for text input.
value '' Value.
fieldName '' It's used as `input` field `name` attribute.
fieldId '' It's used as `input` field `id` attribute.
countriesData array Countries data can be configured, it defaults to data defined in `AllCountries`.
disabled null Disable this component.
allowDropdown true 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.
autoPlaceholder true Add or remove input placeholder with an example number for the selected country.
autoHideDialCode true If there is just a dial code in the input: remove it on blur, and re-add it on focus.
customPlaceholder null Change the placeholder generated by autoPlaceholder. Must return a string.
defaultCountry '' Default country.
excludeCountries undefined Don't display the countries you specify. (Array)
formatOnInit true Format the input value during initialisation.
noCountryDataHandler null The function which can catch the "no this default country" exception.
geoIpLookup null GeoIp lookup function.
nationalMode true Don't insert international dial codes.
numberType 'MOBILE' Number type to use for placeholders.
onlyCountries [] Display only these countries.
preferredCountries ['us', 'gb'] The countries at the top of the list. defaults to United States and United Kingdom.
separateDialCode false Display the country dial code next to the selected flag so it's not part of the typed number. Note that this will disable nationalMode because technically we are dealing with international numbers, but with the dial code separated.
utilsScript '' Specify the path to the libphonenumber script to enable validation/formatting.
onSelectFlag null Allow main app to do things when a country is selected.
onPhoneNumberChange null Optional validation callback function. It returns validation status, input box value and selected country data.
onPhoneNumberBlur null Optional validation callback function. It returns validation status, input box value and selected country data.

Inspired by

@jackocnr and his awesome project International Telephone Input.

Lincense

MIT License