# react-phone-number-input [![npm version](https://img.shields.io/npm/v/react-phone-number-input.svg?style=flat-square)](https://www.npmjs.com/package/react-phone-number-input) [![npm downloads](https://img.shields.io/npm/dm/react-phone-number-input.svg?style=flat-square)](https://www.npmjs.com/package/react-phone-number-input) International phone number `` for React. [

](http://catamphetamine.gitlab.io/react-phone-number-input/) [See Demo](http://catamphetamine.gitlab.io/react-phone-number-input/) ## Install ``` npm install react-phone-number-input --save ``` If you're not using a bundler then use a [standalone version from a CDN](https://gitlab.com/catamphetamine/react-phone-number-input/#cdn). The component uses [`libphonenumber-js`](https://www.npmjs.com/package/libphonenumber-js) for phone number parsing and formatting. ## Use The component comes in two variants: "with country select" and "without country select". ## With country select "With country select" component requires two properties: `value` and `onChange(value)`. [See the list of all available `props`](http://catamphetamine.gitlab.io/react-phone-number-input/docs/index.html#phoneinputwithcountry). ```js import 'react-phone-number-input/style.css' import PhoneInput from 'react-phone-number-input' function Example() { // `value` will be the parsed phone number in E.164 format. // Example: "+12133734253". const [value, setValue] = useState() return ( ) } ``` The `value` argument of `onChange(value)` function will be the parsed phone number in [E.164](https://en.wikipedia.org/wiki/E.164) format. For example, if a user chooses "United States" and enters `(213) 373-4253` in the input field then `onChange(value)` will be called with `value` being `"+12133734253"`. Any ["falsy"](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) `value` like `undefined`, `null` or an empty string `""` is treated like "empty". In case of the `onChange()` function's `value` argument though it's always `undefined` for an "empty" `value`, i.e. when the user erases the input value, `onChange()` is called with `undefined` as an argument. Perhaps `null` would've been better, but historically it has been `undefined`. All unknown properties will be passed through to the phone number `` component. To set a default country, pass a `defaultCountry` property (must be a supported [country code](#country-code)). Example: ``. To get the currently selected country, pass an `onCountryChange(country)` property. To get the country of a complete phone number, use [`parsePhoneNumber(value)`](#parsephonenumberinput-string-phonenumber): `parsePhoneNumber(value) && parsePhoneNumber(value).country`. To format `value` back to a human-readable phone number, use [`formatPhoneNumber(value)`](#formatphonenumbervalue-string-string) or [`formatPhoneNumberIntl(value)`](#formatphonenumberintlvalue-string-string). #### CSS "With country select" component comes with a [`style.css`](https://gitlab.com/catamphetamine/react-phone-number-input/blob/master/style.css) stylesheet. All CSS class names start with `.PhoneInput`. Additional "modifier" CSS classes: `.PhoneInput--focus` for `:focus`, `.PhoneInput--disabled` for `:disabled`, `.PhoneInput--readOnly` for `[readonly]`. The stylesheet uses [native CSS variables](https://medium.freecodecamp.org/learn-css-variables-in-5-minutes-80cf63b4025d) for convenience. Native CSS variables work in all modern browsers, but older ones like Internet Explorer [wont't support them](https://caniuse.com/#search=var). For compatibility with such older browsers one can use a CSS transformer like [PostCSS](http://postcss.org/) with a "CSS custom properties" plugin like [`postcss-custom-properties`](https://github.com/postcss/postcss-custom-properties). Some of the CSS variables: * `--PhoneInputCountryFlag-height` — Flag icon height. * `--PhoneInputCountryFlag-borderColor` — Flag icon outline color. * `--PhoneInputCountrySelectArrow-color` — Country select arrow color. * `--PhoneInputCountrySelectArrow-opacity` — Country select arrow opacity (when not `:focus`ed). * `--PhoneInput-color--focus` — Flag icon `:focus` outline color, and also country select arrow `:focus` color. * … ##### When using Webpack When using Webpack, include the stylesheet on a page via `import`: ```js import 'react-phone-number-input/style.css' ``` For supporting old browsers like Internet Explorer, one could use [`postcss-loader`](https://github.com/postcss/postcss-loader) with a [CSS autoprefixer](https://github.com/postcss/autoprefixer) and [`postcss-custom-properties` transpiler](https://github.com/postcss/postcss-custom-properties). ##### When not using Webpack Get `style.css` file from this package, optionally process it with a [CSS autoprefixer](https://github.com/postcss/autoprefixer) and [`postcss-custom-properties` transpiler](https://github.com/postcss/postcss-custom-properties) for supporting old web browsers, and then include the CSS file on a page. ```html ``` Or include the `style.css` file directly from a [CDN](#cdn) if you don't have to support Internet Explorer. ## Without country select "Without country select" component is just a phone number ``. ```js import PhoneInput from 'react-phone-number-input/input' function Example() { // `value` will be the parsed phone number in E.164 format. // Example: "+12133734253". const [value, setValue] = useState() // If `country` property is not passed // then "International" format is used. // Otherwise, "National" format is used. return ( ) } ``` Doesn't require any CSS. Receives properties: * `country: string?` — If `country` is specified then the phone number can only be input in "national" (not "international") format, and will be parsed as a phone number belonging to the `country`. Must be a supported [country code](#country-code). Example: `country="US"`. * `international: boolean?` — If `country` is specified and `international` property is `true` then the phone number can only be input in "international" format for that `country`. By default, the "country calling code" part (`+1` when `country` is `US`) is not included in the input field: that could be changed by passing `withCountryCallingCode` property (see below). So, if `country` is `US` and `international` property is not passed then the phone number can only be input in the "national" format for `US` (`(213) 373-4253`). But if `country` is `"US"` and `international` property is `true` then the phone number can only be input in the "international" format for `US` (`213 373 4253`) without the "country calling code" part (`+1`). This could be used for implementing phone number input components that show "country calling code" part before the input field and then the user can fill in the rest of their phone number digits in the input field. * `withCountryCallingCode: boolean?` — If `country` is specified and `international` property is `true` then the phone number can only be input in "international" format for that `country`. By default, the "country calling code" part (example: `+1` when `country` is `US`) is not included in the input field. To change that, pass `withCountryCallingCode` property, and it will include the "country calling code" part in the input field. See the demo for an example. * `defaultCountry: string?` — If `defaultCountry` is specified then the phone number can be input both in "international" format and "national" format. A phone number that's being input in "national" format will be parsed as a phone number belonging to the `defaultCountry`. Must be a supported [country code](#country-code). Example: `defaultCountry="US"`. * If neither `country` nor `defaultCountry` are specified then the phone number can only be input in "international" format. * `value: string?` — Phone number `value`. Examples: `undefined`, `"+12133734253"`. * `onChange(value: string?)` — Updates the `value` (to `undefined` in case it's empty). * `inputComponent: component?` — A custom `` component can be passed. In that case, it must do `React.forwardRef()` to the actual `` DOM element. Receives properties: `value: string`, `onChange(event: Event)`, and all the "rest" of the properties that're not handled by this library, like `type="tel"`, `autoComplete="tel"`, etc. Is a generic DOM `` by default. * `smartCaret: boolean?` — When the user attempts to insert a digit somewhere in the middle of a phone number, the caret position is moved right before the next available digit skipping any punctuation in between. This is called "smart" caret positioning. Another case would be the phone number format changing as a result of the user inserting the digit somewhere in the middle, which would require re-positioning the caret because all digit positions have changed. This "smart" caret positioning feature can be turned off by passing `smartCaret={false}` property: use it in case of any possible issues with caret position during phone number input. * `useNationalFormatForDefaultCountryValue: boolean?` — When `defaultCountry` is defined and the initial `value` corresponds to `defaultCountry`, then the `value` will be formatted as a national phone number by default. To format the initial `value` of `defaultCountry` as an international number instead set `useNationalFormatForDefaultCountryValue` property to `false`. See the [demo](http://catamphetamine.gitlab.io/react-phone-number-input/) for the examples. For those who want to pass custom `metadata` there's `react-phone-number-input/input-core` sub-package. This library also exports `getCountries()` and `getCountryCallingCode(country)` functions that a developer could use to construct their own custom country select. Such custom country `` described above.

Creating a custom country <select/>

#### ```js import PropTypes from 'prop-types' import { getCountries, getCountryCallingCode } from 'react-phone-number-input' const CountrySelect = ({ value, onChange, labels, ...rest }) => ( ) CountrySelect.propTypes = { value: PropTypes.string, onChange: PropTypes.func.isRequired, labels: PropTypes.objectOf(PropTypes.string).isRequired } ``` Use: ```js import PhoneInput from 'react-phone-number-input/input' import en from 'react-phone-number-input/locale/en' import CountrySelect from './CountrySelect' function Example() { const [country, setCountry] = useState('US') const [value, setValue] = useState() return (

) } ```

## React Native This library also includes a React Native version of a "without country select" component. Post bug reports and suggestions in the [feedback thread](https://github.com/catamphetamine/react-phone-number-input/issues/296). ```js import React, { useState } from 'react' import PhoneInput from 'react-phone-number-input/react-native-input' function Example() { const [value, setValue] = useState() return ( ) } ``` Accepts the same properties as the web version of "without country select" component, with the following differences: * `smartCaret: boolean?` property is not accepted because "smart caret" positioning feature is not implemented in the React Native component. * `inputComponent: component?` — A custom input field component can be passed. In that case, it must do `React.forwardRef()` to the actual input field. Receives properties: `value: string`, `onChangeText(value: string)`, and all the "rest" of the properties that're not handled by this library, like `keyboardType="phone-pad"`, `autoCompleteType="tel"`, etc. Is a generic `` by default. ## Utility This package exports several utility functions. ### `formatPhoneNumber(value: string): string` Formats `value` as a "local" phone number. ```js import { formatPhoneNumber } from 'react-phone-number-input' formatPhoneNumber('+12133734253') === '(213) 373-4253' ``` ### `formatPhoneNumberIntl(value: string): string` Formats `value` as an "international" phone number. ```js import { formatPhoneNumberIntl } from 'react-phone-number-input' formatPhoneNumberIntl('+12133734253') === '+1 213 373 4253' ``` ### `isPossiblePhoneNumber(value: string): boolean` Checks if a phone number `value` is a "possible" phone number. A phone number is "possible" when it has valid length. The actual phone number digits aren't validated. ```js import { isPossiblePhoneNumber } from 'react-phone-number-input' isPossiblePhoneNumber('+12223333333') === true ``` ### `isValidPhoneNumber(value: string): boolean` Checks if a phone number `value` is a "valid" phone number. A phone number is "valid" when it has valid length, and the actual phone number digits match the regular expressions for that country. ```js import { isValidPhoneNumber } from 'react-phone-number-input' isValidPhoneNumber('+12223333333') === false isValidPhoneNumber('+12133734253') === true ``` By default the component uses [`min` "metadata"](#min-vs-max-vs-mobile) which results in less strict validation compared to [`max`](#min-vs-max-vs-mobile) or [`mobile`](#min-vs-max-vs-mobile). I personally don't use `isValidPhoneNumber()` for phone number validation in my projects. The rationale is that telephone numbering plans can and sometimes do change, meaning that `isValidPhoneNumber()`function may one day become outdated on a website that isn't actively maintained anymore. Imagine a "promo-site" or a "personal website" being deployed once and then running for years without any maintenance, where a client may be unable to submit a simple "Contact Us" form just because this newly allocated pool of mobile phone numbers wasn't present in that old version of `libphonenumber-js` bundled in it. Whenever there's a "business requirement" to validate a phone number that's being input by a user, I prefer using `isPossiblePhoneNumber()` instead of `isValidPhoneNumber()`, so that it just validates the phone number length, and doesn't validate the actual phone number digits. But it doesn't mean that you shouldn't use `isValidPhoneNumber()` — maybe in your case it would make sense. ### `parsePhoneNumber(input: string): PhoneNumber?` Parses a [`PhoneNumber`](https://gitlab.com/catamphetamine/libphonenumber-js#phonenumber) object from a `string`. This is simply an alias for [`parsePhoneNumber()`](https://gitlab.com/catamphetamine/libphonenumber-js#parsephonenumberstring-options-or-defaultcountry-phonenumber) from [`libphonenumber-js`](https://gitlab.com/catamphetamine/libphonenumber-js). Can be used to get `country` from `value`. ```js import { parsePhoneNumber } from 'react-phone-number-input' const phoneNumber = parsePhoneNumber('+12133734253') if (phoneNumber) { phoneNumber.country === 'US' } ``` ### `getCountryCallingCode(country: string): string` Returns the ["country calling code"](https://gitlab.com/catamphetamine/libphonenumber-js#country-calling-code) of a `country`. The `country` argument must be a supported [country code](#country-code). This is simply an alias for [`getCountryCallingCode()`](https://gitlab.com/catamphetamine/libphonenumber-js#getcountrycallingcodecountry) from [`libphonenumber-js`](https://gitlab.com/catamphetamine/libphonenumber-js). ```js import { getCountryCallingCode } from 'react-phone-number-input' getCountryCallingCode('US') === '1' ``` ### `isSupportedCountry(country: string): boolean` Checks if a [country](#country-code) is supported by this library. This is simply an alias for [`isSupportedCountry()`](https://gitlab.com/catamphetamine/libphonenumber-js#issupportedcountrycountry-string-boolean) from [`libphonenumber-js`](https://gitlab.com/catamphetamine/libphonenumber-js). ```js import { isSupportedCountry } from 'react-phone-number-input' isSupportedCountry('US') === true ``` ## Flags URL By default, all flags are linked from [`country-flag-icons`](https://gitlab.com/catamphetamine/country-flag-icons)'s [GitHub pages](https://purecatamphetamine.github.io/country-flag-icons/3x2) website as `

