React-Phone-Input-2

Highly customizable phone input component with auto formatting.

Installation

1npm install react-phone-input-2 --save

Usage

1import PhoneInput from 'react-phone-input-2'
2import 'react-phone-input-2/lib/style.css'
3
4<PhoneInput
5  country={'us'}
6  value={this.state.phone}
7  onChange={phone => this.setState({ phone })}
8/>

available styles - style • high-res • material • bootstrap • semantic-ui • plain

Demo 1 (UI) - Demo 2 (CSS)

Options

1<PhoneInput
2  inputProps={{
3    name: 'phone',
4    required: true,
5    autoFocus: true
6  }}
7/>

Contents

• Style
• Events
• Regions
• Localization
• Local area codes
• Custom masks
• Custom area codes
• Other props
• Custom localization
• Guides
  • Phone without dialCode
  • Check validity of the phone number
  • CDN
• Contributing
• Support

Style

Events

onChange(value, country, e, formattedValue)

Country data object not returns from onKeyDown event

Regions

1<PhoneInput
2  country='de'
3  regions={'europe'}
4/>
5
6<PhoneInput
7  country='us'
8  regions={['north-america', 'carribean']}
9/>

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

1import es from 'react-phone-input-2/lang/es.json'
2
3<PhoneInput
4  localization={es}
5/>

Local area codes

1<PhoneInput
2  enableAreaCodes={true}
3  enableAreaCodes={['us', 'ca']}
4  enableAreaCodeStretch
5/>

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

1<PhoneInput
2  onlyCountries={['fr', 'at']}
3  masks={{fr: '(...) ..-..-..', at: '(....) ...-....'}}
4/>

Custom area codes

1<PhoneInput
2  onlyCountries={['gr', 'fr', 'us']}
3  areaCodes={{gr: ['2694', '2647'], fr: ['369', '463'], us: ['300']}}
4/>

Other props

Custom localization

1<PhoneInput
2  onlyCountries={['de', 'es']}
3  localization={{de: 'Deutschland', es: 'España'}}
4/>
5
6<PhoneInput
7  onlyCountries={['de', 'es']}
8  localization={{'Germany': 'Deutschland', 'Spain': 'España'}}
9/>

Preserve countries order

1<PhoneInput
2  onlyCountries={['fr', 'at']}
3  preserveOrder={['onlyCountries', 'preferredCountries']}
4/>

Guides

Phone without dialCode

1handleOnChange(value, data, event, formattedValue) {
2  this.setState({ rawPhone: value.slice(data.dialCode.length) })
3}

Check validity of the phone number

isValid(value, country, countries, hiddenAreaCodes)

1<PhoneInput
2  isValid={(value, country) => {
3    if (value.match(/12345/)) {
4      return 'Invalid value: '+value+', '+country.name;
5    } else if (value.match(/1234/)) {
6      return false;
7    } else {
8      return true;
9    }
10  }}
11/>

1import startsWith from 'lodash.startswith';
2
3<PhoneInput
4  isValid={(inputNumber, country, countries) => {
5    return countries.some((country) => {
6      return startsWith(inputNumber, country.dialCode) || startsWith(country.dialCode, inputNumber);
7    });
8  }}
9/>

Clear country

To clear country, pass null as value.

Dynamic placeholder

1const phoneCountryFormat = useMemo(() => phoneCountry?.format || undefined, [phoneCountry]);
2const placeholder = useMemo(() => {
3  if (phoneCountryFormat) {
4    const words = phoneCountryFormat.split(' ');
5    words.shift(); // I'm using only local numbers so here I remove the country code from the format
6    let text = words.join(' ');
7     // first digit is special on french numbers, these 3 lines could be removed
8    if (country === 'fr') {
9      text = text.replace('.', '6');
10    }
11    while (text.indexOf('.') > -1) {
12      text = text.replace('.', `${Math.min(9, Math.max(1, Math.floor(Math.random() * 10)))}`);
13    }
14    return text;
15  }
16  return '';
17}, [phoneCountryFormat, country]);

CDN

1<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