{"id":21147842,"url":"https://github.com/siamahnaf/react-simple-phone-input","last_synced_at":"2025-07-09T07:33:15.109Z","repository":{"id":64951089,"uuid":"579856936","full_name":"siamahnaf/react-simple-phone-input","owner":"siamahnaf","description":"A simple react phone input component with calling code dropdown🤷","archived":false,"fork":false,"pushed_at":"2024-09-17T13:09:23.000Z","size":841,"stargazers_count":0,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-09-17T16:24:58.484Z","etag":null,"topics":["calling-codes","dial-code","dial-code-dropdown","dropdown","nextjs","phone","phone-dropdown","phoneinput","react","reactjs"],"latest_commit_sha":null,"homepage":"https://react-simple-phone-input.vercel.app/","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/siamahnaf.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":"2022-12-19T05:23:10.000Z","updated_at":"2024-09-17T13:09:28.000Z","dependencies_parsed_at":"2024-01-07T12:24:22.739Z","dependency_job_id":"17874a9e-5961-4b88-85c8-dc89a8fe83d0","html_url":"https://github.com/siamahnaf/react-simple-phone-input","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siamahnaf%2Freact-simple-phone-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siamahnaf%2Freact-simple-phone-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siamahnaf%2Freact-simple-phone-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siamahnaf%2Freact-simple-phone-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/siamahnaf","download_url":"https://codeload.github.com/siamahnaf/react-simple-phone-input/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225507593,"owners_count":17483515,"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":["calling-codes","dial-code","dial-code-dropdown","dropdown","nextjs","phone","phone-dropdown","phoneinput","react","reactjs"],"created_at":"2024-11-20T09:18:51.454Z","updated_at":"2025-07-09T07:33:15.103Z","avatar_url":"https://github.com/siamahnaf.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://res.cloudinary.com/dub0dpenl/image/upload/v1731780157/Personal%20Logo/logo-white_e6fujz.png\"\u003e\n  \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://res.cloudinary.com/dub0dpenl/image/upload/v1731780152/Personal%20Logo/logo-dark_qqwrqu.png\"\u003e\n  \u003cimg alt=\"Siam Ahnaf\" src=\"https://res.cloudinary.com/dub0dpenl/image/upload/v1731780152/Personal%20Logo/logo-dark_qqwrqu.png\" height=\"auto\" width=\"240\"\u003e\n\u003c/picture\u003e\n\nReact Simple Phone Input\n==========\n\nA simple and customizable react phone number dropdown component. It can mix up with your designed theme and give a fluent vibe able dropdown area in your next project.\n\n[![npm version](https://cdn.jsdelivr.net/gh/siamahnaf198/react-simple-phone-input@main/assets/npm-version.svg)](https://www.npmjs.com/package/react-simple-phone-input)\n[![npm downloads](https://cdn.jsdelivr.net/gh/siamahnaf198/react-simple-phone-input@main/assets/downloads.svg)](https://www.npmjs.com/package/react-simple-phone-input)\n[![PRs Welcome](https://cdn.jsdelivr.net/gh/siamahnaf198/react-simple-phone-input@main/assets/prs-welcome.svg)](https://github.com/siamahnaf198/react-simple-phone-input)\n[![MIT licensed](https://cdn.jsdelivr.net/gh/siamahnaf198/react-simple-phone-input@main/assets/license.svg)](https://github.com/siamahnaf198/react-simple-phone-input/blob/main/LICENSE)\n\n- SSR Friendly\n- Customizable\n- Multi Design\n- Search Country\n- Smallest Bundle Size (About 98kb)\n- Typescript support\n\n## Installation\n\n```shell-script\n$ npm i react-simple-phone-input --save\n```\n\n## Usage\n\n```jsx\nimport { PhoneInput, PhoneInputResponseType } from \"react-simple-phone-input\";\nimport \"react-simple-phone-input/dist/style.css\";\n\n\u003cPhoneInput\n    country=\"US\"\n    placeholder=\"Add your phone\"\n    onChange={(data: PhoneInputResponseType) =\u003e console.log(data)}\n/\u003e\n```\n#### [See Demo](https://react-simple-phone-input.vercel.app/)\n\n## Options\n\u003ctable width=\"100%\"\u003e\n  \u003ctr\u003e\n    \u003cth\u003e Name \u003c/th\u003e\n    \u003cth\u003e Type \u003c/th\u003e\n    \u003cth width=\"30%\"\u003e Description \u003c/th\u003e\n    \u003cth\u003e Is Required \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 required \u003c/td\u003e\n    \u003ctd\u003e \"BD\" \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e placeholder \u003c/td\u003e\n    \u003ctd\u003e string \u003c/td\u003e\n    \u003ctd\u003e Input Field Placeholder Text \u003c/td\u003e\n    \u003ctd\u003e required \u003c/td\u003e\n    \u003ctd\u003e \u003ccode\u003eType your phone number\u003c/code\u003e \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\u003e Input field state value or default value \u003c/td\u003e\n    \u003ctd\u003e optional \u003c/td\u003e\n    \u003ctd\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003e iconComponent \u003c/td\u003e\n    \u003ctd\u003e ReactNode \u003c/td\u003e\n    \u003ctd\u003e Dropdown Icon component for changing default icon \u003c/td\u003e\n    \u003ctd\u003e optional \u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e \u0026lt;Icon icon=\u0026quot;icon-name\u0026quot; /\u0026gt; \u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \n   \u003ctr\u003e\n    \u003ctd\u003e inputProps \u003c/td\u003e\n    \u003ctd\u003e InputHTMLAttributes \u003c/td\u003e\n    \u003ctd\u003e Props to pass into the input field \u003c/td\u003e\n    \u003ctd\u003e optional \u003c/td\u003e\n    \u003ctd\u003e \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 Show only country in dropdown menu with Country Codes \u003c/td\u003e\n    \u003ctd\u003e optional \u003c/td\u003e\n    \u003ctd\u003e [\"BD\", \"US\", \"AF\", \"AL\"] \u003c/td\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003e excludeCountries \u003c/td\u003e\n    \u003ctd\u003e array \u003c/td\u003e\n    \u003ctd\u003e If you want to remove some country to the list. If you give \u003ccode\u003eexcludeCountries\u003c/code\u003e then \u003ccode\u003eonlyCountries\u003c/code\u003e not works \u003c/td\u003e\n    \u003ctd\u003e optional \u003c/td\u003e\n    \u003ctd\u003e [\"AF\", \"AL\"] \u003c/td\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003e preferredCountries \u003c/td\u003e\n    \u003ctd\u003e array \u003c/td\u003e\n    \u003ctd\u003e Country codes to show on the top of the dropdown menu \u003c/td\u003e\n    \u003ctd\u003e optional \u003c/td\u003e\n    \u003ctd\u003e [\"BD\", \"US\"] \u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd\u003e searchPlaceholder \u003c/td\u003e\n    \u003ctd\u003e string \u003c/td\u003e\n    \u003ctd\u003e Search input field placeholder \u003c/td\u003e\n    \u003ctd\u003eoptional\u003c/td\u003e\n    \u003ctd\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd\u003e searchIconComponent \u003c/td\u003e\n    \u003ctd\u003e ReactNode \u003c/td\u003e\n    \u003ctd\u003e If \u003ccode\u003esearch\u003c/code\u003e enabled, custom search icon to show on search bar \u003c/td\u003e\n    \u003ctd\u003e optional \u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e \u0026lt;Icon icon=\u0026quot;icon-name\u0026quot; /\u0026gt; \u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003e searchProps \u003c/td\u003e\n    \u003ctd\u003e InputHTMLAttributes \u003c/td\u003e\n    \u003ctd\u003e Props to pass into the search input field \u003c/td\u003e\n    \u003ctd\u003e optional \u003c/td\u003e\n    \u003ctd\u003e \u003c/td\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003e searchNotFound \u003c/td\u003e\n    \u003ctd\u003e string \u003c/td\u003e\n    \u003ctd\u003e Error message when search result is empty! \u003c/td\u003e\n    \u003ctd\u003e optional \u003c/td\u003e\n    \u003ctd\u003e \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Other Options\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e Name \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 showDropdownIcon \u003c/td\u003e\n    \u003ctd\u003e true \u003c/td\u003e\n    \u003ctd\u003e Show or Hide dropdown icon \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e dialCodeInputField \u003c/td\u003e\n    \u003ctd\u003e false \u003c/td\u003e\n    \u003ctd\u003e Show calling code into into field or show beside country flag. For more, see \u003ca href=\"https://react-simple-phone-input.vercel.app/\"\u003eexample\u003c/a\u003e \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e search \u003c/td\u003e\n    \u003ctd\u003e true \u003c/td\u003e\n    \u003ctd\u003e Show or Hide search input field \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e showSearchIcon \u003c/td\u003e\n    \u003ctd\u003e true \u003c/td\u003e\n    \u003ctd\u003e Show or Hide search icon \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e disableDropdownOnly \u003c/td\u003e\n    \u003ctd\u003e false \u003c/td\u003e\n    \u003ctd\u003e Disable dropdown menu list \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e disableInput \u003c/td\u003e\n    \u003ctd\u003e false \u003c/td\u003e\n    \u003ctd\u003e Disable input field \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Event\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e Event Name \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 onChange \u003c/td\u003e\n    \u003ctd\u003e To get the value from component. You get following field\n        \u003cul\u003e\n            \u003cli\u003e\u003ccode\u003ecountry\u003c/code\u003e\u003c/li\u003e\n            \u003cli\u003e\u003ccode\u003ecode\u003c/code\u003e\u003c/li\u003e\n            \u003cli\u003e\u003ccode\u003edialCode\u003c/code\u003e\u003c/li\u003e\n            \u003cli\u003e\u003ccode\u003evalue\u003c/code\u003e\u003c/li\u003e\n            \u003cli\u003e\u003ccode\u003evalueWithoutPlus\u003c/code\u003e\u003c/li\u003e\n         \u003c/ul\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e \u003ccode\u003eonChange={(data: PhoneInputResponseType) =\u003e console.log(data)}\u003c/code\u003e \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## ClassName\n\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 containerClass \u003c/td\u003e\n    \u003ctd\u003e string \u003c/td\u003e\n    \u003ctd\u003e class name for container \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\u003e class name 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\u003e class name for dropdown area/menu \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e dropdownListClass \u003c/td\u003e\n    \u003ctd\u003e string \u003c/td\u003e\n    \u003ctd\u003e class name for dropdown list \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e dropdownIconClass \u003c/td\u003e\n    \u003ctd\u003e string \u003c/td\u003e\n    \u003ctd\u003e class name for dropdown icon \u003c/td\u003e\n  \u003c/tr\u003e\u003ctr\u003e\n    \u003ctd\u003e searchContainerClass \u003c/td\u003e\n    \u003ctd\u003e string \u003c/td\u003e\n    \u003ctd\u003e class name for search bar container \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e searchInputClass \u003c/td\u003e\n    \u003ctd\u003e string \u003c/td\u003e\n    \u003ctd\u003e class name for search input field \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e searchIconClass \u003c/td\u003e\n    \u003ctd\u003e string \u003c/td\u003e\n    \u003ctd\u003e class name for search icon \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\u003e class name for search icon \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Customize styles\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e Name \u003c/th\u003e\n    \u003cth\u003e Description \u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e containerStyle \u003c/td\u003e\n    \u003ctd\u003e phone Input Container style \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e buttonStyle \u003c/td\u003e\n    \u003ctd\u003e style for dropdown button \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e dropdownStyle \u003c/td\u003e\n    \u003ctd\u003e style for dropdown menu/area \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e dropdownListStyle \u003c/td\u003e\n    \u003ctd\u003e style for dropdown list \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e dropdownIconStyle \u003c/td\u003e\n    \u003ctd\u003e style for dropdown icon \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e searchContainerStyle \u003c/td\u003e\n    \u003ctd\u003e search container style \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e searchInputStyle \u003c/td\u003e\n    \u003ctd\u003e search input field style \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e searchIconStyle \u003c/td\u003e\n    \u003ctd\u003e search icon style \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e inputStyle \u003c/td\u003e\n    \u003ctd\u003e input field style \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n`note:` version 5 released. see the [changelogs](https://github.com/siamahnaf198/react-simple-phone-input/releases/tag/v5.0.0)\n\n## Contributing\n- Code style changes not allowed\n- Do not create issues about incorrect or missing country data\n\n## Issues or correction\nIf you face any issues, missing data or wrong data about country, you are welcome to create an issue.\n\n## Stay in touch\n\n- Author - [Siam Ahnaf](https://www.siamahnaf.com/)\n- Website - [https://www.siamahnaf.com/](https://www.siamahnaf.com/)\n- Twitter - [https://twitter.com/siamahnaf198](https://twitter.com/siamahnaf198)\n- Github - [https://github.com/siamahnaf](https://github.com/siamahnaf)\n\n## License\n\n[![MIT licensed](https://cdn.jsdelivr.net/gh/siamahnaf/react-simple-phone-input@main/assets/license.svg)](LICENSE)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiamahnaf%2Freact-simple-phone-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsiamahnaf%2Freact-simple-phone-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiamahnaf%2Freact-simple-phone-input/lists"}