Your own countries & flags

Country formats and flags can be changed to suit you — the same way as error messages in tinyval: a command copies the package data into your project, you edit the file and load it once on app startup.

Countries and formats

npx tinyval-phone countries            # все 245 стран → phones/countries.ts
npx tinyval-phone countries ru kz de   # только эти страны, остальные остаются как в пакете

// phones/countries.ts
import type { Countries } from 'tinyval-phone';

export default {
  ru: ['7', '(999) 999-99-99', '[78]'],
  kz: ['7', '(999) 999-99-99', '[78]', '[67]'],
  de: ['49', '9999 9999999[9]', '0'],      // свой формат
  ab: ['7', '(999) 999-99-99', '[78]', '940'], // новая страна: +7 940…
  xk: null,                                // убрать страну
} satisfies Countries;

// main.ts — до создания масок
import { setCountries } from 'tinyval-phone';
import countries from './phones/countries';

setCountries(countries);

A country entry is [dial code, pattern after the code, national prefix, country sign]:

Part	Example	Meaning
dial code	'49'	The dial code without +
pattern	'999 9999999[9]'	9 — a digit, [9] — an optional digit, '\\9' in a string — a literal nine
prefix	'0', '[78]'	What's dialed before a local number; it's dropped: 07400… → +44 7400…
sign	'242', '…$'	For countries sharing a code: the beginning of the number without the country code or, ending with $, the whole number

The prefix and the sign are regular expressions over the digits without the country code. How countries sharing a code are told apart — in Countries & formats.

Only your countries, without the rest of the world — setCountries(countries, { replace: true }): other numbers won't be detected and won't be valid.

Flags

The command copies the SVG of the chosen flags into a module — edit the markup or replace it with your own. All flags in this file get into the bundle, so keep only the ones you change:

npx tinyval-phone flags ru kz          # → phones/flags.ts
npx tinyval-phone flags --all --svg --out public/flags   # файлы .svg — для <img> или графического редактора

// phones/flags.ts
import type { Flags } from 'tinyval-phone/flags';

export default {
  ru: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342">…</svg>',
  ab: () => import('./ab.svg?raw').then((m) => m.default), // загрузится, когда понадобится
  su: null,                                                // флага нет
} satisfies Flags;

import { setFlags } from 'tinyval-phone/flags';
import flags from './phones/flags';

setFlags(flags);

Your own flag set entirely

A function instead of an object loads any flag. If it returns undefined, the built-in flag is used. Flags set by code take priority over the function.

// например, круглые флаги с вашего CDN
setFlags((code) => fetch(`/flags/round/${code}.svg`).then((r) => (r.ok ? r.text() : undefined)));

resetFlags() brings back the built-in flags, flagCodes() lists the flags including yours.

Without a file

A couple of changes aren't worth a separate file — setCountries and setFlags take an object right in the code:

setCountries({ de: ['49', '9999 9999999[9]', '0'] });
setFlags({ ru: myRussianFlagSvg });