{"id":15493251,"url":"https://github.com/jorisre/react-telephone","last_synced_at":"2025-04-07T05:15:46.781Z","repository":{"id":37801709,"uuid":"469831966","full_name":"jorisre/react-telephone","owner":"jorisre","description":"☎️ Tiniest react phone input component (auto formating included)","archived":false,"fork":false,"pushed_at":"2024-10-29T17:50:05.000Z","size":3508,"stargazers_count":43,"open_issues_count":6,"forks_count":6,"subscribers_count":0,"default_branch":"main","last_synced_at":"2024-10-29T19:02:48.273Z","etag":null,"topics":["phone","phone-number","phonenumber","react","reactjs"],"latest_commit_sha":null,"homepage":"https://react-telephone.joris.re/","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/jorisre.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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},"funding":{"github":["jorisre"]}},"created_at":"2022-03-14T17:12:56.000Z","updated_at":"2024-04-15T06:10:08.000Z","dependencies_parsed_at":"2024-03-17T23:31:19.191Z","dependency_job_id":"301f98c8-b644-485c-b4d3-db61a467723d","html_url":"https://github.com/jorisre/react-telephone","commit_stats":{"total_commits":230,"total_committers":6,"mean_commits":"38.333333333333336","dds":0.5913043478260869,"last_synced_commit":"65b6b8eeb04e9a68cf2a2ca54d4f844c50540025"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jorisre%2Freact-telephone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jorisre%2Freact-telephone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jorisre%2Freact-telephone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jorisre%2Freact-telephone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jorisre","download_url":"https://codeload.github.com/jorisre/react-telephone/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247595335,"owners_count":20963943,"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":["phone","phone-number","phonenumber","react","reactjs"],"created_at":"2024-10-02T08:05:09.956Z","updated_at":"2025-04-07T05:15:46.709Z","avatar_url":"https://github.com/jorisre.png","language":"TypeScript","funding_links":["https://github.com/sponsors/jorisre"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003ca href=\"https://react-telephone.joris.re/\"\u003e\u003cimg alt=\"react-telephone - Demo\" src=\"https://github.com/jorisre/react-telephone/raw/main/examples/public/cover.gif\"/\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=react-telephone\"\u003e\n    \u003cimg src=\"https://img.shields.io/bundlephobia/minzip/react-telephone?style=for-the-badge\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"#contributors-\"\u003e\n    \u003cimg alt=\"All Contributors\"  src=\"https://img.shields.io/badge/all_contributors-2-black.svg?style=for-the-badge\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cbr /\u003e\n\u003cdiv align=\"center\"\u003e\u003cstrong\u003e☎️ react-telephone\u003c/strong\u003e\u003c/div\u003e\n\u003cp align=\"center\"\u003e\nTiniest react input phone component (auto formating included)\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://react-telephone.joris.re\"\u003eDemo\u003c/a\u003e \n\u003cspan\u003e · \u003c/span\u003e\n  \u003ca href=\"https://github.com/jorisre/react-telephone#installation\"\u003eDocumentation\u003c/a\u003e \n\u003cspan\u003e · \u003c/span\u003e\n\u003ca href=\"https://twitter.com/_jorisre\"\u003eTwitter\u003c/a\u003e\n  \u003csub\u003eCreated by \u003ca href=\"https://joris.re\"\u003eJoris\u003c/a\u003e\u003c/sub\u003e\n\u003c/p\u003e\n\n## Features\n\n- 🌐 Follows the **[E.164 : The international public telecommunication numbering plan](https://www.itu.int/rec/T-REC-E.164-201011-I/en)**\n- 🎨 **Easily Customizable**\n- 🪶 **Lightweight** - _less than 6kb_\n- 📞 **Native** - _it's just a HMTL input_\n- 🔌 **easily integration** - _it works without additional configuration (remix, react-hook-form)_\n- [ ] Controlled mode: coming soon\n- [ ] Custom render for `Phone.Country` and `Phone.Number`: coming soon\n\n### Examples (\u003ca href=\"https://react-telephone.joris.re\"\u003eDemo\u003c/a\u003e)\n\n- [Basic](https://github.com/jorisre/react-telephone/blob/main/examples/src/components/samples/Basic.tsx)\n- [Tailwind Css](https://github.com/jorisre/react-telephone/blob/main/examples/src/components/samples/Tailwind.tsx)\n- [Styled Components](https://github.com/jorisre/react-telephone/blob/main/examples/src/components/samples/StyledComponents.tsx)\n- [Css Modules](https://github.com/jorisre/react-telephone/blob/main/examples/src/components/samples/CssModules.tsx)\n- [Inline Styles](https://github.com/jorisre/react-telephone/blob/main/examples/src/components/samples/InlineStyles.tsx)\n- [React Hook Form](https://github.com/jorisre/react-telephone/blob/main/examples/src/components/samples/ReactHookForm.tsx)\n\n## Installation\n\n```sh\nyarn add react-telephone\n```\n\nor\n\n```sh\nnpm i react-telephone\n```\n\n## Usage\n\n```tsx\nimport { Phone } from 'react-telephone';\n\nexport default function MyComponent() {\n  return (\n    \u003cPhone\u003e\n      \u003cPhone.Country /\u003e\n      \u003cPhone.Number /\u003e\n    \u003c/Phone\u003e\n  );\n}\n```\n\n## Props\n\n| Prop             | Description                                        | Default                       |                                                                    Value |\n| :--------------- | :------------------------------------------------- | :---------------------------- | -----------------------------------------------------------------------: |\n| `defaultCountry` | Default country displayed for the country selector | First country _(Afghanistan)_ | Country [ISO2 code](https://en.wikipedia.org/wiki/ISO_3166-2) _(fr, us)_ |\n\n## Utils\n\n| Name               | Description                                        |\n| :----------------- | :------------------------------------------------- |\n| `countries`        | List of all countries.                             |\n| `getCountryByIso`  | Returns the country object for a given ISO code.   |\n| `applyMask`        | Apply the mask to a given phone number.            |\n| `splitPhoneNumber` | Split a phone number into country code and number. |\n| `replaceDialCode`  | Replace the dial code of a phone number.           |\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://joris.re\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/7545547?v=4?s=100\" width=\"100px;\" alt=\"Joris\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJoris\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/jorisre/react-telephone/commits?author=jorisre\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/jorisre/react-telephone/commits?author=jorisre\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#ideas-jorisre\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/jorisre/react-telephone/pulls?q=is%3Apr+reviewed-by%3Ajorisre\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/Kcazer\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/609420?v=4?s=100\" width=\"100px;\" alt=\"Michaël Rézac\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMichaël Rézac\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-Kcazer\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/jorisre/react-telephone/commits?author=Kcazer\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://varevarao.dev\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/3070869?v=4?s=100\" width=\"100px;\" alt=\"Varshneya Rao\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eVarshneya Rao\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/jorisre/react-telephone/commits?author=varevarao\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjorisre%2Freact-telephone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjorisre%2Freact-telephone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjorisre%2Freact-telephone/lists"}