React Phone Input

Highly customizable phone input component with auto formatting.

Installation

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

Usage

1import PhoneInput from 'react-ui-phone-input'
2import 'react-ui-phone-input/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

• React Phone Input
  • Installation
  • Usage - [Demo 1 (UI) - Demo 2 (CSS)](#demo-1-ui---demo-2-css)
  • Options
    • Contents
    • Style
    • Events
    • Regions
    • Predefined localization
    • Local area codes
      • Flexible mask
    • Custom masks
    • Custom area codes
    • Other props
    • Custom localization
    • Preserve countries order
  • Guides
    • Phone without dialCode
    • Check validity of the phone number
    • Clear country
    • Dynamic placeholder
  • Contributing
  • License

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-ui-phone-input/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]);

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 & Based on react-phone-input-2