{"_id":"@aramir/antd-phone-input","_rev":"3-bc2d391a1c3b5cd6b49e6cfd549b6bab","name":"@aramir/antd-phone-input","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@aramir/antd-phone-input","version":"1.0.0","keywords":["antd","phone","country","input"],"author":{"name":"aramir.great@gmail.com"},"license":"MIT","_id":"@aramir/antd-phone-input@1.0.0","maintainers":[{"name":"aramir","email":"aramir.great@gmail.com"}],"homepage":"https://github.com/aramir/antd-phone-input#readme","bugs":{"url":"https://github.com/aramir/antd-phone-input/issues"},"dist":{"shasum":"26df3c3e043b513e294c785c431f7976738441e7","tarball":"https://registry.npmjs.org/@aramir/antd-phone-input/-/antd-phone-input-1.0.0.tgz","fileCount":11,"integrity":"sha512-Vdz/GMg06ZKls5Hk2cpKPFdAbE11NqGr0I04G9WODww+XjnNHi6T4DLxrymepAUWZ2MscAWm9naNWJb8zPYICQ==","signatures":[{"sig":"MEYCIQDEPTyYLg67fE51DAXl5771924sbyHIS7BB2bkWpw+wRgIhAKRWxjFWITdl3SlN5Ykm9Z5dnQVz7IB4y26tuMDxfuv8","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31504},"type":"module","exports":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"gitHead":"def83f216c6da13cf0703144a29046d2da4e0683","scripts":{"dev":"vite","lint":"eslint .","test":"vitest run","publish":"npm publish --access public","build:lib":"vite build --config vite.lib.config.ts","build:demo":"vite build","prepublishOnly":"npm run lint && npm run test && npm run build:lib"},"_npmUser":{"name":"aramir","email":"aramir.great@gmail.com"},"repository":{"url":"git+https://github.com/aramir/antd-phone-input.git","type":"git"},"_npmVersion":"11.16.0","description":"A lightweight phone number input for [Ant Design](https://ant.design/) that shows numbers in national format while storing and emitting the international [E.164](https://en.wikipedia.org/wiki/E.164) standard (`+12133734253`).","directories":{},"_nodeVersion":"24.16.0","dependencies":{"libphonenumber-js":"^1.13","country-flag-icons":"^1.6"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8","jsdom":"^29.1","vitest":"^4.1","@eslint/js":"^10","typescript":"~6","@types/node":"^25","@types/react":"^19","vite-plugin-dts":"^5","@types/react-dom":"^19","@ant-design/icons":"^6.2","typescript-eslint":"^8.61","@testing-library/dom":"^10","@vitejs/plugin-react":"^6","@testing-library/react":"^16","react-syntax-highlighter":"^16","@testing-library/jest-dom":"^6","eslint-plugin-react-hooks":"^7","@testing-library/user-event":"^14","eslint-plugin-react-refresh":"^0.5","@types/react-syntax-highlighter":"^15"},"peerDependencies":{"antd":"^6","react":"^19"},"_npmOperationalInternal":{"tmp":"tmp/antd-phone-input_1.0.0_1780948294394_0.5526861770949625","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@aramir/antd-phone-input","version":"1.0.1","keywords":["antd","phone","country","input"],"author":{"name":"aramir.great@gmail.com"},"license":"MIT","_id":"@aramir/antd-phone-input@1.0.1","maintainers":[{"name":"aramir","email":"aramir.great@gmail.com"}],"homepage":"https://github.com/aramir/antd-phone-input#readme","bugs":{"url":"https://github.com/aramir/antd-phone-input/issues"},"dist":{"shasum":"24a01fc27082dcbfe56a77f66eb4c032fe156505","tarball":"https://registry.npmjs.org/@aramir/antd-phone-input/-/antd-phone-input-1.0.1.tgz","fileCount":11,"integrity":"sha512-luhVMun9yyxoUZjU5kOUj9tdaR+3x8psOscMTld9msIN2mFDY9Xshf93Js4uy6NWhzaMH8HKfaSDXXaPPNq4yA==","signatures":[{"sig":"MEUCIQD23I+2GRFJn8haGtPy+9u5PnBw3ijHKq53kZUNiYAlCQIgU/kQ2UkDAND3t5UFwDPAFCJMLM3voghN8BiYbA9ycpE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":23535},"type":"module","exports":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"gitHead":"652c5b9efe186d12a2952c6cbead4174630cdd3e","scripts":{"dev":"vite","lint":"eslint .","test":"vitest run","publish":"npm publish --access public","build:lib":"vite build --config vite.lib.config.ts","build:demo":"vite build","prepublishOnly":"npm run lint && npm run test && npm run build:lib"},"_npmUser":{"name":"aramir","email":"aramir.great@gmail.com"},"repository":{"url":"git+https://github.com/aramir/antd-phone-input.git","type":"git"},"_npmVersion":"11.16.0","description":"A lightweight phone number input for [Ant Design](https://ant.design/) that shows numbers in national format while storing and emitting the international [E.164](https://en.wikipedia.org/wiki/E.164) standard (`+12133734253`).","directories":{},"_nodeVersion":"24.16.0","dependencies":{"libphonenumber-js":"^1.13","country-flag-icons":"^1.6"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8","jsdom":"^29.1","vitest":"^4.1","@eslint/js":"^10","typescript":"~6","@types/node":"^25","@types/react":"^19","vite-plugin-dts":"^5","@types/react-dom":"^19","@ant-design/icons":"^6.2","typescript-eslint":"^8.61","@testing-library/dom":"^10","@vitejs/plugin-react":"^6","@testing-library/react":"^16","react-syntax-highlighter":"^16","@testing-library/jest-dom":"^6","eslint-plugin-react-hooks":"^7","@testing-library/user-event":"^14","eslint-plugin-react-refresh":"^0.5","@types/react-syntax-highlighter":"^15"},"peerDependencies":{"antd":"^6","react":"^19"},"_npmOperationalInternal":{"tmp":"tmp/antd-phone-input_1.0.1_1780954457114_0.6934168507506622","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@aramir/antd-phone-input","version":"1.0.2","license":"MIT","author":{"name":"aramir.great@gmail.com"},"type":"module","exports":{"import":"./dist/index.js","types":"./dist/index.d.ts"},"scripts":{"test":"vitest run","lint":"eslint .","dev":"vite","build:demo":"vite build","build:lib":"vite build --config vite.lib.config.ts","prepublishOnly":"npm run lint && npm run test && npm run build:lib","publish":"npm publish --access public"},"repository":{"type":"git","url":"git+https://github.com/aramir/antd-phone-input.git"},"bugs":{"url":"https://github.com/aramir/antd-phone-input/issues"},"keywords":["antd","phone","country","input"],"dependencies":{"country-flag-icons":"^1.6","libphonenumber-js":"^1.13"},"peerDependencies":{"antd":"^6","react":"^19"},"devDependencies":{"@ant-design/icons":"^6.2","@eslint/js":"^10","@testing-library/dom":"^10","@testing-library/jest-dom":"^6","@testing-library/react":"^16","@testing-library/user-event":"^14","@types/node":"^25","@types/react":"^19","@types/react-dom":"^19","@types/react-syntax-highlighter":"^15","@vitejs/plugin-react":"^6","eslint-plugin-react-hooks":"^7","eslint-plugin-react-refresh":"^0.5","jsdom":"^29.1","react-syntax-highlighter":"^16","typescript":"~6","typescript-eslint":"^8.61","vite":"^8","vite-plugin-dts":"^5","vitest":"^4.1"},"gitHead":"dbccf20d9af227e6600f89809d7ebdfc00f16ad0","_id":"@aramir/antd-phone-input@1.0.2","description":"A lightweight phone number input for [Ant Design](https://ant.design/) that shows numbers in national format while storing and emitting the international [E.164](https://en.wikipedia.org/wiki/E.164) standard (`+12133734253`).","homepage":"https://github.com/aramir/antd-phone-input#readme","_nodeVersion":"24.16.0","_npmVersion":"11.16.0","dist":{"integrity":"sha512-C/uJSsWY65lBrBRR65anOkjRlq/RAfXwOujVgJeXX9rlgE208d/IvohADl94Iu6/3ywL2oUxv0xHrAPAh/P78g==","shasum":"0c4c5f2362ba7d84aa7d07dae4a45f295bc87d59","tarball":"https://registry.npmjs.org/@aramir/antd-phone-input/-/antd-phone-input-1.0.2.tgz","fileCount":11,"unpackedSize":23530,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCm5OP3K/tuzlAuHpkTTBlBw1VUL/LejGKDOiBJWeUfHAIhAM9DoMdln988sEkr1ld10G/Vg6nY/wN5E2YRKQ9WWwlz"}]},"_npmUser":{"name":"aramir","email":"aramir.great@gmail.com"},"directories":{},"maintainers":[{"name":"aramir","email":"aramir.great@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/antd-phone-input_1.0.2_1784998990808_0.6988405778571394"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-08T19:51:34.220Z","modified":"2026-07-25T17:03:11.083Z","1.0.0":"2026-06-08T19:51:34.544Z","1.0.1":"2026-06-08T21:34:17.297Z","1.0.2":"2026-07-25T17:03:10.960Z"},"bugs":{"url":"https://github.com/aramir/antd-phone-input/issues"},"author":{"name":"aramir.great@gmail.com"},"license":"MIT","homepage":"https://github.com/aramir/antd-phone-input#readme","keywords":["antd","phone","country","input"],"repository":{"type":"git","url":"git+https://github.com/aramir/antd-phone-input.git"},"description":"A lightweight phone number input for [Ant Design](https://ant.design/) that shows numbers in national format while storing and emitting the international [E.164](https://en.wikipedia.org/wiki/E.164) standard (`+12133734253`).","maintainers":[{"name":"aramir","email":"aramir.great@gmail.com"}],"readme":"# AntD Phone Input\n\nA lightweight phone number input for [Ant Design](https://ant.design/) that shows numbers in national format while storing and emitting \nthe international [E.164](https://en.wikipedia.org/wiki/E.164) standard (`+12133734253`).\n\n## Features\n\n- **Uses [libphonenumber-js](https://github.com/catamphetamine/libphonenumber-js)** -- reliable formatting and validation used in production across thousands of apps\n- **National-format display** -- users see `(213) 373-4253` instead of `+12133734253`, which feels natural; the E.164 value is handled internally\n- **Ant Design Form integration** -- works as a controlled form field out of the box; includes `buildPhoneRule()` for one-line validation\n- **Country search** -- searchable dropdown filtered by country name, ISO code, or dial code\n- **Controlled & uncontrolled** -- supports both `value`/`onChange` and `defaultValue`\n- **Full keyboard navigation**\n\n## [View Demo](https://aramir.github.io/antd-phone-input)\n\n\n\n## Installation\n\n```sh\nnpm install antd-phone-input\n```\n\n## Usage\n\n```tsx\nimport { PhoneInput } from \"antd-phone-input\";\n\nfunction App() {\n return (\n console.log(e164)} // \"+12133734253\"\n />\n );\n}\n```\n\n## Controlled\n\n```tsx\nimport { useState } from \"react\";\nimport { PhoneInput } from \"antd-phone-input\";\n\nfunction App() {\n const [phone, setPhone] = useState();\n\n return (\n \n );\n}\n```\n\n## Ant Design Form\n\nUse `buildPhoneRule()` to wire up validation. The component emits `undefined` when the field is empty, so pair it with a `required` rule if the field is mandatory.\n\n```tsx\nimport { Button, Form } from \"antd\";\nimport { PhoneInput, buildPhoneRule } from \"antd-phone-input\";\n\nfunction ContactForm() {\n const [form] = Form.useForm();\n\n return (\n
console.log(values)}>\n \n \n \n \n \n );\n}\n```\n\n## Restricting available countries\n\n```tsx\n\n```\n\n## Pinning priority countries to the top\n\n```tsx\n console.log(e164)}\n/>\n```\n\n## Props Reference\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `value` | `string` | -- | Controlled E.164 value, e.g. `\"+12133734253\"` |\n| `defaultValue` | `string` | -- | Initial E.164 value for uncontrolled usage |\n| `onChange` | `(value: string \\| undefined) => void` | -- | Called with an E.164 string on change, or `undefined` when empty |\n| `defaultCountry` | `CountryCode` | `\"US\"` | Country pre-selected when the field has no value |\n| `allowedCountries` | `CountryCode[]` | -- | Restrict the dropdown to this subset of countries |\n| `priorityCountries` | `CountryCode[]` | -- | Countries pinned to the top of the dropdown list |\n| `searchable` | `boolean` | `true` | Show a search box inside the country dropdown |\n| `callingCode` | `boolean` | `true` | Show the dial code (e.g. `+1`) as a label between the flag and the input |\n| `disabled` | `boolean` | `false` | Disables both the country selector and the phone input |\n\nAll other props from Ant Design's `Input` component are forwarded to the underlying input element (e.g. `size`, `status`, `style`, `placeholder`).\n\n## `buildPhoneRule(message?)`\n\nReturns an Ant Design `Rule` that validates a phone number using `libphonenumber-js`. Empty values always pass -- add a `required` rule separately if needed.\n\n```ts\nimport { buildPhoneRule } from \"antd-phone-input\";\n\nconst rules = [\n { required: true, message: \"Phone is required\" },\n buildPhoneRule(\"Not a valid phone number\"),\n];\n```\n","readmeFilename":"README.md"}