{"id":16958761,"url":"https://github.com/kaihotz/react-phonenr-input","last_synced_at":"2025-04-05T04:11:54.274Z","repository":{"id":34290300,"uuid":"172650816","full_name":"KaiHotz/React-PhoneNr-Input","owner":"KaiHotz","description":"An intuitive phone number input with country selector for international and national phone numbers","archived":false,"fork":false,"pushed_at":"2025-02-04T18:09:52.000Z","size":34912,"stargazers_count":74,"open_issues_count":3,"forks_count":5,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-29T03:11:12.441Z","etag":null,"topics":["input-field","phone-code","phone-country","phone-input","phone-number","react","rollup"],"latest_commit_sha":null,"homepage":"https://kaihotz.github.io/React-PhoneNr-Input/","language":"TypeScript","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/KaiHotz.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2019-02-26T06:22:52.000Z","updated_at":"2024-12-08T15:41:41.000Z","dependencies_parsed_at":"2024-06-18T18:24:19.431Z","dependency_job_id":"bd9dd3a4-9d83-486e-996f-634194e0b64c","html_url":"https://github.com/KaiHotz/React-PhoneNr-Input","commit_stats":{"total_commits":258,"total_committers":3,"mean_commits":86.0,"dds":"0.12015503875968991","last_synced_commit":"613c2f40a49c28bfa62a0fdf926c3eff9883aa49"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaiHotz%2FReact-PhoneNr-Input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaiHotz%2FReact-PhoneNr-Input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaiHotz%2FReact-PhoneNr-Input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaiHotz%2FReact-PhoneNr-Input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KaiHotz","download_url":"https://codeload.github.com/KaiHotz/React-PhoneNr-Input/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247284951,"owners_count":20913704,"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":["input-field","phone-code","phone-country","phone-input","phone-number","react","rollup"],"created_at":"2024-10-13T22:43:32.293Z","updated_at":"2025-04-05T04:11:54.253Z","avatar_url":"https://github.com/KaiHotz.png","language":"TypeScript","funding_links":["https://paypal.me/kaihotz"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eReact-PhoneNr-Input\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![NPM](https://img.shields.io/npm/v/react-phonenr-input.svg)](https://www.npmjs.com/package/react-phonenr-input)\n[![license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/KaiHotz/react-formik-ui/blob/master/LICENSE)\n![npm](https://img.shields.io/npm/dw/react-phonenr-input)\n\n\u003c/div\u003e\n\n## Overview\nReact-PhoneNr-Input is a simple to use phonenumber input field with country selection, that by default, intuitively guesses the country for- and formats the entered phonenumber\n\nFor International phonenumbers a dropdown menu is available to select ya country from.\n\nBy passing the prop `format='NATIONAL'` and a default country e.g. `defaultCountry='DE'`  a simple input field is shown that formats the entered phonenumber with the national format declared by the `defaultCountry` prop.\n\nAll written with less than 300 lines of code\n\n\n### Demo and Examples [here](https://kaihotz.github.io/React-PhoneNr-Input/)\n\n\n## Installation\nnpm:\n```sh\nnpm i -S react-phonenr-input\n```\n\nyarn:\n```sh\nyarn add react-phonenr-input\n```\n\n#### Props:\n\u003ctable style=\"font-size: 12px\"\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eonChange\u003c/td\u003e\n    \u003ctd\u003e(data: PhoneNumber) =\u003e void\u003c/td\u003e\n    \u003ctd\u003erequired\u003c/td\u003e\n    \u003ctd\u003eThe function/method that returns the entered phonenumber or phonenumber object\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003ewithCountryMeta\u003c/td\u003e\n    \u003ctd\u003eboolean\u003c/td\u003e\n    \u003ctd\u003efalse\u003c/td\u003e\n    \u003ctd\u003e\n      changes the retuned value into an Object that contains the phonenumber and the country information.\n      eg.:\n      \u003cpre\u003e\n        {\n          phoneNumber: \"+49 176 12345678\",\n          country: {\n            name: \"Germany (Deutschland)\"\n            iso2: \"DE\"\n          }\n        }\n      \u003c/pre\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eclassName\u003c/td\u003e\n    \u003ctd\u003estring\u003c/td\u003e\n    \u003ctd\u003eundefined\u003c/td\u003e\n    \u003ctd\u003eAdds a custom class to the Phonenumber Input Field\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003edefaultCountry\u003c/td\u003e\n    \u003ctd\u003eIsoCode\u003c/td\u003e\n    \u003ctd\u003eundefined\u003c/td\u003e\n    \u003ctd\u003eSets the default country (use iso alpha-2 country code e.g 'US', 'GB', 'DE')\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003edisabled\u003c/td\u003e\n    \u003ctd\u003eboolean\u003c/td\u003e\n    \u003ctd\u003efalse\u003c/td\u003e\n    \u003ctd\u003eDisables the Phonenumber Input Field\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eformat\u003c/td\u003e\n    \u003ctd\u003eNumberFormat\u003c/td\u003e\n    \u003ctd\u003e'INTERNATIONAL'\u003c/td\u003e\n    \u003ctd\u003eOne of: 'INTERNATIONAL', 'NATIONAL'. Sets the format of the entered  phonenumber, in case of 'NATIONAL' the defaultCountry must be set\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003einitialValue\u003c/td\u003e\n    \u003ctd\u003estring\u003c/td\u003e\n    \u003ctd\u003eundefined\u003c/td\u003e\n    \u003ctd\u003eSets the initial Value of the Phonenumber Input. This is usefull in case you need to set a phonenumber stored for example in a database\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eplaceholder\u003c/td\u003e\n    \u003ctd\u003estring\u003c/td\u003e\n    \u003ctd\u003eundefined\u003c/td\u003e\n    \u003ctd\u003eSets the Placeholder text\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003epreferredCountries\u003c/td\u003e\n    \u003ctd\u003eIsoCode[]\u003c/td\u003e\n    \u003ctd\u003eundefined\u003c/td\u003e\n    \u003ctd\u003eLets you restrict the country dropdown to a specific list of countries (use iso alpha-2 country code e.g 'US', 'GB', 'DE')\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eregions\u003c/td\u003e\n    \u003ctd\u003e\"asia\" | \"europe\" | \"africa\" | \"north-africa\" | \"oceania\" | \"america\" | \"carribean\" | \"south-america\" | \"ex-ussr\" | \"european-union\" | \"middle-east\" | \"central-america\" | \"north-america\" | Region[]\u003c/td\u003e\n    \u003ctd\u003eundefined\u003c/td\u003e\n    \u003ctd\u003eLets you restrict the country dropdown to a list of countries in the specified regions\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n###### In addition to the here listed Props you can pass all other properties that can be used on a normal Html input field\n\n#### Code example:\n```tsx\nimport React, { useState } from 'react'\nimport { PhoneInput, PhoneNumber } from 'react-phonenr-input';\n\nconst Example = () =\u003e {\n  const [value, setValue] = useState\u003cPhoneNumber\u003e('')\n\n  const handleChange = (phoneNumber: PhoneNumber) =\u003e {\n    // Do something with the phoneNumber\n    setValue(phoneNumber)\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003cPhoneInput onChange={handleChange}/\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n#### Optimized for Mobile usage\n\n\u003cimg src=\"https://raw.githubusercontent.com/KaiHotz/React-PhoneNr-Input/master/styleguide/mobile.png\" width=\"200\" alt=\"mobile\"\u003e\n\n\n## Support\nIf you like the project and want to support my work, you can buy me a coffee :)\n\n[![paypal](https://img.shields.io/badge/donate-paypal-blue.svg)](https://paypal.me/kaihotz)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaihotz%2Freact-phonenr-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkaihotz%2Freact-phonenr-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaihotz%2Freact-phonenr-input/lists"}