React-Phone-Input-labelled

react-phone-input-2 with Material-UI 'like' label

Highly customizable phone input component with auto formatting.

Original look

With a Material-UI TextField look:

Installation

npm install react-phone-input-labelled --save

Usage

import PhoneInput from "react-phone-input-labelled";
import "react-phone-input-labelled/dist/style.css";

<PhoneInput
  defaultCountry={"us"}
  value={this.state.phone}
  onChange={handleOnChange}
/>;

handleOnChange(value) {
  this.setState({ phone: value })
}

Options

<PhoneInput
  inputExtraProps={{
    name: "phone",
    required: true,
    autoFocus: true
  }}
/>

Contents

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

Style

Events

Country data object does not return from onKeyDown event

Regions

Regions selected: {'europe'}

<PhoneInput defaultCountry="it" regions={"europe"} />

Regions selected: {['north-america', 'carribean']}

<PhoneInput defaultCountry="ca" regions={["north-america", "carribean"]} />

Custom area codes

<PhoneInput
  onlyCountries={["gr", "fr", "us"]}
  areaCodes={{ gr: ["2694", "2647"], fr: ["369", "463"], us: ["300"] }}
/>

Custom masks

<PhoneInput
  onlyCountries={["fr", "at"]}
  masks={{ fr: "+.. (...) ..-..-..", at: "+.. (....) ...-...." }}
/>

Localization

<PhoneInput
  onlyCountries={['de', 'es']}
  localization={{de: 'Deutschland', es: 'España'}}
/>

<PhoneInput
  onlyCountries={['de', 'es']}
  localization={{'Germany': 'Deutschland', 'Spain': 'España'}}
/>

Predefined translations es, de, ru, fr

import es from "lang/es.json";

<PhoneInput localization={es} />;

Preserve countries order

<PhoneInput
  onlyCountries={["fr", "at"]}
  preserveOrder={["onlyCountries", "preferredCountries"]}
/>

Other props

Guides

Phone without dialCode

handleOnChange(value, data) {
  this.setState({ rawPhone: value.replace(/[^0-9]+/g,'').slice(data.dialCode.length) })
}

Check validity of the phone number

<PhoneInput isValid={v => v === "1"} />

Contributing

Code style changes not allowed

License

Based on react-phone-input-2