React-Phone-Input-2
DONATIONS / FUNDING NEEDED
bitcoin bc1qa7q6gf9e06ssqrc46j5lekq886rlyyk6sdhjj0ethereum 0x2b9429a7362a9b14f3d84a408d33caab29bdc225
Highly customizable phone input component with auto formatting.
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'
<PhoneInput
country={'us'}
value={this.state.phone}
onChange={phone => this.setState({ phone })}
/>
available styles - style • high-res • material • bootstrap • semantic-ui • plainDemo 1 (UI) - Demo 2 (CSS)
Options
<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
Style
Events
onChange(value, country, e, formattedValue)
Country data object not returns from onKeyDown event
Regions
<PhoneInput
country='de'
regions={'europe'}
/>
<PhoneInput
country='us'
regions={['north-america', 'carribean']}
/>
Predefined localization
es
Spanish, de
Deutsch, ru
Russian, fr
Frenchjp
Japanese, cn
Chinese, pt
Portuguese, it
Italianir
Iranian, ar
Arabic, tr
Turkish, id
Indonesianhu
Hungarian, pl
Polish, ko
Koreanimport es from 'react-phone-input-2/lang/es.json'
<PhoneInput
localization={es}
/>
Local area codes
<PhoneInput
enableAreaCodes={true}
enableAreaCodes={['us', 'ca']}
enableAreaCodeStretch
/>
Flexible mask
IfenableAreaCodeStretch
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
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 clearcountry
, pass null
as value
.Dynamic placeholder
Showconst 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
<script src="https://unpkg.com/react-phone-input-2@2.x/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
Make sure you donated for lib maintenance