{"_id":"@dreamsinternational/phone-input-modern","name":"@dreamsinternational/phone-input-modern","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.2":{"name":"@dreamsinternational/phone-input-modern","version":"0.0.2","description":"A customizable React phone number input with country search, flags, and formatting.","type":"module","author":{"name":"Om Javheri"},"license":"MIT","main":"./dist/phone-input-modern.umd.cjs","module":"./dist/phone-input-modern.js","exports":{".":{"import":"./dist/phone-input-modern.js","require":"./dist/phone-input-modern.umd.cjs"},"./style.css":"./dist/style.css"},"sideEffects":["*.css"],"scripts":{"dev":"vite","build":"vite build","lint":"eslint .","preview":"vite preview","prepublishOnly":"npm run lint && npm run build"},"keywords":["react","phone-input","phone-number","country-code","flags"],"peerDependencies":{"react":">=18","react-dom":">=18"},"devDependencies":{"@eslint/js":"^9.21.0","@types/react":"^19.0.10","@types/react-dom":"^19.0.4","@vitejs/plugin-react":"^4.3.4","eslint":"^9.21.0","eslint-plugin-react-hooks":"^5.1.0","eslint-plugin-react-refresh":"^0.4.19","globals":"^15.15.0","react":"^19.0.0","react-dom":"^19.0.0","vite":"^6.2.0"},"_id":"@dreamsinternational/phone-input-modern@0.0.2","gitHead":"62122b0d846036f368202d92f3de6327683df430","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-i//ek/3T63pX0eRBWeJffKATCqKVxyedVyB1/lCPYiIl7wxrv2yPsZnUFjQ79TE56xwzCqA2KVnYSjvSe/u54A==","shasum":"287de42670f1350433c0099871d79b5cc95924a1","tarball":"https://registry.npmjs.org/@dreamsinternational/phone-input-modern/-/phone-input-modern-0.0.2.tgz","fileCount":6,"unpackedSize":118096,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCq0jcOml9JUHj5H8SkKfTncimwGHUefrKxnKsq8Rc7jQIhAMnpbPw3K9KK+eJzfTBL95XkGoYBEsbPbxjEQez0fSQY"}]},"_npmUser":{"name":"dreamsint","email":"info@dreamsinternational.in"},"directories":{},"maintainers":[{"name":"dreamsint","email":"info@dreamsinternational.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/phone-input-modern_0.0.2_1779277367438_0.8605020386048785"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-20T11:42:47.244Z","0.0.2":"2026-05-20T11:42:47.618Z","modified":"2026-05-20T11:42:47.889Z"},"maintainers":[{"name":"dreamsint","email":"info@dreamsinternational.in"}],"description":"A customizable React phone number input with country search, flags, and formatting.","keywords":["react","phone-input","phone-number","country-code","flags"],"author":{"name":"Om Javheri"},"license":"MIT","readme":"# @dreamsinternational/phone-input-modern\n\nA customizable React phone input component with country search, flags, preferred country codes, country-code detection, and formatted phone number output.\n\n## Install\n\n```bash\nnpm install @dreamsinternational/phone-input-modern\n```\n\n## Usage\n\n```jsx\nimport { useState } from \"react\";\nimport PhoneInput from \"@dreamsinternational/phone-input-modern\";\nimport \"@dreamsinternational/phone-input-modern/style.css\";\n\nexport default function Example() {\n const [phoneValues, setPhoneValues] = useState({\n number: \"\",\n countryCode: \"91\",\n tempCountryCode: \"91\",\n });\n const [error, setError] = useState(null);\n\n return (\n \n );\n}\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------ |\n| `phoneValues` | `object` | Required | Current phone state. Common keys are `number`, `countryCode`, `tempCountryCode`, `editNumber`, and `editCode`. |\n| `handlePhoneChange` | `function` | `() => {}` | Called with formatted phone data when the value changes. |\n| `PreferredCountryCodes` | `string[]` | `[]` | Dialing codes to show at the top of the country list, for example `[\"91\", \"971\"]`. |\n| `defaultCountryCode` | `string` | Auto-detect | Initial dialing code, for example `\"91\"`. If omitted, the component tries to detect the country with `https://ipapi.co/json/`. |\n| `setError` | `function` | `() => {}` | Receives validation messages. |\n| `error` | `string` | `undefined` | Current error message from your app. |\n| `CombinedToSeperate` | `boolean` | `false` | Converts a combined code and phone number into separate values through `handlePhoneChange`. |\n| `dropdownArrow` | `ReactNode` | Built-in arrow | Custom dropdown icon. |\n| `containerCss`, `selectedFlagCss`, `selectedCountryCss`, `dropdownCss`, `searchInputCss`, `ulCss`, `PreferredliCss`, `filteredliCss`, `liCss`, `inputCss` | `string` | Built-in classes | Class names for styling individual parts of the component. |\n\n## Returned Phone Data\n\n`handlePhoneChange` receives an object like this:\n\n```js\n{\n countryCode: \"91\",\n number: \"9876543210\",\n tempCountryCode: \"91\",\n FormattedNumber: \"98765 43210\",\n countryCodeAndNumber: \"919876543210\",\n countryCodeAndFormattedNumber: \"91 98765 43210\",\n selectedCountry: {\n name: \"India\",\n code: \"in\",\n dialingCode: \"91\"\n }\n}\n```\n\n## Publish\n\nBefore publishing, make sure you are logged in:\n\n```bash\nnpm login\n```\n\nThen verify the package:\n\n```bash\nnpm run build\nnpm pack --dry-run\n```\n\nPublish it:\n\n```bash\nnpm publish --access public\n```\n","readmeFilename":"README.md","_rev":"1-3d49bc33bc12e413f172bd081d42cd4a"}