{"id":13403129,"url":"https://github.com/bl00mber/react-phone-input-2","last_synced_at":"2025-05-14T05:10:31.612Z","repository":{"id":37682961,"uuid":"102377890","full_name":"bl00mber/react-phone-input-2","owner":"bl00mber","description":":telephone_receiver: Highly customizable phone input component with auto formatting","archived":false,"fork":false,"pushed_at":"2024-08-19T06:26:27.000Z","size":1639,"stargazers_count":980,"open_issues_count":268,"forks_count":546,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-05-06T10:44:18.843Z","etag":null,"topics":["bootstrap","format","i18n","input","international","javascript","localized","material-ui","mobile","number","phone","react","tel","telephone"],"latest_commit_sha":null,"homepage":"https://bl00mber.github.io/react-phone-input-2.html","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/bl00mber.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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}},"created_at":"2017-09-04T15:51:18.000Z","updated_at":"2025-05-05T21:47:53.000Z","dependencies_parsed_at":"2024-01-16T10:35:25.492Z","dependency_job_id":"56f62826-744e-44cc-8e57-947aa24302af","html_url":"https://github.com/bl00mber/react-phone-input-2","commit_stats":{"total_commits":346,"total_committers":74,"mean_commits":4.675675675675675,"dds":0.5173410404624277,"last_synced_commit":"39f787cf92b2ebb712b98cd8b62a3a7b38b5fde7"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bl00mber%2Freact-phone-input-2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bl00mber%2Freact-phone-input-2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bl00mber%2Freact-phone-input-2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bl00mber%2Freact-phone-input-2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bl00mber","download_url":"https://codeload.github.com/bl00mber/react-phone-input-2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254076848,"owners_count":22010611,"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","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":["bootstrap","format","i18n","input","international","javascript","localized","material-ui","mobile","number","phone","react","tel","telephone"],"created_at":"2024-07-30T19:01:25.800Z","updated_at":"2025-05-14T05:10:31.537Z","avatar_url":"https://github.com/bl00mber.png","language":"JavaScript","funding_links":["https://www.paypal.me/bloomber/20"],"categories":["JavaScript"],"sub_categories":[],"readme":"# React-Phone-Input-2\nHighly customizable phone input component with auto formatting.\n\n[![npm version](https://img.shields.io/npm/v/react-phone-input-2.svg?style=flat)](https://www.npmjs.com/package/react-phone-input-2)\n[![npm downloads](https://img.shields.io/npm/dm/react-phone-input-2.svg?style=flat)](https://www.npmjs.com/package/react-phone-input-2)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bl00mber/react-phone-input-2#contributing)\n[![travis build](https://travis-ci.org/bl00mber/react-phone-input-2.svg?branch=master)](https://travis-ci.org/bl00mber/react-phone-input-2)\n\n![animation](https://media.giphy.com/media/xiORAWnqoTJDsH0UOI/giphy.gif)\n\n## Installation\n```shell-script\nnpm install react-phone-input-2 --save\n```\n\n## Usage\n```jsx\nimport PhoneInput from 'react-phone-input-2'\nimport 'react-phone-input-2/lib/style.css'\n\n\u003cPhoneInput\n  country={'us'}\n  value={this.state.phone}\n  onChange={phone =\u003e this.setState({ phone })}\n/\u003e\n```\n**available styles** - style • high-res • material • bootstrap • semantic-ui • plain\n\n#### [Demo 1 (UI)](https://bl00mber.github.io/react-phone-input-2.html) - [Demo 2 (CSS)](https://bl00mber.github.io/react-phone-input-2-css.html)\n\n![screenshot](https://raw.githubusercontent.com/bl00mber/react-phone-input-2/master/test/screenshot.png)\n\n## Options\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e Name \u003c/th\u003e\n    \u003cth\u003e Type \u003c/th\u003e\n    \u003cth\u003e Description \u003c/th\u003e\n    \u003cth\u003e Example \u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e country \u003c/td\u003e\n    \u003ctd\u003e string \u003c/td\u003e\n    \u003ctd\u003e initial country \u003c/td\u003e\n    \u003ctd\u003e 'us' | 1 \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e value \u003c/td\u003e\n    \u003ctd\u003e string \u003c/td\u003e\n    \u003ctd colspan=\"2\"\u003e input state value \u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd\u003e onlyCountries \u003c/td\u003e\n    \u003ctd\u003e array \u003c/td\u003e\n    \u003ctd\u003e country codes to be included \u003c/td\u003e\n    \u003ctd\u003e ['cu','cw','kz'] \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e preferredCountries \u003c/td\u003e\n    \u003ctd\u003e array \u003c/td\u003e\n    \u003ctd\u003e country codes to be at the top \u003c/td\u003e\n    \u003ctd\u003e ['cu','cw','kz'] \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e excludeCountries \u003c/td\u003e\n    \u003ctd\u003e array \u003c/td\u003e\n    \u003ctd\u003e array of country codes to be excluded \u003c/td\u003e\n    \u003ctd\u003e ['cu','cw','kz'] \u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd\u003e placeholder \u003c/td\u003e\n    \u003ctd\u003e string \u003c/td\u003e\n    \u003ctd colspan=\"2\"\u003e custom placeholder \u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd\u003e inputProps \u003c/td\u003e\n    \u003ctd\u003e object \u003c/td\u003e\n    \u003ctd colspan=\"2\"\u003e props to pass into the input \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e Booleans \u003c/th\u003e\n    \u003cth\u003e Default \u003c/th\u003e\n    \u003cth\u003e Description \u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e autoFormat \u003c/td\u003e\n    \u003ctd\u003e true \u003c/td\u003e\n    \u003ctd\u003e on/off phone formatting \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e disabled \u003c/td\u003e\n    \u003ctd\u003e false \u003c/td\u003e\n    \u003ctd\u003e disable input and dropdown \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e disableDropdown \u003c/td\u003e\n    \u003ctd\u003e false \u003c/td\u003e\n    \u003ctd\u003e disable dropdown only \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e disableCountryCode \u003c/td\u003e\n    \u003ctd\u003e false \u003c/td\u003e\n    \u003ctd\u003e \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e enableAreaCodes \u003c/td\u003e\n    \u003ctd\u003e false \u003c/td\u003e\n    \u003ctd\u003e enable local codes for all countries \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e enableTerritories \u003c/td\u003e\n    \u003ctd\u003e false \u003c/td\u003e\n    \u003ctd\u003e enable dependent territories with population of ~100,000 or lower \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e enableLongNumbers \u003c/td\u003e\n    \u003ctd\u003e false \u003c/td\u003e\n    \u003ctd\u003e boolean/number \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e countryCodeEditable \u003c/td\u003e\n    \u003ctd\u003e true \u003c/td\u003e\n    \u003ctd\u003e \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e enableSearch \u003c/td\u003e\n    \u003ctd\u003e false \u003c/td\u003e\n    \u003ctd\u003e enable search in the dropdown \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e disableSearchIcon \u003c/td\u003e\n    \u003ctd\u003e false \u003c/td\u003e\n    \u003ctd\u003e hide icon for the search field \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n```jsx\n\u003cPhoneInput\n  inputProps={{\n    name: 'phone',\n    required: true,\n    autoFocus: true\n  }}\n/\u003e\n```\n\n### Contents\n- [Style](#style)\n- [Events](#events)\n- [Regions](#regions)\n- [Localization](#predefined-localization)\n- [Local area codes](#local-area-codes)\n- [Custom masks](#custom-masks)\n- [Custom area codes](#custom-area-codes)\n- [Other props](#other-props)\n- [Custom localization](#custom-localization)\n- [Guides](#guides)\n  - [Phone without dialCode](#phone-without-dialcode)\n  - [Check validity of the phone number](#check-validity-of-the-phone-number)\n  - [CDN](#cdn)\n- [Contributing](#contributing)\n- [Support](https://www.paypal.me/bloomber/20)\n\n### Style\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e containerClass \u003c/td\u003e\n    \u003ctd\u003e string \u003c/td\u003e\n    \u003ctd colspan=\"2\"\u003e class for container \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e inputClass \u003c/td\u003e\n    \u003ctd\u003e string \u003c/td\u003e\n    \u003ctd colspan=\"2\"\u003e class for input \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e buttonClass \u003c/td\u003e\n    \u003ctd\u003e string \u003c/td\u003e\n    \u003ctd colspan=\"2\"\u003e class for dropdown button \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e dropdownClass \u003c/td\u003e\n    \u003ctd\u003e string \u003c/td\u003e\n    \u003ctd colspan=\"2\"\u003e class for dropdown container \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e searchClass \u003c/td\u003e\n    \u003ctd\u003e string \u003c/td\u003e\n    \u003ctd colspan=\"2\"\u003e class for search field \u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd\u003e containerStyle \u003c/td\u003e\n    \u003ctd\u003e object \u003c/td\u003e\n    \u003ctd colspan=\"2\"\u003e styles for container \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e inputStyle \u003c/td\u003e\n    \u003ctd\u003e object \u003c/td\u003e\n    \u003ctd colspan=\"2\"\u003e styles for input \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e buttonStyle \u003c/td\u003e\n    \u003ctd\u003e object \u003c/td\u003e\n    \u003ctd colspan=\"2\"\u003e styles for dropdown button \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e dropdownStyle \u003c/td\u003e\n    \u003ctd\u003e object \u003c/td\u003e\n    \u003ctd colspan=\"2\"\u003e styles for dropdown container \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e searchStyle \u003c/td\u003e\n    \u003ctd\u003e object \u003c/td\u003e\n    \u003ctd colspan=\"2\"\u003e styles for search field \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### Events\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e onChange \u003c/td\u003e\n    \u003ctd\u003e onFocus \u003c/td\u003e\n    \u003ctd\u003e onBlur \u003c/td\u003e\n    \u003ctd\u003e onClick \u003c/td\u003e\n    \u003ctd\u003e onKeyDown \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\nonChange(value, country, e, formattedValue)\n\nCountry data object not returns from onKeyDown event\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e Data \u003c/th\u003e\n    \u003cth\u003e Type \u003c/th\u003e\n    \u003cth\u003e Description \u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e value/event \u003c/td\u003e\n    \u003ctd\u003e string/object \u003c/td\u003e\n    \u003ctd\u003e event or the phone number \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e country data \u003c/td\u003e\n    \u003ctd\u003e object \u003c/td\u003e\n    \u003ctd\u003e country object { name, dialCode, countryCode (iso2) } \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### Regions\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e Name \u003c/th\u003e\n    \u003cth\u003e Type \u003c/th\u003e\n    \u003cth\u003e Description \u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e regions \u003c/td\u003e\n    \u003ctd\u003e array/string \u003c/td\u003e\n    \u003ctd\u003e to show countries only from specified regions \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e Regions \u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e ['america', 'europe', 'asia', 'oceania', 'africa'] \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e Subregions \u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e ['north-america', 'south-america', 'central-america', 'carribean', 'eu-union', 'ex-ussr', 'ex-yugos', 'baltic', 'middle-east', 'north-africa'] \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n```jsx\n\u003cPhoneInput\n  country='de'\n  regions={'europe'}\n/\u003e\n\n\u003cPhoneInput\n  country='us'\n  regions={['north-america', 'carribean']}\n/\u003e\n```\n\n### Predefined localization\n`es` Spanish, `de` Deutsch, `ru` Russian, `fr` French\u003cbr/\u003e\n`jp` Japanese, `cn` Chinese, `pt` Portuguese, `it` Italian\u003cbr/\u003e\n`ir` Iranian, `ar` Arabic, `tr` Turkish, `id` Indonesian\u003cbr/\u003e\n`hu` Hungarian, `pl` Polish, `ko` Korean\n\n```jsx\nimport es from 'react-phone-input-2/lang/es.json'\n\n\u003cPhoneInput\n  localization={es}\n/\u003e\n```\n\n### Local area codes\n```jsx\n\u003cPhoneInput\n  enableAreaCodes={true}\n  enableAreaCodes={['us', 'ca']}\n  enableAreaCodeStretch\n/\u003e\n```\n\n#### Flexible mask\nIf `enableAreaCodeStretch` is added, the part of the mask with the area code will not stretch to length of the respective section of phone mask.\nExample: `+61 (2), +61 (02)`\n\n### Custom masks\n```jsx\n\u003cPhoneInput\n  onlyCountries={['fr', 'at']}\n  masks={{fr: '(...) ..-..-..', at: '(....) ...-....'}}\n/\u003e\n```\n\n### Custom area codes\n```jsx\n\u003cPhoneInput\n  onlyCountries={['gr', 'fr', 'us']}\n  areaCodes={{gr: ['2694', '2647'], fr: ['369', '463'], us: ['300']}}\n/\u003e\n```\n\n### Other props\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e defaultMask \u003c/td\u003e\n    \u003ctd\u003e ... ... ... ... .. \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e alwaysDefaultMask \u003c/td\u003e\n    \u003ctd\u003e false \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e prefix \u003c/td\u003e\n    \u003ctd\u003e + \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e searchPlaceholder \u003c/td\u003e\n    \u003ctd\u003e 'search' \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e searchNotFound \u003c/td\u003e\n    \u003ctd\u003e 'No entries to show' \u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd\u003e copyNumbersOnly \u003c/td\u003e\n    \u003ctd\u003e true \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e renderStringAsFlag \u003c/td\u003e\n    \u003ctd\u003e string \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e autocompleteSearch \u003c/td\u003e\n    \u003ctd\u003e false \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e jumpCursorToEnd \u003c/td\u003e\n    \u003ctd\u003e false \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e priority \u003c/td\u003e\n    \u003ctd\u003e {{ca: 0, us: 1, kz: 0, ru: 1}} \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e enableClickOutside \u003c/td\u003e\n    \u003ctd\u003e true \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e showDropdown \u003c/td\u003e\n    \u003ctd\u003e false \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e defaultErrorMessage \u003c/td\u003e\n    \u003ctd\u003e string \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e specialLabel \u003c/td\u003e\n    \u003ctd\u003e string \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e disableInitialCountryGuess \u003c/td\u003e\n    \u003ctd\u003e false \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e disableCountryGuess \u003c/td\u003e\n    \u003ctd\u003e false \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### Custom localization\n```jsx\n\u003cPhoneInput\n  onlyCountries={['de', 'es']}\n  localization={{de: 'Deutschland', es: 'España'}}\n/\u003e\n\n\u003cPhoneInput\n  onlyCountries={['de', 'es']}\n  localization={{'Germany': 'Deutschland', 'Spain': 'España'}}\n/\u003e\n```\n\n### Preserve countries order\n```jsx\n\u003cPhoneInput\n  onlyCountries={['fr', 'at']}\n  preserveOrder={['onlyCountries', 'preferredCountries']}\n/\u003e\n```\n\n## Guides\n### Phone without dialCode\n```jsx\nhandleOnChange(value, data, event, formattedValue) {\n  this.setState({ rawPhone: value.slice(data.dialCode.length) })\n}\n```\n\n### Check validity of the phone number\n`isValid(value, country, countries, hiddenAreaCodes)`\n\n```jsx\n\u003cPhoneInput\n  isValid={(value, country) =\u003e {\n    if (value.match(/12345/)) {\n      return 'Invalid value: '+value+', '+country.name;\n    } else if (value.match(/1234/)) {\n      return false;\n    } else {\n      return true;\n    }\n  }}\n/\u003e\n```\n\n```jsx\nimport startsWith from 'lodash.startswith';\n\n\u003cPhoneInput\n  isValid={(inputNumber, country, countries) =\u003e {\n    return countries.some((country) =\u003e {\n      return startsWith(inputNumber, country.dialCode) || startsWith(country.dialCode, inputNumber);\n    });\n  }}\n/\u003e\n```\n\n### Clear country\nTo clear `country`, pass `null` as `value`.\n\n### Dynamic placeholder\n\u003cdetails\u003e\n  \u003csummary\u003eShow\u003c/summary\u003e\n\n```jsx\nconst phoneCountryFormat = useMemo(() =\u003e phoneCountry?.format || undefined, [phoneCountry]);\nconst placeholder = useMemo(() =\u003e {\n  if (phoneCountryFormat) {\n    const words = phoneCountryFormat.split(' ');\n    words.shift(); // I'm using only local numbers so here I remove the country code from the format\n    let text = words.join(' ');\n     // first digit is special on french numbers, these 3 lines could be removed\n    if (country === 'fr') {\n      text = text.replace('.', '6');\n    }\n    while (text.indexOf('.') \u003e -1) {\n      text = text.replace('.', `${Math.min(9, Math.max(1, Math.floor(Math.random() * 10)))}`);\n    }\n    return text;\n  }\n  return '';\n}, [phoneCountryFormat, country]);\n```\n\u003c/details\u003e\n\n### CDN\n```html\n\u003cscript src=\"https://unpkg.com/react-phone-input-2@2.x/dist/lib.js\"\u003e\u003c/script\u003e\n```\n\n## Contributing\n- Code style changes not allowed\n- Do not create issues about incorrect or missing country masks (of already present countries) or absent area codes (they will be closed). Only create issues if the subject is an actual mechanism that is not present in the component. Otherwise create a PR with a link that proves the correctness of your newly suggested mask or list of area codes\n- Do not send new languages\n\n## License\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/bl00mber/react-phone-input-2/blob/master/LICENSE)\n\nBased on [react-phone-input](https://github.com/razagill/react-phone-input)\n\nMake sure you donated for lib maintenance [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/bloomber/20)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbl00mber%2Freact-phone-input-2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbl00mber%2Freact-phone-input-2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbl00mber%2Freact-phone-input-2/lists"}