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

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