Package Exports

react-phone-number-input

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-phone-number-input) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-phone-number-input

[![NPM Version][npm-badge]][npm] [![Build Status][travis-badge]][travis]

International phone number <input/> (and output) (in React) (iPhone style)

See Demo

![Screenshot #1](https://raw.githubusercontent.com/halt-hammerzeit/react-phone-number-input/master/docs/images/Screen Shot 2016-12-24 at 12.37.51.png)

![Screenshot #2](https://raw.githubusercontent.com/halt-hammerzeit/react-phone-number-input/master/docs/images/Screen Shot 2016-12-24 at 12.35.26.png)

Installation

npm install react-phone-number-input --save

Usage

import Phone from 'react-phone-number-input'

return (
    <Phone
        placeholder="Enter phone number"
        value={ this.state.phone }
        onChange={ phone => this.setState({ phone }) } />
)

The international phone number input utilizes libphonenumber-js international phone number parsing and formatting library (used in Google Android phones). The size of the library is about 70 KiloBytes, so it's suitable for public internet usage (for example, the size of react package is about 50 KiloBytes).

The countries dropdown with autocomplete is taken from react-responsive-ui library.

The most convenient way of showing the list of countries would be to show national flags for all of them. This feature is implemented, but the overall size of the complete national flags bundle in SVG format is about 3 MegaBytes which is too much for a public internet website. Therefore the default behaviour is a compromise: instead of showing flags for all countries in the list only the flag for the currently selected country is shown. This way the user only downloads a single SVG image, and is not forced to download the whole international flag bundle.

CSS

This component is styled using CSS. Copy styles/style.css to your project folder and include it on a page:

<head>
  <link rel="stylesheet" href="/css/react-phone-number-input.css"/>
</head>

This CSS file is meant as a base one and a developer should override the CSS rules defined in it (this can be done in a separate file) to better suit the project's needs.

An alternative way of including the base CSS file when using Webpack would be:

require('react-phone-number-input/styles/style.css')

API

React component

The available props are

value — the phone number holding variable, will contain the phone number in international plaintext format (e.g. +12223333333 for USA)
onChange — the function writing the phone number to the value variable
country — (optional) the default country (a two-letter country code)
flagsPath — (optional) A base URL path for national flag SVG icons. By default it loads flag icons from flag-icon-css github repo. You might want to download those SVG flag icons and host them yourself.
flags — (optional) Custom national flag icon React elements
saveOnIcons — if set to false then country flag icons will be shown in the options list

For the full list of all possible props see the source code.

isValidPhoneNumber

libphonenumber.isValidNumber

(is exported just for convenience, if anyone needs that for whatever purpose)

formatPhoneNumber

libphonenumber.format

(is exported just for convenience, if anyone needs that for whatever purpose)

parsePhoneNumber

libphonenumber.parse

(is exported just for convenience, if anyone needs that for whatever purpose)

Webpack

If you're using Webpack 1 (which you most likely are) then make sure that

You have json-loader set up for *.json files in Webpack configuration
json-loader doesn't exclude /node_modules/
If you override resolve.extensions in Webpack configuration then make sure .json extension is present in the list

Webpack 2 sets up json-loader by default so there's no need for any special configuration.

Contributing

After cloning this repo, ensure dependencies are installed by running:

npm install

This module is written in ES6 and uses Babel for ES5 transpilation. Widely consumable JavaScript can be produced by running:

npm run build

Once npm run build has run, you may import or require() directly from node.

After developing, the full test suite can be evaluated by running:

npm test

When you're ready to test your new functionality on a real project, you can run

npm pack

It will build, test and then create a .tgz archive which you can then install in your project folder

npm install [module name with version].tar.gz

License

MIT [npm]: https://www.npmjs.org/package/react-phone-number-input [npm-badge]: https://img.shields.io/npm/v/react-phone-number-input.svg?style=flat-square [travis]: https://travis-ci.org/halt-hammerzeit/react-phone-number-input [travis-badge]: https://img.shields.io/travis/halt-hammerzeit/react-phone-number-input/master.svg?style=flat-square [coveralls]: https://coveralls.io/r/halt-hammerzeit/react-phone-number-input?branch=master [coveralls-badge]: https://img.shields.io/coveralls/halt-hammerzeit/react-phone-number-input/master.svg?style=flat-square