tinyval-phone

Маски телефонов всех стран для tinyval-mask. В tinyval-mask — 28 самых нужных стран, здесь — 245: по коду, который вводит пользователь, определяется страна и её формат номера.

• Тот же API, что у phone / phoneAuto из tinyval-mask/presets — достаточно поменять импорт
• Форматы — из данных Google libphonenumber: в каждой стране номер выглядит так, как его пишут там
• Страны с общим кодом различаются: +1 242 — Багамы, +44 7797 — Джерси, +7 701 — Казахстан
• Национальная приставка не мешает: 07400 123456 в Британии → +44 7400 123456
• Иконки флагов в SVG для всех стран — грузятся по одной, в бандл попадают только нужные
• ~4 kB gzip за все страны (без флагов)

Установка

npm install tinyval-mask tinyval-phone

Попробовать

Телефон любой страны

Начните с кода страны: +81, +55, +971…

Значение без маски: ""

Шаблон:

Попробуйте:

Быстрый старт

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 …>' — иконка флага

Когда что брать

• Нужны Россия, СНГ и несколько крупных стран — хватит tinyval-mask/presets, отдельный пакет не нужен.
• Пользователи из любой страны мира или нужен список всех стран — tinyval-phone.
• Иконки флагов (эмодзи-флаги Windows не показывает) — tinyval-phone/flags, можно и вместе с масками из tinyval-mask.

Что дальше

• Страны и форматы — откуда форматы, как различаются страны с общим кодом
• Иконки флагов — SVG в <img> или разметкой, в Vue и без фреймворка
• phoneAuto — все опции
• Поле ввода и Vue — как подключить маску к полю