Gathering detailed insights and metrics for react-telephone-input
Gathering detailed insights and metrics for react-telephone-input
React component for entering and validating international telephone numbers
Installations
npm install react-telephone-inputDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
14.0.0
NPM Version
6.14.4
Score
90
Supply Chain
98.2
Quality
74.7
Maintenance
100
Vulnerability
99.3
License
Releases
2
Languages
5
Less
TypeScript
JavaScript
CSS
HTML
Less (32.65%)
TypeScript (26.64%)
JavaScript (20.59%)
CSS (19.34%)
HTML (0.78%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
266 Stars
427 Commits
166 Forks
7 Watchers
22 Branches
25 Contributors
Updated on Aug 12, 2024
Maintainers
1
Package Meta Information
Latest Version
5.0.0
Package Id
react-telephone-input@5.0.0
Size
61.14 kB
NPM Version
6.14.4
Node Version
14.0.0
Published on
May 02, 2020
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
11
Peer Dependencies
1
Dev Dependencies
31
@babel/core@babel/plugin-proposal-class-properties@babel/preset-env@babel/preset-react@testing-library/react@types/jest@typescript-eslint/eslint-plugin@typescript-eslint/parserawesome-typescript-loaderbabel-eslintbabel-jestbabel-plugin-remove-data-test-id-attributeeslinteslint-config-airbnbeslint-plugin-importeslint-plugin-jesteslint-plugin-jsx-a11yeslint-plugin-reactgenerate-changeloggh-pageshuskyjestlint-stagednwbprettierreactreact-domregenerator-runtimets-jesttsdxtypescript
Reactjs Component for International Telephone Input
IMP: From 5.*, the withStyles file will not be bundled in dist. If you want to use the css, you can import the css file directly to your module -
1import 'react-telephone-input/css/default.css'
IMP: From 3.*, the styles won't be included by default. Can use require('react-telephone-input/lib/withStyles') to get the styles.
Inspired from the awesome jquery plugin for International Telephone Input.
This one is written as a reactjs component.
Live Demo here - http://unstack.in/react-telephone-input/
1function handleInputChange(telNumber, selectedCountry) { 2 console.log('input changed. number: ', telNumber, 'selected country: ', selectedCountry); 3} 4 5// Use declaratively within another react components render method 6var ReactTelInput = require('react-telephone-input'); 7// var ReactTelInput = require('react-telephone-input/lib/withStyles'), if you need the styles 8 9<MyAwesomeReactComponent> 10 <ReactTelInput 11 defaultCountry="in" 12 flagsImagePath='/path/to/images/flags.png' 13 onChange={handleInputChange} 14 onBlur={handleInputBlur} 15 /> 16</MyAwesomeReactComponent> 17 18// or render standalone 19var ReactTelInput = require('react-telephone-input'); 20React.render(<ReactTelInput 21 defaultCountry="in" 22 flagsImagePath='/path/to/images/flags.png' 23 onChange={handleInputChange} 24 onBlur={handleInputBlur} 25 />, 26 document.getElementById('my-container'));
The component accepts other props to customize it -
value and initialValue
Both the props have the same purpose - for setting the initial value of the input programatically.
initialValue
See value above.
autoFormat
true by default. Setting it to false will turn off all auto formatting.
defaultCountry
The 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'.
onlyCountries
If 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
E.g.
<ReactTelInput
defaultCountry='us'
value={value}
onChange={onPhoneChange}
onlyCountries={[
{name: "United States", iso2: "us", dialCode: "1", priority: 0, format: "+. (...) ...-...."},
{name: "Canada", iso2: "ca", dialCode: "1", priority: 1, format: "+. (...) ...-....", hasAreaCodes: true},
{name: "Mexico (México)", iso2: "mx", dialCode: "52", priority: 0, format: "+..-..-..-...."},
{name: "Brazil (Brasil)", iso2: "br", dialCode: "55", priority: 0, format: "+..-..-....-...."},
]}
/>
preferredCountries
Preferred countries show up at the top of the list. This prop also accepts an array of country iso2 names.
E.g.
<ReactTelephoneInput
preferredCountries={['in', 'us', 'gb']}
/>
classNames
You can send in additional classes to be applied to the top container div of the component.
onChange
Function, which is called whenever there is a change of value in the input box.
onEnterKeyPress
Function, which is called when user presses the 'enter' key when the input box is in focus.
onBlur
Function, which is called when the focus goes away from the input box.
onFocus
Function, which is called when the input box gets the focus.
disabled
Boolean value. When set to true, the input box is disabled and clicking on flag dropdown does nothing.
pattern
String. This is passed on to the input field and works like it should for any other input field.
inputProps
Object. If you want to set some property on the input element, you can pass in an object with attributes. E.g.
1let inputProps={ 2 readOnly: true, 3 autoFocus: true 4} 5 6<ReactTelephoneInput inputProps={inputProps} ... />
autoComplete
string. Specify the type of autocomplete for the input element.
Default value - 'tel'
listStyle
Object. Style applied to the dropdown list container. There is a default value for it
listStyle = {
zIndex: 20,
backgroundColor: 'white'
}
listItemClassName
string. Classname which will be applied to each item in the dropdown list. The default is country
How to use it
- If you install it from
npm install, you can just dovar ReactTelephoneInput = require('react-telephone-input'); - You will need to copy flags.png from example/src folder to see the flag icons for each country.
- Set the path to the flags image using the prop
flagsImagePath
1function handleInputChange(telNumber, selectedCountry) { 2 console.log('input changed. number: ', telNumber, 'selected country: ', selectedCountry) 3} 4 5function handleInputBlur(telNumber, selectedCountry) { 6 console.log( 7 'Focus off the ReactTelephoneInput component. Tel number entered is: ', 8 telNumber, 9 ' selected country is: ', 10 selectedCountry 11 ) 12} 13 14<ReactTelephoneInput 15 defaultCountry="in" 16 flagsImagePath="/path/to/images/flags.png" 17 onChange={handleInputChange} 18 onBlur={handleInputBlur} 19/>
The default value for flagsImagePath is 'flags.png'
Features
- Automatically format the number as the user types
- Navigate the country dropdown by typing a country's name, or using up/down keys
- Selecting a country from the dropdown will update the dial code in the input
- Typing a different dial code will automatically update the displayed flag
- Country names in the dropdown also include localised versions in brackets
- Dropdown appears above or below the input depending on available space/scroll position
Contributing
You can try the app by downloading everything and running the commands given below -
$ npm install
$ npm start
go to your browser and type http://localhost:3000
Running tests
$ npm run test
$ npm run test -- --watch # to run tests in watch mode
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 0/19 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 13 are checked with a SAST tool
Reason
131 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-p28h-cc7q-c4fg
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
- Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-j4f2-536g-r55m
- Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
- Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-2j2x-2gpw-g8fm
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
- Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
- Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-7x7c-qm48-pq9c
- Warn: Project is vulnerable to: GHSA-rc3x-jf5g-xvc5
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-82v2-mx6x-wq7q
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
- Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-6fx8-h7jm-663j
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
- Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
- Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
- Warn: Project is vulnerable to: GHSA-fxwf-4rqh-v8g3
- Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
- Warn: Project is vulnerable to: GHSA-xfhh-g9f5-x4m4
- Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq
- Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
- Warn: Project is vulnerable to: GHSA-c9g6-9335-x697
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
- Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-mgfv-m47x-4wqp
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-72mh-269x-7mh5
- Warn: Project is vulnerable to: GHSA-h4j5-c7cj-74xg
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
2
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More