`s. Any other flag icons could be used instead by passing a custom [`flagUrl`](http://catamphetamine.gitlab.io/react-phone-number-input/docs#phoneinputwithcountry) property (which is `"https://purecatamphetamine.github.io/country-flag-icons/3x2/{XX}.svg"` by default) and specifying their aspect ratio via [`--PhoneInputCountryFlag-aspectRatio`](https://gitlab.com/catamphetamine/react-phone-number-input/blob/master/style.css) CSS variable (which is `1.5` by default, meaning "3x2" aspect ratio). For example, using [`flagpack`](https://github.com/jackiboy/flagpack) "4x3" flag icons would be as simple as: ```css :root { --PhoneInputCountryFlag-aspectRatio: 1.333; } ``` ```js ``` ## Including all flags Linking flag icons as external ``s is only done to reduce the overall bundle size, because including all country flags in the code as inline ``s would increase the bundle size by 44 kB (after gzip). If bundle size is not an issue (for example, for a standalone non-web application, or an "intranet" application), then all country flags can be included directly in the code by passing the [`flags`](http://catamphetamine.gitlab.io/react-phone-number-input/docs#phoneinputwithcountry) property: ```js import PhoneInput from 'react-phone-number-input' import flags from 'react-phone-number-input/flags' ``` ## Localization Language translations can be applied using the `labels` property. This component comes pre-packaged with several [translations](https://gitlab.com/catamphetamine/react-phone-number-input/tree/master/locale). Submit pull requests for adding new language translations.

Where to get country names for any language.

#### Country names can be copy-pasted from [`github.com/umpirsky/country-list`](https://github.com/umpirsky/country-list/blob/master/data/). ```js JSON.stringify( Object.keys(countries).sort() .reduce((all, country) => ({ ...all, [country]: countries[country] }), {}), null, '\t' ) ```` Also note that a country names list generated from `umpirsky/country-list` won't include Ascension Island (`AC`) and Tristan da Cunha (`TA`) — they will need to be added manually.

