tinyval-phone

Phone masks for every country for tinyval-mask. tinyval-mask has the 28 most needed countries, this package has 245: the country and its number format are detected by the code the user types.

• The same API as phone / phoneAuto from tinyval-mask/presets — just change the import
• Formats come from Google libphonenumber data: in every country the number looks the way it's written there
• Countries sharing a code are told apart: +1 242 is the Bahamas, +44 7797 is Jersey, +7 701 is Kazakhstan
• The national prefix doesn't get in the way: 07400 123456 in the UK → +44 7400 123456
• SVG flag icons for every country — loaded one by one, only the needed ones get into the bundle
• ~4 kB gzip for all countries (without flags)

Install

npm install tinyval-mask tinyval-phone

Try it

Phone of any country

Start with the country code: +81, +55, +971…

Unmasked value: ""

Template:

Try:

Quick start

import { mask, unmask } from 'tinyval-mask';
import { phoneAuto, phone, countryName } from 'tinyval-phone';
import { loadFlag } from 'tinyval-phone/flags';

const tel = phoneAuto({ defaultCountry: 'ru' });
mask('+81 9012345678', tel);       // '+81 90-1234-5678'
mask('89991234567', tel);          // '+7 (999) 123-45-67'
unmask('+81 90-1234-5678', tel);   // '819012345678'
tel.country('+1 242 359 1234');    // { code: 'bs', dial: '1', flag: '🇧🇸' }
countryName('bs', 'ru');           // 'Багамы'

mask('0612345678', phone('fr'));   // '+33 6 12 34 56 78'
await loadFlag('bs');              // '<svg …>' — иконка флага

What to use when

• You need Russia, the CIS and a few large countries — tinyval-mask/presets is enough, no extra package needed.
• Users from anywhere in the world, or you need a list of all countries — tinyval-phone.
• Flag icons (Windows doesn't show flag emoji) — tinyval-phone/flags, also together with masks from tinyval-mask.

What's next

• Countries & formats — where formats come from, how countries sharing a code are told apart
• Flag icons — SVG in <img> or as markup, in Vue and without a framework
• phoneAuto — all options
• Input field and Vue — how to bind a mask to a field