{"_id":"@abdulkaderptp/react-phone-input-2","_rev":"2-384ded83e6db5d024ee7f5ed5aed90ef","name":"@abdulkaderptp/react-phone-input-2","dist-tags":{"latest":"2.15.4"},"versions":{"2.15.2":{"name":"@abdulkaderptp/react-phone-input-2","version":"2.15.2","description":"A react component to format phone numbers","main":"lib/lib.js","typings":"index.d.ts","scripts":{"test":"jest","start":"TARGET=dev_js NODE_ENV=development webpack-dev-server --progress","start:css":"TARGET=dev_css NODE_ENV=development webpack-dev-server --progress","build":"npm run build:js && npm run build:css","build:js":"TARGET=build_js NODE_ENV=production webpack -p --progress","build:css":"TARGET=build_css NODE_ENV=production webpack -p --progress && rm ./main.js","prepublishOnly":"npm run build","analyze":"TARGET=analyze NODE_ENV=production webpack -p --progress"},"repository":{"type":"git","url":"git+https://github.com/bl00mber/react-phone-input-2.git"},"keywords":["react","phone","format","number","input","telephone","javascript","international","tel","localized","material","bootstrap","i18n"],"author":{"name":"Nick Reiley","email":"bloomber111@gmail.com","url":"https://github.com/bl00mber"},"contributors":[{"name":"Raza Gill","email":"raza.gill@outlook.com","url":"https://github.com/razagill"}],"license":"MIT","bugs":{"url":"https://github.com/bl00mber/react-phone-input-2/issues"},"homepage":"https://github.com/bl00mber/react-phone-input-2","jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)$":"/test/__mocks__/fileMock.js","\\.(css|less|stylus|scss)$":"/test/__mocks__/styleMock.js"},"globals":{"__DEV__":false}},"devDependencies":{"@babel/core":"^7.3.3","babel-loader":"^8.0.5","babel-preset-react-app":"^7.0.1","css-loader":"^2.1.0","extract-loader":"^3.1.0","file-loader":"^5.0.2","jest":"^24.7.0","less":"^3.9.0","less-loader":"^4.1.0","react":"^17.0.2","react-dom":"^17.0.2","react-hot-loader":"^4.6.5","react-testing-library":"^6.0.4","style-loader":"^0.23.1","url-loader":"^1.1.2","webpack":"^4.29.5","webpack-bundle-analyzer":"^3.0.4","webpack-cli":"^3.2.3","webpack-dev-server":"^3.1.14","webpack-merge":"^4.2.1"},"peerDependencies":{"react":"^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0","react-dom":"^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0"},"dependencies":{"classnames":"^2.2.6","lodash.debounce":"^4.0.8","lodash.memoize":"^4.1.2","lodash.reduce":"^4.6.0","lodash.startswith":"^4.2.1","prop-types":"^15.7.2"},"gitHead":"6999ee10430a63ed385bd44fca700a66309b76b2","_id":"@abdulkaderptp/react-phone-input-2@2.15.2","_nodeVersion":"16.20.1","_npmVersion":"8.19.4","dist":{"integrity":"sha512-LOxD4uf9Uy7xI0CLisLPOFxrKIFTPtDfTBxEfd6662aYYJQCascQNgx14EV1zIrBQ/VMr5GcmRHw98vDh8y1xg==","shasum":"586534fe81e834985ebdd9be75662f8c8cd34b71","tarball":"https://registry.npmjs.org/@abdulkaderptp/react-phone-input-2/-/react-phone-input-2-2.15.2.tgz","fileCount":26,"unpackedSize":426142,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvTxZ+9uV5LGUkVhWWRU8XWCIsIVg/yzn/35I1kU7gfgIgF7/VplwSppDzTX510G5/meA3E6nbscSfIdqPURjPWXQ="}]},"_npmUser":{"name":"abdulkaderptp","email":"ak@itsak.in"},"directories":{},"maintainers":[{"name":"abdulkaderptp","email":"ak@itsak.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-phone-input-2_2.15.2_1691666788636_0.27935289294089216"},"_hasShrinkwrap":false},"2.15.3":{"name":"@abdulkaderptp/react-phone-input-2","version":"2.15.3","description":"A react component to format phone numbers","main":"lib/lib.js","typings":"index.d.ts","scripts":{"test":"jest","start":"TARGET=dev_js NODE_ENV=development webpack-dev-server --progress","start:css":"TARGET=dev_css NODE_ENV=development webpack-dev-server --progress","build":"npm run build:js && npm run build:css","build:js":"TARGET=build_js NODE_ENV=production webpack -p --progress","build:css":"TARGET=build_css NODE_ENV=production webpack -p --progress && rm ./main.js","prepublishOnly":"npm run build","analyze":"TARGET=analyze NODE_ENV=production webpack -p --progress"},"repository":{"type":"git","url":"git+https://github.com/bl00mber/react-phone-input-2.git"},"keywords":["react","phone","format","number","input","telephone","javascript","international","tel","localized","material","bootstrap","i18n"],"author":{"name":"Nick Reiley","email":"bloomber111@gmail.com","url":"https://github.com/bl00mber"},"contributors":[{"name":"Raza Gill","email":"raza.gill@outlook.com","url":"https://github.com/razagill"}],"license":"MIT","bugs":{"url":"https://github.com/bl00mber/react-phone-input-2/issues"},"homepage":"https://github.com/bl00mber/react-phone-input-2","jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)$":"/test/__mocks__/fileMock.js","\\.(css|less|stylus|scss)$":"/test/__mocks__/styleMock.js"},"globals":{"__DEV__":false}},"devDependencies":{"@babel/core":"^7.3.3","babel-loader":"^8.0.5","babel-preset-react-app":"^7.0.1","css-loader":"^2.1.0","extract-loader":"^3.1.0","file-loader":"^5.0.2","jest":"^24.7.0","less":"^3.9.0","less-loader":"^4.1.0","react":"^17.0.2","react-dom":"^17.0.2","react-hot-loader":"^4.6.5","react-testing-library":"^6.0.4","style-loader":"^0.23.1","url-loader":"^1.1.2","webpack":"^4.29.5","webpack-bundle-analyzer":"^3.0.4","webpack-cli":"^3.2.3","webpack-dev-server":"^3.1.14","webpack-merge":"^4.2.1"},"peerDependencies":{"react":"^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0","react-dom":"^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0"},"dependencies":{"classnames":"^2.2.6","lodash.debounce":"^4.0.8","lodash.memoize":"^4.1.2","lodash.reduce":"^4.6.0","lodash.startswith":"^4.2.1","prop-types":"^15.7.2"},"gitHead":"6999ee10430a63ed385bd44fca700a66309b76b2","_id":"@abdulkaderptp/react-phone-input-2@2.15.3","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-O3L2oqoVDGpzQ/RhSoqzTxW1XA8ReGTnWScLlYR10ZVoFk6mkpXQvJAANuPDoMvGjW3MoriBsCc3usYpqns96w==","shasum":"b5b884446f5bc574140973bd514388eb5c1a1090","tarball":"https://registry.npmjs.org/@abdulkaderptp/react-phone-input-2/-/react-phone-input-2-2.15.3.tgz","fileCount":27,"unpackedSize":431307,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIELaSdmdKmTiQg5MfpPsMyCZB3WCLg3FMiiduxvjuCGbAiBt3ihBjN2LQtQDqAueC7669htq/9NGg+uE7gDTS6i0SQ=="}]},"_npmUser":{"name":"abdulkaderptp","email":"ak@itsak.in"},"directories":{},"maintainers":[{"name":"abdulkaderptp","email":"ak@itsak.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-phone-input-2_2.15.3_1691667113947_0.6829549746984267"},"_hasShrinkwrap":false},"2.15.4":{"name":"@abdulkaderptp/react-phone-input-2","version":"2.15.4","description":"A react component to format phone numbers","main":"lib/lib.js","typings":"index.d.ts","scripts":{"test":"jest","start":"TARGET=dev_js NODE_ENV=development webpack-dev-server --progress","start:css":"TARGET=dev_css NODE_ENV=development webpack-dev-server --progress","build":"npm run build:js && npm run build:css","build:js":"TARGET=build_js NODE_ENV=production webpack -p --progress","build:css":"TARGET=build_css NODE_ENV=production webpack -p --progress && rm ./main.js","prepublishOnly":"npm run build","analyze":"TARGET=analyze NODE_ENV=production webpack -p --progress"},"repository":{"type":"git","url":"git+https://github.com/bl00mber/react-phone-input-2.git"},"keywords":["react","phone","format","number","input","telephone","javascript","international","tel","localized","material","bootstrap","i18n"],"author":{"name":"Nick Reiley","email":"bloomber111@gmail.com","url":"https://github.com/bl00mber"},"contributors":[{"name":"Raza Gill","email":"raza.gill@outlook.com","url":"https://github.com/razagill"}],"license":"MIT","bugs":{"url":"https://github.com/bl00mber/react-phone-input-2/issues"},"homepage":"https://github.com/bl00mber/react-phone-input-2","jest":{"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)$":"/test/__mocks__/fileMock.js","\\.(css|less|stylus|scss)$":"/test/__mocks__/styleMock.js"},"globals":{"__DEV__":false}},"devDependencies":{"@babel/core":"^7.3.3","babel-loader":"^8.0.5","babel-preset-react-app":"^7.0.1","css-loader":"^2.1.0","extract-loader":"^3.1.0","file-loader":"^5.0.2","jest":"^24.7.0","less":"^3.9.0","less-loader":"^4.1.0","react":"^17.0.2","react-dom":"^17.0.2","react-hot-loader":"^4.6.5","react-testing-library":"^6.0.4","style-loader":"^0.23.1","url-loader":"^1.1.2","webpack":"^4.29.5","webpack-bundle-analyzer":"^3.0.4","webpack-cli":"^3.2.3","webpack-dev-server":"^3.1.14","webpack-merge":"^4.2.1"},"peerDependencies":{"react":"^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0","react-dom":"^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0"},"dependencies":{"classnames":"^2.2.6","lodash.debounce":"^4.0.8","lodash.memoize":"^4.1.2","lodash.reduce":"^4.6.0","lodash.startswith":"^4.2.1","prop-types":"^15.7.2"},"gitHead":"ab584b93014c7c56f3989736ff34b1c7877a362e","_id":"@abdulkaderptp/react-phone-input-2@2.15.4","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-M2zdvEhZjMzoOdtGc6BH08z+DAR1UJ762qlL+ggVqchPwBLLkR2Zib6gG6pHLn8+87/6e2p1mhY4ucQPgcCMDw==","shasum":"4ff84d747568dedaa2c5c5be36de0082e75e9f3a","tarball":"https://registry.npmjs.org/@abdulkaderptp/react-phone-input-2/-/react-phone-input-2-2.15.4.tgz","fileCount":27,"unpackedSize":431307,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDtXTEUMTTVI4j0a8CoxYNPr3aph3F7YfdOrNWSTyQqBAiEA4vCsuDSRGWMlhms++4Mj3ymxm/6bz/T/OeLffWzO0lY="}]},"_npmUser":{"name":"abdulkaderptp","email":"ak@itsak.in"},"directories":{},"maintainers":[{"name":"abdulkaderptp","email":"ak@itsak.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-phone-input-2_2.15.4_1691670131512_0.17989389171263692"},"_hasShrinkwrap":false}},"time":{"created":"2023-08-10T11:26:28.476Z","2.15.2":"2023-08-10T11:26:28.950Z","modified":"2023-08-10T12:22:11.920Z","2.15.3":"2023-08-10T11:31:54.136Z","2.15.4":"2023-08-10T12:22:11.766Z"},"maintainers":[{"name":"abdulkaderptp","email":"ak@itsak.in"}],"description":"A react component to format phone numbers","homepage":"https://github.com/bl00mber/react-phone-input-2","keywords":["react","phone","format","number","input","telephone","javascript","international","tel","localized","material","bootstrap","i18n"],"repository":{"type":"git","url":"git+https://github.com/bl00mber/react-phone-input-2.git"},"contributors":[{"name":"Raza Gill","email":"raza.gill@outlook.com","url":"https://github.com/razagill"}],"author":{"name":"Nick Reiley","email":"bloomber111@gmail.com","url":"https://github.com/bl00mber"},"bugs":{"url":"https://github.com/bl00mber/react-phone-input-2/issues"},"license":"MIT","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 this.setState({ phone })}\n/>\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\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n \n \n
Name Type Description Example
country string initial country 'us' | 1
value string input state value
onlyCountries array country codes to be included ['cu','cw','kz']
preferredCountries array country codes to be at the top ['cu','cw','kz']
excludeCountries array array of country codes to be excluded ['cu','cw','kz']
placeholder string custom placeholder
inputProps object props to pass into the input
\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Booleans Default Description
autoFormat true on/off phone formatting
disabled false disable input and dropdown
disableDropdown false disable dropdown only
disableCountryCode false
enableAreaCodes false enable local codes for all countries
enableTerritories false enable dependent territories with population of ~100,000 or lower
enableLongNumbers false boolean/number
countryCodeEditable true
enableSearch false enable search in the dropdown
disableSearchIcon false hide icon for the search field
\n\n```jsx\n\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\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
containerClass string class for container
inputClass string class for input
buttonClass string class for dropdown button
dropdownClass string class for dropdown container
searchClass string class for search field
containerStyle object styles for container
inputStyle object styles for input
buttonStyle object styles for dropdown button
dropdownStyle object styles for dropdown container
searchStyle object styles for search field
\n\n### Events\n\n \n \n \n \n \n \n \n
onChange onFocus onBlur onClick onKeyDown
\n\nonChange(value, country, e, formattedValue)\n\nCountry data object not returns from onKeyDown event\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Data Type Description
value/event string/object event or the phone number
country data object country object { name, dialCode, countryCode (iso2) }
\n\n### Regions\n\n \n \n \n \n \n \n \n \n \n \n
Name Type Description
regions array/string to show countries only from specified regions
\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n
Regions
['america', 'europe', 'asia', 'oceania', 'africa']
Subregions
['north-america', 'south-america', 'central-america', 'carribean', 'eu-union', 'ex-ussr', 'ex-yugos', 'baltic', 'middle-east', 'north-africa']
\n\n```jsx\n\n\n\n```\n\n### Predefined localization\n`es` Spanish, `de` Deutsch, `ru` Russian, `fr` French
\n`jp` Japanese, `cn` Chinese, `pt` Portuguese, `it` Italian
\n`ir` Iranian, `ar` Arabic, `tr` Turkish, `id` Indonesian
\n`hu` Hungarian, `pl` Polish, `ko` Korean\n\n```jsx\nimport es from 'react-phone-input-2/lang/es.json'\n\n\n```\n\n### Local area codes\n```jsx\n\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\n```\n\n### Custom area codes\n```jsx\n\n```\n\n### Other props\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
defaultMask ... ... ... ... ..
alwaysDefaultMask false
prefix +
searchPlaceholder 'search'
searchNotFound 'No entries to show'
copyNumbersOnly true
renderStringAsFlag string
autocompleteSearch false
jumpCursorToEnd false
priority {{ca: 0, us: 1, kz: 0, ru: 1}}
enableClickOutside true
showDropdown false
defaultErrorMessage string
specialLabel string
disableInitialCountryGuess false
disableCountryGuess false
\n\n### Custom localization\n```jsx\n\n\n\n```\n\n### Preserve countries order\n```jsx\n\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 {\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/>\n```\n\n```jsx\nimport startsWith from 'lodash.startswith';\n\n {\n return countries.some((country) => {\n return startsWith(inputNumber, country.dialCode) || startsWith(country.dialCode, inputNumber);\n });\n }}\n/>\n```\n\n### Clear country\nTo clear `country`, pass `null` as `value`.\n\n### Dynamic placeholder\n
\n Show\n\n```jsx\nconst phoneCountryFormat = useMemo(() => phoneCountry?.format || undefined, [phoneCountry]);\nconst placeholder = useMemo(() => {\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('.') > -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
\n\n### CDN\n```html\n\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","readmeFilename":"README.md"}