#### The `labels` format is: ```js { // Can be used as a label for country input. // Country `` component. * `metadata` — Custom `libphonenumber-js` ["metadata"](#min-vs-max-vs-mobile). * `labels` — Custom translation (including country names). * `internationalIcon` — Custom "International" icon. * `flagComponent` — Custom flag icon component. * `countrySelectComponent` — Custom country ``. ### `react-phone-number-input/core` "With country select" component imported from `react-phone-number-input/core` subpackage doesn't have default values for the following properties: * `metadata` * `labels` It could be used by developers who'd like to provide their own custom-generated metadata that supports a smaller set of countries. #### `countrySelectComponent` React component for the country select. See [CountrySelect.js](https://gitlab.com/catamphetamine/react-phone-number-input/blob/master/source/CountrySelect.js) for an example. Receives properties: * `name: string?` — HTML `name` attribute. * `value: string?` — The currently selected country code (`undefined` in case of "International"). * `onChange(value: string?)` — Updates the `value` (to `undefined` in case of "International"). * `onFocus()` — Is used to toggle the `--focus` CSS class. * `onBlur()` — Is used to toggle the `--focus` CSS class. * `options: object[]` — The list of all selectable countries (including "International") each being an object of shape `{ value: string?, label: string }`. * `iconComponent: PropTypes.elementType` — React component that renders a country icon: ``. If `country` is `undefined` then it renders an "International" icon. * `disabled: boolean?` — HTML `disabled` attribute. * `readOnly: boolean?` — HTML `readonly` attribute. * `tabIndex: (number|string)?` — HTML `tabIndex` attribute. * `className: string` — CSS class name. #### `inputComponent` React component for the phone number input field. Is `"input"` by default meaning that it renders a standard DOM ``. Receives properties: * `value: string` — The formatted `value`. * `onChange(event: Event)` — Updates the formatted `value` from `event.target.value`. * `onFocus()` — Is used to toggle the `--focus` CSS class. * `onBlur(event: Event)` — Is used to toggle the `--focus` CSS class. * Other properties like `type="tel"` or `autoComplete="tel"` that should be passed through to the DOM ``. Must also use `React.forwardRef()` to "forward" `ref` to the ``. ## CDN One can use any npm CDN service, e.g. [unpkg.com](https://unpkg.com) or [jsdelivr.net](https://jsdelivr.net) ```html ``` Without country select: ```html ``` ## Country code A "country code" is a [two-letter ISO country code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) (like `US`). This library supports all [officially assigned](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements) ISO alpha-2 country codes, plus a few extra ones like: `AC` ([Ascension Island](https://en.wikipedia.org/wiki/Ascension_Island)), `TA` ([Tristan da Cunha](https://en.wikipedia.org/wiki/Tristan_da_Cunha)), `XK` ([Kosovo](https://en.wikipedia.org/wiki/Kosovo)). To check whether a country code is supported, use [`isSupportedCountry()`](#issupportedcountrycountry-string-boolean) function. ## TypeScript This library comes with TypeScript "typings". If you happen to find any bugs in those, create an issue. ## Tests This component comes with 100% code coverage for the core `./source/helpers` directory. To run tests: ``` npm test ``` To generate a code coverage report: ``` npm run test-coverage ``` The code coverage report can be viewed by opening `./coverage/lcov-report/index.html`. If the code coverage report is "empty" then it means that a newer version of `handlebars` was accidentally installed and should be reverted to `handlebars@4.5.3`. The `handlebars@4.5.3` [work](https://github.com/handlebars-lang/handlebars.js/issues/1646#issuecomment-578306544)[around](https://github.com/facebook/jest/issues/9396#issuecomment-573328488) in `devDependencies` is for the test coverage to not produce empty reports: ``` Handlebars: Access has been denied to resolve the property "statements" because it is not an "own property" of its parent. You can add a runtime option to disable the check or this warning: See https://handlebarsjs.com/api-reference/runtime-options.html#options-to-control-prototype-access for details ``` ## GitHub On March 9th, 2020, GitHub, Inc. silently [banned](https://medium.com/@catamphetamine/how-github-blocked-me-and-all-my-libraries-c32c61f061d3) my account (erasing all my repos, issues and comments) without any notice or explanation. Because of that, all source codes had to be promptly moved to [GitLab](https://gitlab.com/catamphetamine/react-phone-number-input). GitHub repo is now deprecated, and the latest source codes can be found on GitLab, which is also the place to report any issues. ## License [MIT](LICENSE)

	Stars	Issues	Version	Updated	Created
cleave.js	17,935	219	1.6.0	4 years ago	8 years ago
react-maskedinput			4.0.1	6 years ago	9 years ago
react-phone-number-input			3.4.1	2 days ago	8 years ago
text-mask-core			5.1.2	6 years ago	8 years ago

cleave.js vs react-maskedinput vs react-phone-number-input vs text-mask-core

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past