{"id":22106238,"url":"https://github.com/mukeshsoni/react-telephone-input","last_synced_at":"2025-05-16T07:06:39.558Z","repository":{"id":23878136,"uuid":"27257119","full_name":"mukeshsoni/react-telephone-input","owner":"mukeshsoni","description":"React component for entering and validating international telephone numbers","archived":false,"fork":false,"pushed_at":"2021-08-02T23:44:11.000Z","size":21288,"stargazers_count":266,"open_issues_count":33,"forks_count":167,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-05-08T21:57:52.596Z","etag":null,"topics":["input","international-telephone","react","react-component"],"latest_commit_sha":null,"homepage":"https://unstack.in/react-telephone-input","language":"Less","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/mukeshsoni.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-11-28T07:58:11.000Z","updated_at":"2024-08-12T10:51:34.000Z","dependencies_parsed_at":"2022-08-07T11:00:48.754Z","dependency_job_id":null,"html_url":"https://github.com/mukeshsoni/react-telephone-input","commit_stats":null,"previous_names":[],"tags_count":51,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mukeshsoni%2Freact-telephone-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mukeshsoni%2Freact-telephone-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mukeshsoni%2Freact-telephone-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mukeshsoni%2Freact-telephone-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mukeshsoni","download_url":"https://codeload.github.com/mukeshsoni/react-telephone-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254436944,"owners_count":22070946,"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","international-telephone","react","react-component"],"created_at":"2024-12-01T07:04:31.061Z","updated_at":"2025-05-16T07:06:34.545Z","avatar_url":"https://github.com/mukeshsoni.png","language":"Less","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Reactjs Component for International Telephone Input\n\n[![Travis][build-badge]][build]\n[![npm package][npm-badge]][npm]\n\n_IMP_: From 5.\\*, the withStyles file will not be bundled in dist. If you want\nto use the css, you can import the css file directly to your module -\n\n```JavaScript\nimport 'react-telephone-input/css/default.css'\n```\n\n_IMP_: From 3.\\*, the styles won't be included by default. Can use `require('react-telephone-input/lib/withStyles')` to get the styles.\n\nInspired from the awesome jquery plugin for \u003ca href=\"https://github.com/Bluefieldscom/intl-tel-input\" target=\"_blank\"\u003eInternational Telephone Input\u003c/a\u003e.\n\nThis one is written as a [reactjs](http://facebook.github.io/react/) component.\n\nLive Demo here - [http://unstack.in/react-telephone-input/](http://unstack.in/react-telephone-input/)\n\n![How it looks](/images/react-telephone-number-screenshot.png?raw=true 'How it looks')\n\n```js\nfunction handleInputChange(telNumber, selectedCountry) {\n    console.log('input changed. number: ', telNumber, 'selected country: ', selectedCountry);\n}\n\n// Use declaratively within another react components render method\nvar ReactTelInput = require('react-telephone-input');\n// var ReactTelInput = require('react-telephone-input/lib/withStyles'), if you need the styles\n\n\u003cMyAwesomeReactComponent\u003e\n  \u003cReactTelInput\n        defaultCountry=\"in\"\n        flagsImagePath='/path/to/images/flags.png'\n        onChange={handleInputChange}\n        onBlur={handleInputBlur}\n        /\u003e\n\u003c/MyAwesomeReactComponent\u003e\n\n// or render standalone\nvar ReactTelInput = require('react-telephone-input');\nReact.render(\u003cReactTelInput\n                defaultCountry=\"in\"\n                flagsImagePath='/path/to/images/flags.png'\n                onChange={handleInputChange}\n                onBlur={handleInputBlur}\n              /\u003e,\n              document.getElementById('my-container'));\n```\n\nThe component accepts other props to customize it -\n\n#### value and initialValue\n\nBoth the props have the same purpose - for setting the initial value of the input programatically.\n\n#### initialValue\n\nSee `value` above.\n\n#### autoFormat\n\n`true` by default. Setting it to false will turn off all auto formatting.\n\n#### defaultCountry\n\nThe component selects the country code of a country by default. You can change it by passing the iso2 name of a country. E.g. for United States, set `defaultCountry` to 'us'.\n\n#### onlyCountries\n\nIf you don't want all countries to be shown in the dropdown list, you can pass an array of objects representing the countries. The structure of each country object can be seen here [https://github.com/mukeshsoni/country-telephone-data/blob/master/country_telephone_data.js](https://github.com/mukeshsoni/country-telephone-data/blob/master/country_telephone_data.js)\n\nE.g.\n\n```\n\u003cReactTelInput\n    defaultCountry='us'\n    value={value}\n    onChange={onPhoneChange}\n    onlyCountries={[\n        {name: \"United States\", iso2: \"us\", dialCode: \"1\", priority: 0, format: \"+. (...) ...-....\"},\n        {name: \"Canada\", iso2: \"ca\", dialCode: \"1\", priority: 1, format: \"+. (...) ...-....\", hasAreaCodes: true},\n        {name: \"Mexico (México)\", iso2: \"mx\", dialCode: \"52\", priority: 0, format: \"+..-..-..-....\"},\n        {name: \"Brazil (Brasil)\", iso2: \"br\", dialCode: \"55\", priority: 0, format: \"+..-..-....-....\"},\n    ]}\n /\u003e\n```\n\n#### preferredCountries\n\nPreferred countries show up at the top of the list. This prop also accepts an array of country iso2 names.\n\nE.g.\n\n```\n\u003cReactTelephoneInput\n  preferredCountries={['in', 'us', 'gb']}\n  /\u003e\n```\n\n#### classNames\n\nYou can send in additional classes to be applied to the top container div of the component.\n\n#### onChange\n\nFunction, which is called whenever there is a change of value in the input box.\n\n#### onEnterKeyPress\n\nFunction, which is called when user presses the 'enter' key when the input box is in focus.\n\n#### onBlur\n\nFunction, which is called when the focus goes away from the input box.\n\n#### onFocus\n\nFunction, which is called when the input box gets the focus.\n\n#### disabled\n\nBoolean value. When set to true, the input box is disabled and clicking on flag dropdown does nothing.\n\n#### pattern\n\nString. This is passed on to the input field and works like it should for any other input field.\n\n#### inputProps\n\nObject. If you want to set some property on the input element, you can pass in an object with attributes. E.g.\n\n```javascript\nlet inputProps={\n    readOnly: true,\n    autoFocus: true\n}\n\n\u003cReactTelephoneInput inputProps={inputProps} ... /\u003e\n```\n\n#### autoComplete\n\nstring. Specify the type of autocomplete for the input element.\n\nDefault value - 'tel'\n\n#### listStyle\n\nObject. Style applied to the dropdown list container. There is a default value for it\n\n```\nlistStyle = {\n  zIndex: 20,\n  backgroundColor: 'white'\n}\n```\n\n#### listItemClassName\n\nstring. Classname which will be applied to each item in the dropdown list. The default is `country`\n\n## How to use it\n\n* If you install it from `npm install`, you can just do `var ReactTelephoneInput = require('react-telephone-input');`\n* You will need to copy flags.png from example/src folder to see the flag icons for each country.\n* Set the path to the flags image using the prop `flagsImagePath`\n\n```js\nfunction handleInputChange(telNumber, selectedCountry) {\n  console.log('input changed. number: ', telNumber, 'selected country: ', selectedCountry)\n}\n\nfunction handleInputBlur(telNumber, selectedCountry) {\n  console.log(\n    'Focus off the ReactTelephoneInput component. Tel number entered is: ',\n    telNumber,\n    ' selected country is: ',\n    selectedCountry\n  )\n}\n\n\u003cReactTelephoneInput\n  defaultCountry=\"in\"\n  flagsImagePath=\"/path/to/images/flags.png\"\n  onChange={handleInputChange}\n  onBlur={handleInputBlur}\n/\u003e\n```\n\nThe default value for `flagsImagePath` is 'flags.png'\n\n## Features\n\n* Automatically format the number as the user types\n* Navigate the country dropdown by typing a country's name, or using up/down keys\n* Selecting a country from the dropdown will update the dial code in the input\n* Typing a different dial code will automatically update the displayed flag\n* Country names in the dropdown also include localised versions in brackets\n* Dropdown appears above or below the input depending on available space/scroll position\n\n### Contributing\n\nYou can try the app by downloading everything and running the commands given below -\n\n```\n$ npm install\n$ npm start\n\ngo to your browser and type http://localhost:3000\n```\n\n### Running tests\n\n```\n$ npm run test\n$ npm run test -- --watch # to run tests in watch mode\n```\n\n[build-badge]: https://img.shields.io/travis/mukeshsoni/react-telephone-input/master.png?style=flat-square\n[build]: https://travis-ci.org/mukeshsoni/react-telephone-input\n[npm-badge]: https://img.shields.io/npm/v/react-telephone-input.svg?style=flat-square\n[npm]: https://www.npmjs.org/package/react-telephone-input\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmukeshsoni%2Freact-telephone-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmukeshsoni%2Freact-telephone-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmukeshsoni%2Freact-telephone-input/lists"}