bl00mber / React Phone Input 2
Licence: mit
📞 Highly customizable phone input component with auto formatting
Stars: ✭ 446
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Phone Input 2
vue-translated
Internationalization (i18n) and localization (l10n) library for Vue.js v2.
Stars: ✭ 19 (-95.74%)
Mutual labels: i18n, format, number
Vue Phone Number Input
A phone number input made with Vue JS (format & valid phone number)
Stars: ✭ 407 (-8.74%)
Mutual labels: phone, input, number
Translatedjs
Internationalization and localization for JavaScript and Node.js
Stars: ✭ 17 (-96.19%)
Mutual labels: i18n, format, number
Vue Tel Input
International Telephone Input with Vue https://educationlink.github.io/vue-tel-input/
Stars: ✭ 443 (-0.67%)
Mutual labels: phone, input
PhoneNumberKit
Android Kotlin library to parse and format international phone numbers. Country code picker.
Stars: ✭ 124 (-72.2%)
Mutual labels: phone, number
spring-javafx-material-design-admin
Aplicação desktop para Gerenciamento de estoque e vendas com Spring Boot, JavaFX e Material Design
Stars: ✭ 56 (-87.44%)
Mutual labels: i18n, material-ui
yup-phone
☎️ Adds a phone number validation check to yup validator using google-libphonenumber
Stars: ✭ 219 (-50.9%)
Mutual labels: phone, number
yii2-number
A number format mask control and input for Yii2 Framework
Stars: ✭ 22 (-95.07%)
Mutual labels: format, number
react-numeric
A react component for formatted number form fields
Stars: ✭ 30 (-93.27%)
Mutual labels: input, number
React Native Phone Input
Phone input box for React Native
Stars: ✭ 356 (-20.18%)
Mutual labels: phone, input
numberbox-card
Replace input_number sliders with plus and minus buttons
Stars: ✭ 61 (-86.32%)
Mutual labels: input, number
Cht Core
The CHT Core Framework makes it faster to build responsive, offline-first digital health apps that equip health workers to provide better care in their communities. It is a central resource of the Community Health Toolkit.
Stars: ✭ 354 (-20.63%)
Mutual labels: phone, mobile
Motherplate
A bare bones responsive SCSS boilerplate for web designers
Stars: ✭ 392 (-12.11%)
Mutual labels: mobile, bootstrap
bcp-47-normalize
Normalize, canonicalize, and format BCP 47 tags
Stars: ✭ 16 (-96.41%)
Mutual labels: i18n, format
awrora-starter
Landing page template built with one of most popular javascript library Vue.JS, Vuetify (Material Design) and Nuxt.JS with SSR.
Stars: ✭ 38 (-91.48%)
Mutual labels: i18n, material-ui
phonenumber
With a given country and phone number, validate and format the MOBILE phone number to E.164 standard
Stars: ✭ 108 (-75.78%)
Mutual labels: phone, number
File Upload With Preview
🖼 A simple file-upload utility that shows a preview of the uploaded image. Written in pure JavaScript. No dependencies. Works well with Bootstrap 4 or without a framework.
Stars: ✭ 352 (-21.08%)
Mutual labels: input, bootstrap
React-Phone-Input-2
Highly customizable phone input component with auto formatting.
Installation
npm install react-phone-input-2 --save
Usage
import PhoneInput from 'react-phone-input-2'
import 'react-phone-input-2/lib/style.css'
<PhoneInput
country={'us'}
value={this.state.phone}
onChange={phone => this.setState({ phone })}
/>
available styles - style • high-res • material • bootstrap • semantic-ui • plain
Demo 1 (UI) - Demo 2 (CSS)
Options
Name | Type | Description | Example |
---|---|---|---|
country | string | initial country | 'us' | 1 |
value | string | input state value | |
onlyCountries | array | country codes to be included | ['cu','cw','kz'] |
preferredCountries | array | country codes to be at the top | ['cu','cw','kz'] |
excludeCountries | array | array of country codes to be excluded | ['cu','cw','kz'] |
placeholder | string | custom placeholder | |
inputProps | object | props to pass into the input |
Booleans | Default | Description |
---|---|---|
autoFormat | true | on/off phone formatting |
disabled | false | disable input and dropdown |
disableDropdown | false | disable dropdown only |
disableCountryCode | false | |
enableAreaCodes | false | enable local codes for all countries |
enableTerritories | false | enable dependent territories with population of ~100,000 or lower |
enableLongNumbers | false | boolean/number |
countryCodeEditable | true | |
enableSearch | false | enable search in the dropdown |
disableSearchIcon | false | hide icon for the search field |
<PhoneInput
inputProps={{
name: 'phone',
required: true,
autoFocus: true
}}
/>
Contents
- Style
- Events
- Regions
- Localization
- Local area codes
- Custom masks
- Custom area codes
- Other props
- Custom localization
- Guides
- Contributing
- Support
Style
containerClass | string | class for container | |
inputClass | string | class for input | |
buttonClass | string | class for dropdown button | |
dropdownClass | string | class for dropdown container | |
searchClass | string | class for search field | |
containerStyle | object | styles for container | |
inputStyle | object | styles for input | |
buttonStyle | object | styles for dropdown button | |
dropdownStyle | object | styles for dropdown container | |
searchStyle | object | styles for search field |
Events
onChange | onFocus | onBlur | onClick | onKeyDown |
onChange(value, country, e, formattedValue)
Country data object not returns from onKeyDown event
Data | Type | Description |
---|---|---|
value/event | string/object | event or the phone number |
country data | object | country object { name, dialCode, countryCode (iso2) } |
Regions
Name | Type | Description |
---|---|---|
regions | array/string | to show countries only from specified regions |
Regions |
---|
['america', 'europe', 'asia', 'oceania', 'africa'] |
Subregions |
['north-america', 'south-america', 'central-america', 'carribean', 'eu-union', 'ex-ussr', 'ex-yugos', 'baltic', 'middle-east', 'north-africa'] |
<PhoneInput
country='de'
regions={'europe'}
/>
<PhoneInput
country='us'
regions={['north-america', 'carribean']}
/>
Predefined localization
es
Spanish, de
Deutsch, ru
Russian, fr
French
jp
Japanese, cn
Chinese, pt
Portuguese, it
Italian
ir
Iranian, ar
Arabic, tr
Turkish, id
Indonesian
import es from 'react-phone-input-2/lang/es.json'
<PhoneInput
localization={es}
/>
Local area codes
<PhoneInput
enableAreaCodes={true}
enableAreaCodes={['us', 'ca']}
enableAreaCodeStretch
/>
Flexible mask
If enableAreaCodeStretch
is added, the part of the mask with the area code will not stretch to length of the respective section of phone mask.
Example: +61 (2), +61 (02)
Custom masks
<PhoneInput
onlyCountries={['fr', 'at']}
masks={{fr: '(...) ..-..-..', at: '(....) ...-....'}}
/>
Custom area codes
<PhoneInput
onlyCountries={['gr', 'fr', 'us']}
areaCodes={{gr: ['2694', '2647'], fr: ['369', '463'], us: ['300']}}
/>
Other props
defaultMask | ... ... ... ... .. |
alwaysDefaultMask | false |
prefix | + |
searchPlaceholder | 'search' |
searchNotFound | 'No entries to show' |
copyNumbersOnly | true |
renderStringAsFlag | string |
autocompleteSearch | false |
jumpCursorToEnd | false |
priority | {{ca: 0, us: 1, kz: 0, ru: 1}} |
enableClickOutside | true |
showDropdown | false |
defaultErrorMessage | string |
specialLabel | string |
disableInitialCountryGuess | false |
disableCountryGuess | false |
Custom localization
<PhoneInput
onlyCountries={['de', 'es']}
localization={{de: 'Deutschland', es: 'España'}}
/>
<PhoneInput
onlyCountries={['de', 'es']}
localization={{'Germany': 'Deutschland', 'Spain': 'España'}}
/>
Preserve countries order
<PhoneInput
onlyCountries={['fr', 'at']}
preserveOrder={['onlyCountries', 'preferredCountries']}
/>
Guides
Phone without dialCode
handleOnChange(value, data, event, formattedValue) {
this.setState({ rawPhone: value.slice(data.dialCode.length) })
}
Check validity of the phone number
isValid(value, country, countries, hiddenAreaCodes)
<PhoneInput
isValid={(value, country) => {
if (value.match(/12345/)) {
return 'Invalid value: '+value+', '+country.name;
} else if (value.match(/1234/)) {
return false;
} else {
return true;
}
}}
/>
import startsWith from 'lodash.startswith';
<PhoneInput
isValid={(inputNumber, country, countries) => {
return countries.some((country) => {
return startsWith(inputNumber, country.dialCode) || startsWith(country.dialCode, inputNumber);
});
}}
/>
Clear country
To clear country
, pass null
as value
.
CDN
<script src="https://unpkg.com/[email protected]/dist/lib.js"></script>
Contributing
- Code style changes not allowed
- Do not create issues about incorrect or missing country masks (of already present countries) or absent area codes (they will be closed). Only create issues if the subject is an actual mechanism that is not present in the component. Otherwise create a PR with a link that proves the correctness of your newly suggested mask or list of area codes
- Do not send new languages
License
Based on react-phone-input
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].