simple-phone-number-input

Simple input field to format international phone numbers inspired by VuePhoneNumberInput. Made with VueJS 💚

📦 Third party packages

✔ v-mask 💚

✔ libphonenumber-js

🕹 DEMO

Feel free to play with it

Demo code

Installation

Using yarn

yarn add simple-phone-number-input

Using npm

npm i --save simple-phone-number-input

Usage

ES6 Modules / CommonJS

import SimplePhoneNumberInput from "simple-phone-number-input";
import "simple-phone-number-input/dist/simple-phone-number-input.css";

Vue.use(SimplePhoneNumberInput);

<simple-phone-number-input v-model="yourValue" />

Props API

Props	Type	Required	Default
v-model	String	true	-
locale	String	false	'es'
default-country-code	String	false	'sv'
input-class *	String	false	-
selector-class *	String	false	-
no-dial-code	Boolean	false	false
no-country-selector	Boolean	false	false

* These properties are used to apply custom or framework css classes.

Events API

Event	Return
onFormatted	- emitted when new value is enter on phone number input and return an object of different formatted phone number values (1)
(1) - Example of object returned when onFormatted event is emitted:

{
  phoneNumberExample: "70123456",
  countryCode: "SV",
  countryCallingCode: "503",
  nationalNumber: "72665487",
  internationalNumber: "+50372665487",
  isValid: true
}

Object properties definition

Property	Type	Description
phoneNumberExample	String	Local phone number example of the selected country
countryCode	String	Selected country code ISO 3166-1 alpha-2
countryCallingCode	String	Selected country calling code
nationalNumber	String	Formatted national phone number
internationalNumber	String	Formatted international phone number
isValid	Boolean	Validation result of the current phone number. Check libphonenumber-js for more info: isValid()

Named slots

Slot	Action
label	Override the current label for the phone number input. Supported languages: spanish and english.

✌ Contributing

If you have any suggestions, problems or ideas feel free to add a new issue

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Lints and fixes files

npm run lint

License

This project is licensed under MIT License