{"id":13468680,"url":"https://github.com/catamphetamine/react-phone-number-input","last_synced_at":"2025-10-08T06:36:53.563Z","repository":{"id":43269566,"uuid":"60347348","full_name":"catamphetamine/react-phone-number-input","owner":"catamphetamine","description":"React component for international phone number input","archived":false,"fork":false,"pushed_at":"2025-01-09T09:20:06.000Z","size":22113,"stargazers_count":951,"open_issues_count":28,"forks_count":198,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-09-23T06:54:47.771Z","etag":null,"topics":["number","phone","react"],"latest_commit_sha":null,"homepage":"http://catamphetamine.gitlab.io/react-phone-number-input/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/catamphetamine.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-06-03T12:51:53.000Z","updated_at":"2025-09-16T19:59:54.000Z","dependencies_parsed_at":"2023-02-18T08:15:30.098Z","dependency_job_id":"40da4c87-ae87-45d0-8bf4-a1036cace8cc","html_url":"https://github.com/catamphetamine/react-phone-number-input","commit_stats":{"total_commits":815,"total_committers":35,"mean_commits":"23.285714285714285","dds":0.4282208588957055,"last_synced_commit":"708f2cdbadff074fd9755b15fcdf1792421363e3"},"previous_names":["halt-hammerzeit/react-phone-number-input"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/catamphetamine/react-phone-number-input","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catamphetamine%2Freact-phone-number-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catamphetamine%2Freact-phone-number-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catamphetamine%2Freact-phone-number-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catamphetamine%2Freact-phone-number-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/catamphetamine","download_url":"https://codeload.github.com/catamphetamine/react-phone-number-input/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catamphetamine%2Freact-phone-number-input/sbom","scorecard":{"id":267741,"data":{"date":"2025-08-11","repo":{"name":"github.com/catamphetamine/react-phone-number-input","commit":"4b911930c50e1294e64b16a463d459b7fda919ef"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":0,"reason":"34 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44","Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh","Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42","Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-17T12:33:52.397Z","repository_id":43269566,"created_at":"2025-08-17T12:33:52.397Z","updated_at":"2025-08-17T12:33:52.397Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278903012,"owners_count":26065784,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["number","phone","react"],"created_at":"2024-07-31T15:01:16.618Z","updated_at":"2025-10-08T06:36:53.534Z","avatar_url":"https://github.com/catamphetamine.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-phone-number-input\n\n[![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)\n[![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)\n\nInternational phone number `\u003cinput/\u003e` for React.\n\n[\u003cimg src=\"https://gitlab.com/catamphetamine/react-phone-number-input/-/raw/master/docs/images/first-glance-local.png\" width=\"270\" height=\"113\"/\u003e](http://catamphetamine.gitlab.io/react-phone-number-input/)\n\n[See Demo](http://catamphetamine.gitlab.io/react-phone-number-input/)\n\n\u003c!-- This is a readme for the latest version (`3.x`) of the library. The previous version (`2.x`) readme could be found on [github](https://github.com/catamphetamine/react-phone-number-input/tree/2.x) until they removed it. For migrating from `2.x` to `3.x` see the [changelog](https://gitlab.com/catamphetamine/react-phone-number-input/blob/master/CHANGELOG.md). --\u003e\n\n\u003c!--\n## Screenshots\n\n### Phone number input\n\n\u003cimg src=\"https://gitlab.com/catamphetamine/react-phone-number-input/-/raw/master/docs/images/first-glance-local.png\" width=\"270\" height=\"113\"/\u003e\n\n\u003cimg src=\"https://gitlab.com/catamphetamine/react-phone-number-input/-/raw/master/docs/images/first-glance.png\" width=\"270\" height=\"113\"/\u003e\n\n### Country selection on desktop\n\n\u003cimg src=\"https://gitlab.com/catamphetamine/react-phone-number-input/-/raw/master/docs/images/desktop-native-select.png\" width=\"475\" height=\"223\"/\u003e\n\n### Country selection on mobile\n\n\u003cimg src=\"https://gitlab.com/catamphetamine/react-phone-number-input/-/raw/master/docs/images/iphone-native-select.png\" width=\"380\" height=\"443\"/\u003e\n--\u003e\n\n## Install\n\n```\nnpm install react-phone-number-input --save\n```\n\nIf you're not using a bundler then use a [standalone version from a CDN](https://gitlab.com/catamphetamine/react-phone-number-input/#cdn).\n\nThe component uses [`libphonenumber-js`](https://www.npmjs.com/package/libphonenumber-js) for phone number parsing and formatting.\n\n## Use\n\nThe component comes in two variants: \"with country select\" and \"without country select\".\n\n## With country select\n\n\"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).\n\n```js\nimport 'react-phone-number-input/style.css'\nimport PhoneInput from 'react-phone-number-input'\n\nfunction Example() {\n  // `value` will be the parsed phone number in E.164 format.\n  // Example: \"+12133734253\".\n  const [value, setValue] = useState()\n  return (\n    \u003cPhoneInput\n      placeholder=\"Enter phone number\"\n      value={value}\n      onChange={setValue}/\u003e\n  )\n}\n```\n\nThe `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\"`.\n\nAny [\"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`.\n\nAll unknown properties will be passed through to the phone number `\u003cinput/\u003e` component.\n\nTo set a default country, pass a `defaultCountry` property (must be a supported [country code](#country-code)). Example: `\u003cPhoneInput defaultCountry=\"US\" .../\u003e`.\n\nTo get the currently selected country, pass an `onCountryChange(country)` property.\n\nTo get the country of a complete phone number, use [`parsePhoneNumber(value)`](#parsephonenumberinput-string-phonenumber): `parsePhoneNumber(value) \u0026\u0026 parsePhoneNumber(value).country`.\n\nTo format `value` back to a human-readable phone number, use [`formatPhoneNumber(value)`](#formatphonenumbervalue-string-string) or [`formatPhoneNumberIntl(value)`](#formatphonenumberintlvalue-string-string).\n\n\u003c!--\nThe input is based on [`libphonenumber-js`](https://gitlab.com/catamphetamine/libphonenumber-js) phone number parsing/formatting library. The [`formatPhoneNumber(value, format)`](https://gitlab.com/catamphetamine/libphonenumber-js#formatnumbernumber-format-options) function can be used to output the `value` in `\"National\"` or `\"International\"` format.\n--\u003e\n\n\u003c!--\nThe phone number `\u003cinput/\u003e` itself is implemented using [`input-format`](https://catamphetamine.gitlab.io/input-format/) (which has an issue with some Samsung Android phones, [see the workaround](#android)).\n--\u003e\n\n#### CSS\n\n\"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]`.\n\nThe 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).\n\nSome of the CSS variables:\n\n* `--PhoneInputCountryFlag-height` — Flag icon height.\n* `--PhoneInputCountryFlag-borderColor` — Flag icon outline color.\n* `--PhoneInputCountrySelectArrow-color` — Country select arrow color.\n* `--PhoneInputCountrySelectArrow-opacity` — Country select arrow opacity (when not `:focus`ed).\n* `--PhoneInput-color--focus` — Flag icon `:focus` outline color, and also country select arrow `:focus` color.\n* …\n\n##### When using Webpack\n\nWhen using Webpack, include the stylesheet on a page via `import`:\n\n```js\nimport 'react-phone-number-input/style.css'\n```\n\nFor supporting old browsers like Internet Explorer, one could\nuse [`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).\n\n##### When not using Webpack\n\nGet `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.\n\n```html\n\u003chead\u003e\n  \u003clink rel=\"stylesheet\" href=\"/css/react-phone-number-input/style.css\"/\u003e\n\u003c/head\u003e\n```\n\nOr include the `style.css` file directly from a [CDN](#cdn) if you don't have to support Internet Explorer.\n\n## Without country select\n\n\"Without country select\" component is just a phone number `\u003cinput/\u003e`.\n\n```js\nimport PhoneInput from 'react-phone-number-input/input'\n\nfunction Example() {\n  // `value` will be the parsed phone number in E.164 format.\n  // Example: \"+12133734253\".\n  const [value, setValue] = useState()\n  // If `country` property is not passed\n  // then \"International\" format is used.\n  // Otherwise, \"National\" format is used.\n  return (\n    \u003cPhoneInput\n      country=\"US\"\n      value={value}\n      onChange={setValue} /\u003e\n  )\n}\n```\n\nDoesn't require any CSS.\n\nReceives properties:\n\n* `country: string?` — If `country` is specified then the input value will be formatted (and parsed) as a phone number that belongs to the `country`. `country` must be a supported [country code](#country-code). Example: `country=\"US\"`.\n\n* `international: boolean?` — Controls whether the input value should be formatted (and parsed) as an \"international\" phone number as opposed to \"national\". When this property is omitted, its default value will be determined based on the values of other properties such as `country` or `defaultCountry`:\n  * When `country` is specified:\n    * When `international` property is not specified then the default value for `international` property is `false` meaning that the phone number can only be input in \"national\" format for that `country`.\n      * Example: if `country` is `\"US\"` and `international` property is not passed then the phone number can only be input in the \"national\" format for `US` (e.g. `\"(213) 373-4253\"`).\n    * When `international` property is explicitly set to `true` then the phone number can only be input in \"international\" format for that `country`.\n      * By default, the \"country calling code\" part (e.g. `\"+1\"` when `country` is `\"US\"`) is not included in the input field.\n        * Example: if `country` is `\"US\"` and `international` property is `true` then the phone number can only be input in the \"international\" format for `US` (e.g. `\"213 373 4253\"`), that is without the \"country calling code\" part (`\"+1\"`).\n        * This could be used for implementing phone number input components that show \"country calling code\" part separately before the input field.\n      * If `withCountryCallingCode` property is explicitly set to `true` then the \"country calling code\" part (e.g. `\"+1\"` when `country` is `\"US\"`) is included in the input field (but still isn't editable).\n        * Example: if `country` is `\"US\"` and `international` property is `true` and `withCountryCallingCode` property is `true` then the phone number can only be input in the \"international\" format for `US` (e.g. `\"+1 213 373 4253\"`), including the \"country calling code\" part `\"+1\"` (which isn't editable though).\n  * When `defaultCountry` is specified then the phone number could be input either in \"national\" or \"international\" format for that `defaultCountry`, so `international` property shouldn't be used in this case.\n  * When no `defaultCountry` or `country` are specified, the phone number can only be input in \"international\" format (for any country), so `international` property shouldn't be passed and is `true` by default.\n\n* `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.\n\n* `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\"`.\n\n* `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`.\n\n* `value: string?` — Phone number `value`. Examples: `undefined`, `\"+12133734253\"`.\n\n* `onChange(value: string?)` — Updates the `value` (to `undefined` in case it's empty).\n\n* `inputComponent: component?` — Custom input component.\n  * By default, it's a generic DOM `\u003cinput/\u003e` component.\n  * Any custom input component implementation must use `React.forwardRef()` to \"forward\" `ref` to the underlying \"core\" `\u003cinput/\u003e` component.\n  * Receives properties:\n    * `value: string`\n    * `onChange(event: Event)`\n    * Any other properties that were passed to `\u003cPhoneInput/\u003e` and aren't specifically handled by this library. For example, `type=\"tel\"`, `autoComplete=\"tel\"`, etc.\n\n* `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.\n\nSee the [demo](http://catamphetamine.gitlab.io/react-phone-number-input/) for the examples.\n\nFor those who want to pass custom `metadata` there's `react-phone-number-input/input-core` sub-package.\n\nThis library also exports `getCountries()` and `getCountryCallingCode(country)` functions that a developer could use to construct their own custom country select. Such custom country `\u003cselect/\u003e` could be used in conjunction with the \"without country select\" `\u003cinput/\u003e` described above.\n\n\u003cdetails\u003e\n\u003csummary\u003eCreating a custom country \u003ccode\u003e\u0026lt;select/\u0026gt;\u003c/code\u003e\u003c/summary\u003e\n\n####\n\n```js\nimport PropTypes from 'prop-types'\nimport { getCountries, getCountryCallingCode } from 'react-phone-number-input'\n\nconst CountrySelect = ({ value, onChange, labels, ...rest }) =\u003e (\n  \u003cselect\n    {...rest}\n    value={value}\n    onChange={event =\u003e onChange(event.target.value || undefined)}\u003e\n    \u003coption value=\"\"\u003e\n      {labels['ZZ']}\n    \u003c/option\u003e\n    {getCountries().map((country) =\u003e (\n      \u003coption key={country} value={country}\u003e\n        {labels[country]} +{getCountryCallingCode(country)}\n      \u003c/option\u003e\n    ))}\n  \u003c/select\u003e\n)\n\nCountrySelect.propTypes = {\n  value: PropTypes.string,\n  onChange: PropTypes.func.isRequired,\n  labels: PropTypes.objectOf(PropTypes.string).isRequired\n}\n```\n\nUse:\n\n```js\nimport PhoneInput from 'react-phone-number-input/input'\nimport en from 'react-phone-number-input/locale/en'\nimport CountrySelect from './CountrySelect'\n\nfunction Example() {\n  const [country, setCountry] = useState('US')\n  const [value, setValue] = useState()\n  return (\n    \u003cdiv\u003e\n      \u003cCountrySelect\n        labels={en}\n        value={country}\n        onChange={setCountry}/\u003e\n      \u003cPhoneInput\n        country={country}\n        value={value}\n        onChange={setValue}/\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\u003c/details\u003e\n\n## React Native\n\nThis 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).\n\n```js\nimport React, { useState } from 'react'\nimport PhoneInput from 'react-phone-number-input/react-native-input'\n\nfunction Example() {\n  const [value, setValue] = useState()\n  return (\n    \u003cPhoneInput\n      style={...}\n      defaultCountry=\"US\"\n      value={value}\n      onChange={setValue} /\u003e\n  )\n}\n```\n\nAccepts the same properties as the web version of \"without country select\" component, with the following differences:\n\n* `smartCaret: boolean?` property is not accepted because \"smart caret\" positioning feature is not implemented in the React Native component.\n\n* `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 `\u003cTextInput/\u003e` by default.\n\n## Utility\n\nThis package exports several utility functions.\n\n### `formatPhoneNumber(value: string): string`\n\nFormats `value` as a \"local\" phone number.\n\n```js\nimport { formatPhoneNumber } from 'react-phone-number-input'\nformatPhoneNumber('+12133734253') === '(213) 373-4253'\n```\n\n### `formatPhoneNumberIntl(value: string): string`\n\nFormats `value` as an \"international\" phone number.\n\n```js\nimport { formatPhoneNumberIntl } from 'react-phone-number-input'\nformatPhoneNumberIntl('+12133734253') === '+1 213 373 4253'\n```\n\n### `isPossiblePhoneNumber(value: string): boolean`\n\nChecks 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.\n\n```js\nimport { isPossiblePhoneNumber } from 'react-phone-number-input'\nisPossiblePhoneNumber('+12223333333') === true\n```\n\n### `isValidPhoneNumber(value: string): boolean`\n\nChecks 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.\n\n```js\nimport { isValidPhoneNumber } from 'react-phone-number-input'\nisValidPhoneNumber('+12223333333') === false\nisValidPhoneNumber('+12133734253') === true\n```\n\nBy 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).\n\nI 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.\n\nWhenever 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.\n\n### `parsePhoneNumber(input: string): PhoneNumber?`\n\nParses 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`.\n\n```js\nimport { parsePhoneNumber } from 'react-phone-number-input'\nconst phoneNumber = parsePhoneNumber('+12133734253')\nif (phoneNumber) {\n  phoneNumber.country === 'US'\n}\n```\n\n### `getCountryCallingCode(country: string): string`\n\nReturns 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).\n\nThis is simply an alias for [`getCountryCallingCode()`](https://gitlab.com/catamphetamine/libphonenumber-js#getcountrycallingcodecountry) from [`libphonenumber-js`](https://gitlab.com/catamphetamine/libphonenumber-js).\n\n```js\nimport { getCountryCallingCode } from 'react-phone-number-input'\ngetCountryCallingCode('US') === '1'\n```\n\n### `isSupportedCountry(country: string): boolean`\n\nChecks if a [country](#country-code) is supported by this library.\n\nThis is simply an alias for [`isSupportedCountry()`](https://gitlab.com/catamphetamine/libphonenumber-js#issupportedcountrycountry-string-boolean) from [`libphonenumber-js`](https://gitlab.com/catamphetamine/libphonenumber-js).\n\n```js\nimport { isSupportedCountry } from 'react-phone-number-input'\nisSupportedCountry('US') === true\n```\n\n## Flags URL\n\nBy 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 `\u003cimg src=\"...\"/\u003e`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).\n\nFor example, using [`flagpack`](https://github.com/jackiboy/flagpack) \"4x3\" flag icons would be as simple as:\n\n```css\n:root {\n  --PhoneInputCountryFlag-aspectRatio: 1.333;\n}\n```\n\n```js\n\u003cPhoneInput flagUrl=\"https://flag.pk/flags/4x3/{xx}.svg\" .../\u003e\n```\n\n## Including all flags\n\nLinking flag icons as external `\u003cimg/\u003e`s is only done to reduce the overall bundle size, because including all country flags in the code as inline `\u003csvg/\u003e`s would increase the bundle size by 44 kB (after gzip).\n\nIf 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:\n\n```js\nimport PhoneInput from 'react-phone-number-input'\nimport flags from 'react-phone-number-input/flags'\n\n\u003cPhoneInput flags={flags} .../\u003e\n```\n\n\u003c!--\n## Android\n\nThere have been [reports](https://github.com/catamphetamine/react-phone-number-input/issues/75) of some Samsung Android phones not handling caret positioning properly (e.g. Samsung Galaxy S8+, Samsung Galaxy S7 Edge).\n\nThe workaround is to pass `smartCaret={false}` property:\n\n```js\nimport PhoneInput from 'react-phone-number-input'\n\n\u003cPhoneInput\n  smartCaret={false}\n  value={this.state.value}\n  onChange={value =\u003e this.setState(value)}/\u003e\n```\n\n`smartCaret={false}` caret is not as \"smart\" as the default one but still works good enough (and has no issues on Samsung Android phones). When erasing or inserting digits in the middle of a phone number this caret usually jumps to the end: this is the expected behaviour because the \"smart\" caret positioning has been turned off specifically to fix this Samsung Android phones issue.\n--\u003e\n\n## Localization\n\nLanguage 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.\n\n\u003cdetails\u003e\n\u003csummary\u003eWhere to get country names for any language.\u003c/summary\u003e\n\n####\n\nCountry names can be copy-pasted from [`github.com/umpirsky/country-list`](https://github.com/umpirsky/country-list/blob/master/data/).\n\n```js\nJSON.stringify(\n  Object.keys(countries).sort()\n    .reduce((all, country) =\u003e ({ ...all, [country]: countries[country] }), {}),\n  null,\n  '\\t'\n)\n````\n\nAlso 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.\n\u003c/details\u003e\n\n####\n\nThe `labels` format is:\n\n```js\n{\n  // Can be used as a label for country input.\n  // Country `\u003cselect/\u003e` uses this as its default `aria-label`.\n  \"country\": \"Phone number country\",\n  // Can be used as a label for phone number input.\n  \"phone\": \"Phone\",\n  // Can be used as a label for phone number extension input.\n  \"ext\": \"ext.\",\n  // Country names.\n  \"AB\": \"Abkhazia\",\n  \"AC\": \"Ascension Island\",\n  ...,\n  \"ZZ\": \"International\"\n}\n```\n\nAn example of using translated `labels`:\n\n```js\nimport ru from 'react-phone-number-input/locale/ru'\n\n\u003cPhoneInput ... labels={ru}/\u003e\n```\n\n## `min` vs `max` vs `mobile`\n\nThis component uses [`libphonenumber-js`](https://gitlab.com/catamphetamine/libphonenumber-js) which provides different \"metadata\" sets, \"metadata\" being a list of phone number parsing and formatting rules for all countries. The complete list of those rules is huge, so `libphonenumber-js` provides a way to optimize bundle size by choosing between `max`, `min`, `mobile` and \"custom\" metadata:\n\n* `max` — The complete metadata set, is about `145 kB` in size (`libphonenumber-js/metadata.max.json`). Choose this when you need the most strict version of `isValid()`, or if you need to detect phone number type (\"fixed line\", \"mobile\", etc).\n\n* `min` — (default) The smallest metadata set, is about `80 kB` in size (`libphonenumber-js/metadata.min.json`). Choose this by default: when you don't need to detect phone number type (\"fixed line\", \"mobile\", etc), or when a basic version of `isValid()` is enough. The `min` metadata set doesn't contain the regular expressions for phone number digits validation (via [`.isValid()`](#isvalid)) and detecting phone number type (via [`.getType()`](#gettype)) for most countries. In this case, `.isValid()` still performs some basic phone number validation (for example, checks phone number length), but it doesn't validate phone number digits themselves the way `max` metadata validation does.\n\n* `mobile` — The complete metadata set for dealing with mobile numbers _only_, is about `95 kilobytes` in size (`libphonenumber-js/metadata.mobile.json`). Choose this when you need `max` metadata and when you _only_ accept mobile numbers. Other phone number types will still be parseable, but they won't be recognized as being \"valid\" (`isValidPhoneNumber()` will return `false`).\n\nTo use a particular metadata set, simply import functions from a relevant sub-package.\n\nFor \"with country select\" component those're:\n\n* `react-phone-number-input/max`\n* `react-phone-number-input/min`\n* `react-phone-number-input/mobile`\n\nImporting functions directly from `react-phone-number-input` effectively results in using the `min` metadata.\n\nFor \"without country select\" component the sub-packages are:\n\n* `react-phone-number-input/input-max`\n* `react-phone-number-input/input` (for `min`)\n* `react-phone-number-input/input-mobile`\n\nSometimes (rarely) not all countries are needed, and in those cases developers may want to [generate](#customizing-metadata) their own \"custom\" metadata set. For those cases, there's a `/core` sub-package that doesn't come pre-packaged with any default metadata set and instead accepts metadata as a component property and as the last argument of each exported function.\n\nFor \"with country select\" component, the `/core` export is `react-phone-number-input/core`, and for \"without country select\" component, the `/core` export is `react-phone-number-input/input-core`.\n\n## Bug reporting\n\nIf you think that the phone number parsing/formatting/validation engine malfunctions for a particular phone number then it could be for several reasons:\n\n* `libphonenumber-js`, which is what this package uses internally, parses/formats/validates phone numbers incorrectly. To test if that's the case, follow the instructions outlined in the [bug reporting section of `libphonenumber-js` repo readme](https://gitlab.com/catamphetamine/libphonenumber-js#bug-reporting).\n\n* `react-phone-number-input`'s exported `isValidPhoneNumber()` function is a \"stripped-down\" \"min\" version of the same function exported from `libphonenumber-js` package, so if you think that the validation is too lax, use the `isValidPhoneNumber()` function from `libphonenumber-js/max` package instead.\n\n* In other cases, report issues in this repo.\n\n## Autocomplete\n\nMake sure to put a `\u003cPhoneInput/\u003e` into a `\u003cform/\u003e` otherwise web-browser's [\"autocomplete\"](https://www.w3schools.com/tags/att_input_autocomplete.asp) feature may not be working: a user will be selecting his phone number from the list but [nothing will be happening](https://gitlab.com/catamphetamine/react-phone-number-input/issues/101).\n\n## `react-hook-form`\n\nTo use this component with [`react-hook-form`](https://react-hook-form.com), use one of the four exported components:\n\n```js\n// \"Without country select\" component.\nimport PhoneInput from 'react-phone-number-input/react-hook-form-input'\n\n// \"Without country select\" component (to pass custom `metadata` property).\nimport PhoneInput from 'react-phone-number-input/react-hook-form-input-core'\n\n// \"With country select\" component.\nimport PhoneInputWithCountry from 'react-phone-number-input/react-hook-form'\n\n// \"With country select\" component (to pass custom `metadata` property).\nimport PhoneInputWithCountry from 'react-phone-number-input/react-hook-form-core'\n```\n\n[Example](https://codesandbox.io/s/recursing-brook-kmtjw):\n\n```js\n// \"Without country select\" component.\nimport PhoneInput from \"react-phone-number-input/react-hook-form-input\"\n\n// \"With country select\" component.\nimport PhoneInputWithCountry from \"react-phone-number-input/react-hook-form\"\n\nimport { useForm } from \"react-hook-form\"\n\nexport default function Form() {\n  const {\n    // Either pass a `control` property to the component\n    // or wrap it in a `\u003cFormProvider/\u003e`.\n    control,\n    handleSubmit\n  } = useForm()\n\n  return (\n    \u003cform onSubmit={handleSubmit(...)}\u003e\n      \u003cPhoneInput\n        name=\"phoneInput\"\n        control={control}\n        rules={{ required: true }} /\u003e\n\n      \u003cPhoneInputWithCountry\n        name=\"phoneInputWithCountrySelect\"\n        control={control}\n        rules={{ required: true }} /\u003e\n\n      \u003cbutton type=\"submit\"\u003e\n        Submit\n      \u003c/button\u003e\n    \u003c/form\u003e\n  )\n}\n```\n\nBoth components accept properties:\n\n* `name` — (required) Form field name.\n\n* `control` — (required) The `control` object returned from `useForm()`.\n\n* `rules` — (optional) Validation rules in the same format as for `register()`. Example: `{{ required: true, validate: isPossiblePhoneNumber }}`.\n\n* `defaultValue` — (optional) A default value could be passed directly to the component, or as part of the `defaultValues` parameter of `useForm()`.\n\n\u003c!-- * `shouldUnregister` — (optional) (advanced) Same as `shouldUnregister` parameter of `register()` (see `react-hook-form` docs for more info). Pass `true` to clear the value from form values on input component unmount: for example, when showing or hiding phone input field. `shouldUnregister` can also be set globally for all fields when passed as a parameter to `useForm()`. --\u003e\n\n## Customization\n\n\"With country select\" `\u003cPhoneInput/\u003e` component accepts some [customization properties](http://catamphetamine.gitlab.io/react-phone-number-input/docs#phoneinputwithcountry):\n\n\u003c!-- * `containerComponent` — Custom wrapping `\u003cdiv/\u003e` component. --\u003e\n\n* `metadata` — Custom `libphonenumber-js` [\"metadata\"](#min-vs-max-vs-mobile). Could be used to supply \"metadata\" that only contains a small subset of countries.\n\n* `labels` — Custom translation \"messages\": country names, miscellanous labels. Example for English: [`react-phone-number-input/locale/en.json`](https://gitlab.com/catamphetamine/react-phone-number-input/-/blob/master/locale/en.json)\n\n* [`inputComponent`](#inputcomponent) — Custom phone number `\u003cinput/\u003e` component.\n\n* [`countrySelectComponent`](#countryselectcomponent) — Custom country `\u003cselect/\u003e` component.\n\n* [`internationalIcon`](#internationalicon) — Custom \"International\" icon component.\n\n* [`flagComponent`](#flagcomponent) — Custom flag icon component.\n\n* `countrySelectProps.arrowComponent` — Custom \"arrow\" component of the default country `\u003cselect/\u003e`. Renders an \"arrow\" \"dropdown\" icon. Doesn't receive any properties.\n\nAll those customization properties have their default values which are, therefore, always included in the application bundle, regardless of whether those default property values get overridden by any custom ones.\n\nThose who'd like to exclude the default values just for `metadata` and `labels` properties could `import` the component from `react-phone-number-input/core` subpackage rather than from `react-phone-number-input` package.\n\n#### `countrySelectComponent`\n\nReact component for the country select. See [CountrySelect.js](https://gitlab.com/catamphetamine/react-phone-number-input/blob/master/source/CountrySelect.js) for an example.\n\nReceives properties:\n\n* `name: string?` — HTML `name` attribute.\n* `value: string?` — The currently selected country code (`undefined` in case of \"International\").\n* `onChange(value: string?)` — Updates the `value` (to `undefined` in case of \"International\").\n* `onFocus()` — Is used to toggle the `--focus` CSS class.\n* `onBlur()` — Is used to toggle the `--focus` CSS class.\n* `options: object[]` — The list of all selectable countries (including \"International\") each being an object of shape `{ value: string?, label: string }`.\n* `iconComponent: PropTypes.elementType` — React component that renders a country icon: `\u003cIcon country={value}/\u003e`. If `country` is `undefined` then it renders an \"International\" icon.\n* `disabled: boolean?` — HTML `disabled` attribute.\n* `readOnly: boolean?` — HTML `readonly` attribute.\n* `tabIndex: (number|string)?` — HTML `tabIndex` attribute.\n* `className: string` — CSS class name.\n\n#### `inputComponent`\n\nA React component for the phone number input field. Is `\"input\"` by default, meaning that it renders a standard DOM `\u003cinput/\u003e`.\n\nAny custom input component implementation must use `React.forwardRef()` to \"forward\" `ref` to the underlying \"core\" `\u003cinput/\u003e` component.\n\nReceives properties:\n\n* `value: string` — The formatted `value`.\n* `onChange(event: Event)` — Updates the formatted `value` from `event.target.value`.\n* `onFocus()` — Is used to toggle the `--focus` CSS class.\n* `onBlur(event: Event)` — Is used to toggle the `--focus` CSS class.\n* Other properties like `type=\"tel\"` or `autoComplete=\"tel\"` that should be passed through to the DOM `\u003cinput/\u003e`.\n\n\u003c!--\n#### `inputComponent`\n\nReact component for the phone number input field (a higher-order one). See [InputSmart](https://gitlab.com/catamphetamine/react-phone-number-input/blob/master/source/InputSmart.js) and [InputBasic](https://gitlab.com/catamphetamine/react-phone-number-input/blob/master/source/InputBasic.js) for an example.\n\nReceives properties:\n\n* `value : string` — The parsed phone number. E.g.: `\"\"`, `\"+\"`, `\"+123\"`, `\"123\"`.\n* `onChange(value : string)` — Updates the `value` (to `undefined` in case it's empty).\n* `onFocus()` — Is used to toggle the `--focus` CSS class.\n* `onBlur()` — Is used to toggle the `--focus` CSS class.\n* `country : string?` — The currently selected country. `undefined` means \"International\" (no country selected).\n* `metadata : object` — `libphonenumber-js` metadata.\n* All other properties should be passed through to the underlying `\u003cinput/\u003e`.\n\nMust also either use `React.forwardRef()` to \"forward\" `ref` to the `\u003cinput/\u003e` or implement `.focus()` method.\n--\u003e\n\n#### `flagComponent`\n\nRenders a country flag icon.\n\nReceives properties:\n\n* `country: string` — A two-letter ISO country code. Example: `\"RU\"`.\n* `countryName: string` — Country name. Example: `\"Russia\"`.\n* `flags?: object` — An object that contains a flag icon component for each country. Same as the [`flags`](https://catamphetamine.gitlab.io/react-phone-number-input/docs/#phoneinputwithcountry) property of the `react-phone-number-input` component.\n* `flagUrl?: string` — A template for a country flag icon image URL. Same as the [`flagUrl`](https://catamphetamine.gitlab.io/react-phone-number-input/docs/#phoneinputwithcountry) property of the `react-phone-number-input` component.\n* `className: string` — CSS class name.\n\n#### `internationalIcon`\n\nRenders an \"International\" icon. For example, the default one is a globe icon. The icon is shown instead of a country flag when the phone number is in international format (i.e. starts with a `+` character) but is either incomplete or doesn't belong to any known country.\n\nReceives properties:\n\n* `title: string` — [ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) label.\n* `aspectRatio: number` — Icon aspect ratio: `width / height`.\n* `className: string` — CSS class name.\n\n\u003c!--\n#### `containerComponent`\n\nReact component that contains the country picker and input. Is `\"div\"` by default meaning that it renders a standard DOM `\u003cdiv/\u003e`.\n\nReceives properties:\n\n* `style: object` — A component CSS style object.\n* `className: string` — Classes to attach to the component, typically changes when component focuses or blurs.\n--\u003e\n\n## CDN\n\nOne can use any npm CDN service, e.g. [unpkg.com](https://unpkg.com) or [jsdelivr.net](https://jsdelivr.net)\n\n```html\n\u003c!-- Default (\"min\" metadata). --\u003e\n\u003cscript src=\"https://unpkg.com/react-phone-number-input@3.x/bundle/react-phone-number-input.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Or \"max\" metadata. --\u003e\n\u003cscript src=\"https://unpkg.com/react-phone-number-input@3.x/bundle/react-phone-number-input-max.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Or \"mobile\" metadata. --\u003e\n\u003cscript src=\"https://unpkg.com/react-phone-number-input@3.x/bundle/react-phone-number-input-mobile.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Styles for the component. --\u003e\n\u003c!-- Internet Explorer requires transpiling CSS variables. --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/react-phone-number-input@3.x/bundle/style.css\"/\u003e\n\n\u003cscript\u003e\n  var PhoneInput = window.PhoneInput.default\n\u003c/script\u003e\n```\n\nWithout country select:\n\n```html\n\u003c!-- Without country `\u003cselect/\u003e` (\"min\" metadata). --\u003e\n\u003cscript src=\"https://unpkg.com/react-phone-number-input@3.x/bundle/react-phone-number-input-input.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n  var PhoneInput = window.PhoneInput.default\n\u003c/script\u003e\n```\n\n\u003c!--\n## Advertisement\n\n[React Responsive UI](https://catamphetamine.gitlab.io/react-responsive-ui/) component library.\n--\u003e\n\n## Country code\n\nA \"country code\" is a [two-letter ISO country code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) (like `US`).\n\nThis 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)).\n\nTo check whether a country code is supported, use [`isSupportedCountry()`](#issupportedcountrycountry-string-boolean) function.\n\n## TypeScript\n\nThis library comes with TypeScript \"typings\". If you happen to find any bugs in those, create an issue.\n\n## Tests\n\nThis component comes with 100% code coverage for the core `./source/helpers` directory.\n\nTo run tests:\n\n```\nnpm test\n```\n\nTo generate a code coverage report:\n\n```\nnpm run test-coverage\n```\n\nThe code coverage report can be viewed by opening `./coverage/lcov-report/index.html`.\n\nIf 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`.\n\nThe `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:\n\n```\nHandlebars: Access has been denied to resolve the property \"statements\" because it is not an \"own property\" of its parent.\nYou can add a runtime option to disable the check or this warning:\nSee https://handlebarsjs.com/api-reference/runtime-options.html#options-to-control-prototype-access for details\n```\n\n## GitHub\n\nOn 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.\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcatamphetamine%2Freact-phone-number-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcatamphetamine%2Freact-phone-number-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcatamphetamine%2Freact-phone-number-input/lists"}