Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bl00mber/react-phone-input-2
:telephone_receiver: Highly customizable phone input component with auto formatting
https://github.com/bl00mber/react-phone-input-2
bootstrap format i18n input international javascript localized material-ui mobile number phone react tel telephone
Last synced: 7 days ago
JSON representation
:telephone_receiver: Highly customizable phone input component with auto formatting
- Host: GitHub
- URL: https://github.com/bl00mber/react-phone-input-2
- Owner: bl00mber
- License: mit
- Created: 2017-09-04T15:51:18.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-03-20T09:48:10.000Z (4 months ago)
- Last Synced: 2024-05-16T13:02:26.745Z (about 2 months ago)
- Topics: bootstrap, format, i18n, input, international, javascript, localized, material-ui, mobile, number, phone, react, tel, telephone
- Language: JavaScript
- Homepage: https://bl00mber.github.io/react-phone-input-2.html
- Size: 1.56 MB
- Stars: 925
- Watchers: 9
- Forks: 527
- Open Issues: 249
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- docsify-awesome-stars - bl00mber/react-phone-input-2 - :telephone_receiver: Highly customizable phone input component with auto formatting (JavaScript)
- awesome-stars - bl00mber/react-phone-input-2 - :telephone_receiver: Highly customizable phone input component with auto formatting (JavaScript)
- awesome-jekyll - bl00mber/react-phone-input-2 - :telephone_receiver: Highly customizable phone input component with auto formatting (JavaScript)
README
# React-Phone-Input-2
Highly customizable phone input component with auto formatting.
[](https://www.npmjs.com/package/react-phone-input-2)
[](https://www.npmjs.com/package/react-phone-input-2)
[](https://github.com/bl00mber/react-phone-input-2#contributing)
[](https://travis-ci.org/bl00mber/react-phone-input-2)
## Installation
```shell-script
npm install react-phone-input-2 --save
```
## Usage
```jsx
import PhoneInput from 'react-phone-input-2'
import 'react-phone-input-2/lib/style.css'
this.setState({ phone })}
/>
```
**available styles** - style • high-res • material • bootstrap • semantic-ui • plain
#### [Demo 1 (UI)](https://bl00mber.github.io/react-phone-input-2.html) - [Demo 2 (CSS)](https://bl00mber.github.io/react-phone-input-2-css.html)
## 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
```jsx
```
### Contents
- [Style](#style)
- [Events](#events)
- [Regions](#regions)
- [Localization](#predefined-localization)
- [Local area codes](#local-area-codes)
- [Custom masks](#custom-masks)
- [Custom area codes](#custom-area-codes)
- [Other props](#other-props)
- [Custom localization](#custom-localization)
- [Guides](#guides)
- [Phone without dialCode](#phone-without-dialcode)
- [Check validity of the phone number](#check-validity-of-the-phone-number)
- [CDN](#cdn)
- [Contributing](#contributing)
- [Support](https://www.paypal.me/bloomber/20)
### 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']
```jsx
```
### 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
`hu` Hungarian, `pl` Polish, `ko` Korean
```jsx
import es from 'react-phone-input-2/lang/es.json'
```
### Local area codes
```jsx
```
#### 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
```jsx
```
### Custom area codes
```jsx
```
### 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
```jsx
```
### Preserve countries order
```jsx
```
## Guides
### Phone without dialCode
```jsx
handleOnChange(value, data, event, formattedValue) {
this.setState({ rawPhone: value.slice(data.dialCode.length) })
}
```
### Check validity of the phone number
`isValid(value, country, countries, hiddenAreaCodes)`
```jsx
{
if (value.match(/12345/)) {
return 'Invalid value: '+value+', '+country.name;
} else if (value.match(/1234/)) {
return false;
} else {
return true;
}
}}
/>
```
```jsx
import startsWith from 'lodash.startswith';
{
return countries.some((country) => {
return startsWith(inputNumber, country.dialCode) || startsWith(country.dialCode, inputNumber);
});
}}
/>
```
### Clear country
To clear `country`, pass `null` as `value`.
### Dynamic placeholder
Show
```jsx
const phoneCountryFormat = useMemo(() => phoneCountry?.format || undefined, [phoneCountry]);
const placeholder = useMemo(() => {
if (phoneCountryFormat) {
const words = phoneCountryFormat.split(' ');
words.shift(); // I'm using only local numbers so here I remove the country code from the format
let text = words.join(' ');
// first digit is special on french numbers, these 3 lines could be removed
if (country === 'fr') {
text = text.replace('.', '6');
}
while (text.indexOf('.') > -1) {
text = text.replace('.', `${Math.min(9, Math.max(1, Math.floor(Math.random() * 10)))}`);
}
return text;
}
return '';
}, [phoneCountryFormat, country]);
```
### CDN
```html
```
## 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
[](https://github.com/bl00mber/react-phone-input-2/blob/master/LICENSE)
Based on [react-phone-input](https://github.com/razagill/react-phone-input)
Make sure you donated for lib maintenance [](https://www.paypal.me/bloomber/20)