Gathering detailed insights and metrics for react-phone-number-input-mui
Gathering detailed insights and metrics for react-phone-number-input-mui
Installations
npm install react-phone-number-input-muiDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
8.12.0
NPM Version
6.9.0
Score
57.4
Supply Chain
89.2
Quality
70.5
Maintenance
50
Vulnerability
97
License
Releases
Unable to fetch releases
Download Statistics
Total Downloads
13,933
Last Day
1
Last Week
12
Last Month
274
Last Year
2,739
Bundle Size
277.26 kB
Minified
71.85 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.0.9
Package Id
react-phone-number-input-mui@1.0.9
Unpacked Size
16.60 MB
Size
4.48 MB
File Count
123
NPM Version
6.9.0
Node Version
8.12.0
Total Downloads
Cumulative downloads
Total Downloads
13,933
Dependencies
13
Peer Dependencies
1
Dev Dependencies
30
@storybook/addon-actions@storybook/addon-links@storybook/addons@storybook/react@types/node@types/react@types/storybook__reactautoprefixerbabel-clibabel-corebabel-loaderbabel-plugin-istanbulbabel-plugin-transform-class-propertiesbabel-plugin-transform-decorators-legacybabel-plugin-transform-object-rest-spreadbabel-preset-envbabel-preset-reactchaicross-envflag-icon-cssjson-loadermochanpm-run-allnycpostcssreactreact-domrimrafwebpackwebpack-cli
react-phone-number-input
International phone number <input/> for React (iPhone style).
Screenshots
Built-in country <select/> (with autocomplete)
Desktop
Mobile
Native <select/>
Desktop
Mobile
Usage
1import PhoneInput from 'react-phone-number-input' 2 3return ( 4 <PhoneInput 5 placeholder="Enter phone number" 6 value={ this.state.phone } 7 onChange={ phone => this.setState({ phone }) } /> 8)
The international phone number input utilizes libphonenumber-js international phone number parsing and formatting library.
The phone number <input/> itself is implemented using input-format (which has an issue with some Samsung Android phones, see the workaround).
The countries dropdown with autocomplete is taken from react-responsive-ui.
I could also easily include all country flags in a form of <svg/> React elements as part of this library but the overall size of the bundle would then be about 3 MegaBytes (yeah, those SVGs turned out to be really huge) which is too much for a website. Therefore the default behaviour is a compromise: instead of pleloading the flags for all countries in the expanded list of countries only the flag for the currently selected country is shown. This way the user only downloads a single SVG image and is not forced to download the whole international flags bundle.
CSS
The CSS files for this React component must be included on a page too.
When using Webpack
1import 'react-phone-number-input/rrui.css' 2import 'react-phone-number-input/style.css'
And set up a postcss-loader with a CSS autoprefixer for supporting old web browsers (e.g. last 2 versions, iOS >= 7, Android >= 4).
When not using Webpack
Get the rrui.css and style.css files from this package, process these files with a CSS autoprefixer for supporting old web browsers (e.g. last 2 versions, iOS >= 7, Android >= 4), and then include them on a page.
1<head> 2 <link rel="stylesheet" href="/css/react-phone-number-input/rrui.css"/> 3 <link rel="stylesheet" href="/css/react-phone-number-input/style.css"/> 4</head>
Android
There have been reports of some Samsung Android phones not handling caret positioning properly (e.g. Samsung Galaxy S8+, Samsung Galaxy S7 Edge).
The workaround is to pass smartCaret={false} property:
1import PhoneInput from 'react-phone-number-input' 2 3<PhoneInput 4 smartCaret={false} 5 value={this.state.value} 6 onChange={value => this.setState(value)}/>
smartCaret={false} caret is not as "smart" as the default one but still works good enough (and has no issues on Samsung Android phones). When erasing or inserting digits in the middle of a phone number this caret usually jumps to the end: this is the expected behaviour because the "smart" caret positioning has been turned off specifically to fix this Samsung Android phones issue.
Validation
This component is based on libphonenumber-js which is a rewrite of Google's libphonenumber library which doesn't enforce any validation rules when entering phone numbers in "as you type" mode (e.g. when phone number is too long or too short).
For the actual phone number validation use libphonenumber-js: either a loose validation via parseNumber(value) or a strict validation via isValidNumber(value).
Autocomplete
Make sure to wrap a <PhoneInput/> into a <form/> otherwise web-browser's "autocomplete" feature may not be working: a user will be selecting his phone number from the list but nothing will be happening.
Native <select/>
One can (and probably should) choose to use native HTML <select/> instead of react-responsive-ui <Select/> component, in which case use the react-phone-number-input/native export instead of the default one.
1import PhoneInput from 'react-phone-number-input/native' 2 3return ( 4 <PhoneInput 5 placeholder="Enter phone number" 6 value={ this.state.phone } 7 onChange={ phone => this.setState({ phone }) } /> 8)
Native <select/> is the recommended one because it's more light-weight and doesn't require rrui.css file. In the next major version of this library (2.x) native <select/> will be the default one.
Without country select
1import PhoneInput from `react-phone-number-input/basic-input` 2 3class Example extends Component { 4 state = { 5 value: '' 6 } 7 8 render() { 9 // If `country` property is not passed 10 // then "International" format is used. 11 return ( 12 <PhoneInput 13 country="US" 14 value={ this.state.value } 15 onChange={ value => this.setState({ value }) } /> 16 ) 17 } 18}
Bug reporting
If you think that the phone number parsing/formatting/validation engine malfunctions for a particular phone number then follow the bug reporting instructions in libphonenumber-js repo.
API
React component
The available props are
-
value— Phone number in E.164 format. E.g.+12223333333for USA. -
onChange— Updates thevalue. -
country— (optional) The country which is selected by default (can be set after a GeoIP lookup). E.g.US. -
countries— (optional) Only the specified countries will be selectable. E.g.['RU', 'KZ', 'UA']. -
flagsPath— (optional) A base URL path for national flag SVG icons. By default it loads flag icons fromflag-icon-cssgithub repo. I imagine someone might want to download those SVG flag icons and host them on their own servers instead. -
flags— (optional) Supplies<svg/>elements for flags instead of the default<img src="..."/>ones. This might be suitable if someone's making an application which is supposed to be able to work offline (a downloadable app, or an "internal" website):import flags from 'react-phone-number-input/flags'. -
flagComponent— (optional) A React component for displaying a country flag (replaces the default flag icons). -
nativeExpanded— If set totruewill render native<select/>when country select is expanded instead of the custom one (which has autocomplete feature). Deprecated. Use<PhoneInputNative/>instead. -
displayInitialValueAsLocalNumber— If set totruewill displayvaluephone number in local format when the component mounts or whenvalueproperty is set (see the example on the demo page). The default behaviour isfalsemeaning that if initialvalueis set then it will be displayed in international format. The reason for such default behaviour is that the newer generation grows up when there are no stationary phones and therefore everyone inputs phone numbers as international ones in their smartphones so people gradually get more accustomed to writing phone numbers in international form rather than in local form. -
error— aStringerror message that should be shown. -
indicateInvalid—errorwon't be shown unlessindicateInvalidistrue. The reason for this additional boolean flag is to enable some advanced ("smart") form field error indication scenarios.
For the full list of all possible props see the source code. All other properties are passed through to the <input/> component.
Localization
Country names can be passed via the labels property. E.g. labels={{ RU: 'Россия', US: 'США', ... }}. This component comes pre-packaged with a couple of ready-made translations. Submit pull requests for adding new translations.
1import ru from 'react-phone-number-input/locale/ru' 2 3<PhoneInput ... labels={ru}/>
Extensions
Some users asked for phone extension input feature. It can be activated by passing ext property (React.Element). The ext property is most likely gonna be a redux-form <Field/> (or simpler-redux-form <Field/>).
1import React, { Component } from 'react' 2import { Field, reduxForm } from 'redux-form' 3import Phone from 'react-phone-number-input' 4 5@reduxForm({ 6 form: 'contact' 7}) 8class Form extends Component { 9 render() { 10 const { handleSubmit } = this.props 11 12 const ext = ( 13 <Field 14 name="ext" 15 component="input" 16 type="number" 17 noValidate 18 className={ className } /> 19 ) 20 21 return ( 22 <form onSubmit={ handleSubmit }> 23 <Field 24 name="phone" 25 component={ Phone } 26 ext={ ext } /> 27 28 <button type="submit"> 29 Submit 30 </button> 31 </form> 32 ); 33 } 34}
The code above hasn't been tested, but it most likely works. Phone extension input will appear to the right of the phone number input. One can always skip using ext property and add a completely separate form field for phone number extension input instead.
{ number, ext } object can be converted to RFC3966 string for storing it in a database.
1import { formatRFC3966 } from 'libphonenumber-js' 2 3formatRFC3966({ number: '+12133734253', ext: '123' }) 4// 'tel:+12133734253;ext=123'
Use the accompanying parseRFC3966() function to convert an RFC3966 string into an object having shape { number, ext }.
1import { parseRFC3966 } from 'libphonenumber-js' 2 3parseRFC3966('tel:+12133734253;ext=123') 4// { number: '+12133734253', ext: '123' }
Customizing
One can use the exported <PhoneInput/> component for supplying custom country select and phone number input field components.
1import { PhoneInput } from 'react-phone-number-input' 2 3<PhoneInput countrySelectComponent={...} inputComponent={...}/>
For non-ES6-capable environment:
1const PhoneInput = require('react-phone-number-input/custom').PhoneInput
countrySelectComponent
React component for the country select. See CountrySelectNative and CountrySelectReactResponsiveUI for an example.
Receives properties:
name : string?— HTMLnameattribute.value : string?— The currently selected country code.onChange(value : string?)— Updates thevalue.options : object[]— The list of all selectable countries (including "International") each being an object of shape{ value : string?, label : string, icon : React.Component }.disabled : boolean?— HTMLdisabledattribute.tabIndex : (number|string)?— HTMLtabIndexattribute.className : string— CSS class name.
inputComponent
React component for the phone number input field. See InputSmart and InputBasic for an example.
Receives properties:
value : string— The parsed phone number. E.g.:"","+","+123","123".onChange(value : string)— Updates thevalue.country : string?— The currently selected country.undefinedmeans "International" (no country selected).metadata : object—libphonenumber-jsmetadata.- All other properties should be passed through to the underlying
<input/>.
Must also implement .focus() method.
Reducing bundle size
By default all countries are included which means that libphonenumber-js loads the default metadata having the size of 75 kilobytes. This really isn't much but for those who still want to reduce that to a lesser size by generating their own reduced metadata set there is react-phone-number-input/custom export.
1var PhoneInput = require('react-phone-number-input/custom').default 2var metadata = require('./metadata.min.json') 3 4module.exports = function Phone(props) { 5 return <PhoneInput { ...props } metadata={ metadata }/> 6}
For generating custom metadata see the guide in libphonenumber-js repo.
Module not found: Error: Can't resolve 'libphonenumber-js/metadata.min'
This error means that your Webpack is misconfigured to exclude .json file extension from the list of the resolved ones. To fix that add it back to resolve.extensions.
1{ 2 resolve: { 3 extensions: [".js", ".json", ...] 4 } 5}
If you're using Webpack 1 then upgrade to a newer version.
CDN
One can use any npm CDN service, e.g. unpkg.com or jsdelivr.net
1<!-- `libphonenumber-js` (is used internally by `react-phone-number-input`). --> 2<script src="https://unpkg.com/libphonenumber-js@1.2.15/bundle/libphonenumber-js.min.js"></script> 3 4<!-- Either `react-phone-number-input` with "native" country `<select/>`. --> 5<script src="https://unpkg.com/react-phone-number-input@1.1.12/bundle/react-phone-number-input-native.js"></script> 6 7<!-- Or `react-phone-number-input` with `react-responsive-ui` `<Select/>`. --> 8<script src="https://unpkg.com/react-phone-number-input@1.1.12/bundle/react-phone-number-input-react-responsive-ui.js"></script> 9 10<!-- Don't add this style if you're using "native" country `<select/>`. --> 11<link rel="stylesheet" href="https://unpkg.com/react-phone-number-input@1.1.12/bundle/rrui.css"/> 12 13<!-- Styles for the component. --> 14<link rel="stylesheet" href="https://unpkg.com/react-phone-number-input@1.1.12/bundle/style.css"/> 15 16<script> 17 var PhoneInput = window['react-phone-number-input'] 18</script>
Advertisement
React Responsive UI component library.
License
No vulnerabilities found.
No security vulnerabilities found.