Skip to content

Instantly share code, notes, and snippets.

@josippapez

josippapez/PhoneInput.tsx

Last active November 3, 2024 14:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save josippapez/c4ed00982e15aff7b523e2c99543cdc4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save josippapez/c4ed00982e15aff7b523e2c99543cdc4 to your computer and use it in GitHub Desktop.
Download ZIP
PhoneInput
Raw
PhoneInput.tsx
​'use client';
import clsx from 'clsx';
import {
ChangeEvent,
InputHTMLAttributes,
forwardRef,
useEffect,
useState,
} from 'react';
import rawCountries from './rawCountries';
import rawTerritories from './rawTerritories';
interface PhoneInputProps {
searchPlaceholder: string;
inputClass: string;
buttonClass: string;
dropdownClass: string;
searchClass: string;
containerClass: string;
isValid?: boolean;
onInputBlur?: (value: string) => void;
onInputChange?: (value: string, dialCode: string) => void;
currentValue?: string;
currentCountry?: string;
}
type Country = {
name: string;
iso2: string;
dialCode: string;
flagLocation?: string;
};
export const PhoneInput = forwardRef<
HTMLInputElement,
PhoneInputProps & InputHTMLAttributes<HTMLInputElement>
>(
(
{
searchPlaceholder,
inputClass,
buttonClass,
dropdownClass,
searchClass,
containerClass,
isValid,
onInputBlur,
onInputChange,
currentValue,
currentCountry,
...rest
},
ref,
) => {
const [selectedCountry, setSelectedCountry] = useState<Country | undefined>(
{
name: 'United States',
iso2: 'us',
dialCode: '1',
flagLocation: '-168px -336px',
},
);
const [searchTerm, setSearchTerm] = useState<string>('');
const [showDropdown, setShowDropdown] = useState<boolean>(false);
const countryList = [...rawCountries, ...rawTerritories];
const handleCountrySelect = (country: Country) => {
const numberWithoutDialCode = currentValue?.replace(
`+${selectedCountry?.dialCode}`,
'',
);
const newNumber = `+${country.dialCode}${numberWithoutDialCode}`;
onInputBlur?.(newNumber);
setSelectedCountry(country);
setSearchTerm('');
setShowDropdown(false);
};
const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
setSearchTerm(e.target.value);
};
const handleInputFocus = () => {
if (!selectedCountry) setShowDropdown(true);
};
const dialNumber = `${
selectedCountry?.dialCode ? '+' + selectedCountry.dialCode : ''
}`;
const handlePhoneInputChange = (e: ChangeEvent<HTMLInputElement>) => {
onInputChange?.(e.target.value, selectedCountry?.dialCode || '');
};
useEffect(() => {
if (currentCountry) {
const country = countryList.find(
(c) => c.iso2 === currentCountry.toLocaleLowerCase(),
);
setSelectedCountry(country);
}
}, [currentCountry]);
return (
<div className={containerClass}>
<button
type="button"
className={clsx(
'flex w-fit gap-1',
buttonClass,
!isValid ? '!border-r-0 !border-error' : 'border-input-border',
)}
onClick={() => {
setShowDropdown(!showDropdown);
}}
>
<div
className="h-5 w-[25px] bg-no-repeat"
style={
selectedCountry?.iso2
? {
backgroundImage: `url(/assets/images/high-res.png)`,
backgroundPosition: selectedCountry.flagLocation,
}
: {}
}
/>
<div className="flex">
<span>+{selectedCountry?.dialCode}</span>
<Caret
className={cltm(
'transform transition-transform duration-300',
showDropdown ? 'rotate-180' : 'rotate-0',
)}
/>
</div>
</button>
<input
type="text"
{...rest}
ref={ref}
onChange={handlePhoneInputChange}
className={clsx(
inputClass,
!isValid ? 'border-error' : 'border-input-border',
)}
onFocus={handleInputFocus}
defaultValue={currentValue}
onBlur={(e) => {
const newNumber = `${dialNumber}${e.target.value}`;
onInputBlur?.(newNumber);
}}
/>
{showDropdown && (
<div className={dropdownClass}>
<input
type="text"
placeholder={searchPlaceholder}
value={searchTerm}
onChange={handleSearchChange}
className={searchClass}
/>
{countryList
.filter(
(country) =>
country.name
.toLowerCase()
.includes(searchTerm.toLowerCase()) ||
('+' + country.dialCode).includes(searchTerm),
)
.map((country) => (
<button
type="button"
key={country.iso2 || country.name}
onClick={() => handleCountrySelect(country)}
className="country w-full px-4 py-2 text-start hover:cursor-pointer hover:bg-gray-100"
>
{country.name} (+{country.dialCode})
</button>
))}
</div>
)}
</div>
);
},
);
PhoneInput.displayName = 'PhoneInput';
Raw
rawCountries.ts
// Country model:
// [
// Country name,
// Regions,
// iso2 code,
// International dial code,
// Format (if available),
// Order priority (if >1 country with same dial code),
// Area codes (if >1 country with same dial code)
// ]
//
// Regions:
// ['america', 'europe', 'asia', 'oceania', 'africa']
//
// Sub-regions:
// ['north-america', 'south-america', 'central-america', 'carribean',
// 'eu-union', 'ex-ussr', 'ex-yugos', 'baltic', 'middle-east', 'north-africa']
const rawCountries = [
{
name: 'Afghanistan',
iso2: 'af',
dialCode: '93',
flagLocation: '-96px -24px',
},
{
name: 'Albania',
iso2: 'al',
dialCode: '355',
flagLocation: '-168px -24px',
},
{
name: 'Algeria',
iso2: 'dz',
dialCode: '213',
flagLocation: '-264px -96px',
},
{
name: 'Andorra',
iso2: 'ad',
dialCode: '376',
flagLocation: '-48px -24px',
},
{
name: 'Angola',
iso2: 'ao',
dialCode: '244',
flagLocation: '-240px -24px',
},
{
name: 'Antigua and Barbuda',
iso2: 'ag',
dialCode: '1268',
flagLocation: '-120px -24px',
},
{
name: 'Argentina',
iso2: 'ar',
dialCode: '54',
flagLocation: '-288px -24px',
},
{
name: 'Armenia',
iso2: 'am',
dialCode: '374',
flagLocation: '-192px -24px',
},
{
name: 'Aruba',
iso2: 'aw',
dialCode: '297',
flagLocation: '-384px -24px',
},
{
name: 'Australia',
iso2: 'au',
dialCode: '61',
flagLocation: '-360px -24px',
},
{
name: 'Austria',
iso2: 'at',
dialCode: '43',
flagLocation: '-336px -24px',
},
{
name: 'Azerbaijan',
iso2: 'az',
dialCode: '994',
flagLocation: '-24px -48px',
},
{
name: 'Bahamas',
iso2: 'bs',
dialCode: '1242',
flagLocation: '-384px -48px',
},
{
name: 'Bahrain',
iso2: 'bh',
dialCode: '973',
flagLocation: '-192px -48px',
},
{
name: 'Bangladesh',
iso2: 'bd',
dialCode: '880',
flagLocation: '-96px -48px',
},
{
name: 'Barbados',
iso2: 'bb',
dialCode: '1246',
flagLocation: '-72px -48px',
},
{
name: 'Belarus',
iso2: 'by',
dialCode: '375',
flagLocation: '-48px -72px',
},
{
name: 'Belgium',
iso2: 'be',
dialCode: '32',
flagLocation: '-120px -48px',
},
{
name: 'Belize',
iso2: 'bz',
dialCode: '501',
flagLocation: '-72px -72px',
},
{
name: 'Benin',
iso2: 'bj',
dialCode: '229',
flagLocation: '-240px -48px',
},
{
name: 'Bhutan',
iso2: 'bt',
dialCode: '975',
flagLocation: '-0px -72px',
},
{
name: 'Bolivia',
iso2: 'bo',
dialCode: '591',
flagLocation: '-336px -48px',
},
{
name: 'Bosnia and Herzegovina',
iso2: 'ba',
dialCode: '387',
flagLocation: '-48px -48px',
},
{
name: 'Botswana',
iso2: 'bw',
dialCode: '267',
flagLocation: '-24px -72px',
},
{
name: 'Brazil',
iso2: 'br',
dialCode: '55',
flagLocation: '-360px -48px',
},
{
name: 'British Indian Ocean Territory',
iso2: 'io',
dialCode: '246',
},
{
name: 'Brunei',
iso2: 'bn',
dialCode: '673',
flagLocation: '-312px -48px',
},
{
name: 'Bulgaria',
iso2: 'bg',
dialCode: '359',
flagLocation: '-168px -48px',
},
{
name: 'Burkina Faso',
iso2: 'bf',
dialCode: '226',
flagLocation: '-144px -48px',
},
{
name: 'Burundi',
iso2: 'bi',
dialCode: '257',
flagLocation: '-216px -48px',
},
{
name: 'Cambodia',
iso2: 'kh',
dialCode: '855',
flagLocation: '-312px -168px',
},
{
name: 'Cameroon',
iso2: 'cm',
dialCode: '237',
flagLocation: '-312px -72px',
},
{
name: 'Canada',
iso2: 'ca',
dialCode: '1',
flagLocation: '-96px -72px',
},
{
name: 'Cape Verde',
iso2: 'cv',
dialCode: '238',
flagLocation: '-24px -96px',
},
{
name: 'Caribbean Netherlands',
iso2: 'bq',
dialCode: '599',
},
{
name: 'Central African Republic',
iso2: 'cf',
dialCode: '236',
flagLocation: '-168px -72px',
},
{
name: 'Chad',
iso2: 'td',
dialCode: '235',
flagLocation: '-168px -312px',
},
{
name: 'Chile',
iso2: 'cl',
dialCode: '56',
flagLocation: '-288px -72px',
},
{
name: 'China',
iso2: 'cn',
dialCode: '86',
flagLocation: '-336px -72px',
},
{
name: 'Colombia',
iso2: 'co',
dialCode: '57',
flagLocation: '-360px -72px',
},
{
name: 'Comoros',
iso2: 'km',
dialCode: '269',
flagLocation: '-360px -168px',
},
{
name: 'Congo',
iso2: 'cd',
dialCode: '243',
flagLocation: '-144px -72px',
},
{
name: 'Congo',
iso2: 'cg',
dialCode: '242',
flagLocation: '-192px -72px',
},
{
name: 'Costa Rica',
iso2: 'cr',
dialCode: '506',
flagLocation: '-384px -72px',
},
{
name: 'Côte d’Ivoire',
iso2: 'ci',
dialCode: '225',
flagLocation: '-240px -72px',
},
{
name: 'Croatia',
iso2: 'hr',
dialCode: '385',
flagLocation: '-264px -144px',
},
{
name: 'Cuba',
iso2: 'cu',
dialCode: '53',
flagLocation: '-0px -96px',
},
{
name: 'Curaçao',
iso2: 'cw',
dialCode: '599',
flagLocation: '-48px -96px',
},
{
name: 'Cyprus',
iso2: 'cy',
dialCode: '357',
flagLocation: '-96px -96px',
},
{
name: 'Czech Republic',
iso2: 'cz',
dialCode: '420',
flagLocation: '-120px -96px',
},
{
name: 'Denmark',
iso2: 'dk',
dialCode: '45',
flagLocation: '-192px -96px',
},
{
name: 'Djibouti',
iso2: 'dj',
dialCode: '253',
flagLocation: '-168px -96px',
},
{
name: 'Dominica',
iso2: 'dm',
dialCode: '1767',
flagLocation: '-216px -96px',
},
{
name: 'Dominican Republic',
iso2: 'do',
dialCode: '1',
flagLocation: '-240px -96px',
},
{
name: 'Ecuador',
iso2: 'ec',
dialCode: '593',
flagLocation: '-288px -96px',
},
{
name: 'Egypt',
iso2: 'eg',
dialCode: '20',
flagLocation: '-336px -96px',
},
{
name: 'El Salvador',
iso2: 'sv',
dialCode: '503',
flagLocation: '-72px -312px',
},
{
name: 'Equatorial Guinea',
iso2: 'gq',
dialCode: '240',
flagLocation: '-48px -144px',
},
{
name: 'Eritrea',
iso2: 'er',
dialCode: '291',
flagLocation: '-384px -96px',
},
{
name: 'Estonia',
iso2: 'ee',
dialCode: '372',
flagLocation: '-312px -96px',
},
{
name: 'Ethiopia',
iso2: 'et',
dialCode: '251',
flagLocation: '-24px -120px',
},
{
name: 'Fiji',
iso2: 'fj',
dialCode: '679',
flagLocation: '-96px -120px',
},
{
name: 'Finland',
iso2: 'fi',
dialCode: '358',
flagLocation: '-72px -120px',
},
{
name: 'France',
iso2: 'fr',
dialCode: '33',
flagLocation: '-192px -120px',
},
{
name: 'French Guiana',
iso2: 'gf',
dialCode: '594',
},
{
name: 'French Polynesia',
iso2: 'pf',
dialCode: '689',
flagLocation: '-72px -264px',
},
{
name: 'Gabon',
iso2: 'ga',
dialCode: '241',
flagLocation: '-216px -120px',
},
{
name: 'Gambia',
iso2: 'gm',
dialCode: '220',
flagLocation: '-0px -144px',
},
{
name: 'Georgia',
iso2: 'ge',
dialCode: '995',
flagLocation: '-288px -120px',
},
{
name: 'Germany',
iso2: 'de',
dialCode: '49',
flagLocation: '-144px -96px',
},
{
name: 'Ghana',
iso2: 'gh',
dialCode: '233',
flagLocation: '-336px -120px',
},
{
name: 'Greece',
iso2: 'gr',
dialCode: '30',
flagLocation: '-72px -144px',
},
{
name: 'Grenada',
iso2: 'gd',
dialCode: '1473',
flagLocation: '-264px -120px',
},
{
name: 'Guadeloupe',
iso2: 'gp',
dialCode: '590',
},
{
name: 'Guam',
iso2: 'gu',
dialCode: '1671',
flagLocation: '-144px -144px',
},
{
name: 'Guatemala',
iso2: 'gt',
dialCode: '502',
flagLocation: '-120px -144px',
},
{
name: 'Guinea',
iso2: 'gn',
dialCode: '224',
flagLocation: '-24px -144px',
},
{
name: 'Guinea-Bissau',
iso2: 'gw',
dialCode: '245',
flagLocation: '-168px -144px',
},
{
name: 'Guyana',
iso2: 'gy',
dialCode: '592',
flagLocation: '-192px -144px',
},
{
name: 'Haiti',
iso2: 'ht',
dialCode: '509',
flagLocation: '-288px -144px',
},
{
name: 'Honduras',
iso2: 'hn',
dialCode: '504',
flagLocation: '-240px -144px',
},
{
name: 'Hong Kong',
iso2: 'hk',
dialCode: '852',
flagLocation: '-216px -144px',
},
{
name: 'Hungary',
iso2: 'hu',
dialCode: '36',
flagLocation: '-312px -144px',
},
{
name: 'Iceland',
iso2: 'is',
dialCode: '354',
flagLocation: '-120px -168px',
},
{
name: 'India',
iso2: 'in',
dialCode: '91',
flagLocation: '-48px -168px',
},
{
name: 'Indonesia',
iso2: 'id',
dialCode: '62',
flagLocation: '-360px -144px',
},
{
name: 'Iran',
iso2: 'ir',
dialCode: '98',
flagLocation: '-96px -168px',
},
{
name: 'Iraq',
iso2: 'iq',
dialCode: '964',
flagLocation: '-72px -168px',
},
{
name: 'Ireland',
iso2: 'ie',
dialCode: '353',
flagLocation: '-384px -144px',
},
{
name: 'Israel',
iso2: 'il',
dialCode: '972',
flagLocation: '-0px -168px',
},
{
name: 'Italy',
iso2: 'it',
dialCode: '39',
flagLocation: '-144px -168px',
},
{
name: 'Jamaica',
iso2: 'jm',
dialCode: '1876',
flagLocation: '-192px -168px',
},
{
name: 'Japan',
iso2: 'jp',
dialCode: '81',
flagLocation: '-240px -168px',
},
{
name: 'Jordan',
iso2: 'jo',
dialCode: '962',
flagLocation: '-216px -168px',
},
{
name: 'Kazakhstan',
iso2: 'kz',
dialCode: '7',
flagLocation: '-96px -192px',
},
{
name: 'Kenya',
iso2: 'ke',
dialCode: '254',
flagLocation: '-264px -168px',
},
{
name: 'Kiribati',
iso2: 'ki',
dialCode: '686',
flagLocation: '-336px -168px',
},
{
name: 'Kosovo',
iso2: 'xk',
dialCode: '383',
flagLocation: '-144px 0px',
},
{
name: 'Kuwait',
iso2: 'kw',
dialCode: '965',
flagLocation: '-48px -192px',
},
{
name: 'Kyrgyzstan',
iso2: 'kg',
dialCode: '996',
flagLocation: '-288px -168px',
},
{
name: 'Laos',
iso2: 'la',
dialCode: '856',
flagLocation: '-120px -192px',
},
{
name: 'Latvia',
iso2: 'lv',
dialCode: '371',
flagLocation: '-336px -192px',
},
{
name: 'Lebanon',
iso2: 'lb',
dialCode: '961',
flagLocation: '-144px -192px',
},
{
name: 'Lesotho',
iso2: 'ls',
dialCode: '266',
flagLocation: '-264px -192px',
},
{
name: 'Liberia',
iso2: 'lr',
dialCode: '231',
flagLocation: '-240px -192px',
},
{
name: 'Libya',
iso2: 'ly',
dialCode: '218',
flagLocation: '-360px -192px',
},
{
name: 'Liechtenstein',
iso2: 'li',
dialCode: '423',
flagLocation: '-192px -192px',
},
{
name: 'Lithuania',
iso2: 'lt',
dialCode: '370',
flagLocation: '-288px -192px',
},
{
name: 'Luxembourg',
iso2: 'lu',
dialCode: '352',
flagLocation: '-312px -192px',
},
{
name: 'Macau',
iso2: 'mo',
dialCode: '853',
flagLocation: '-240px -216px',
},
{
name: 'Macedonia',
iso2: 'mk',
dialCode: '389',
flagLocation: '-144px -216px',
},
{
name: 'Madagascar',
iso2: 'mg',
dialCode: '261',
flagLocation: '-96px -216px',
},
{
name: 'Malawi',
iso2: 'mw',
dialCode: '265',
flagLocation: '-24px -240px',
},
{
name: 'Malaysia',
iso2: 'my',
dialCode: '60',
flagLocation: '-72px -240px',
},
{
name: 'Maldives',
iso2: 'mv',
dialCode: '960',
flagLocation: '-0px -240px',
},
{
name: 'Mali',
iso2: 'ml',
dialCode: '223',
flagLocation: '-168px -216px',
},
{
name: 'Malta',
iso2: 'mt',
dialCode: '356',
flagLocation: '-360px -216px',
},
{
name: 'Marshall Islands',
iso2: 'mh',
dialCode: '692',
flagLocation: '-120px -216px',
},
{
name: 'Martinique',
iso2: 'mq',
dialCode: '596',
flagLocation: '-288px -216px',
},
{
name: 'Mauritania',
iso2: 'mr',
dialCode: '222',
flagLocation: '-312px -216px',
},
{
name: 'Mauritius',
iso2: 'mu',
dialCode: '230',
flagLocation: '-384px -216px',
},
{
name: 'Mexico',
iso2: 'mx',
dialCode: '52',
flagLocation: '-48px -240px',
},
{
name: 'Micronesia',
iso2: 'fm',
dialCode: '691',
flagLocation: '-144px -120px',
},
{
name: 'Moldova',
iso2: 'md',
dialCode: '373',
flagLocation: '-24px -216px',
},
{
name: 'Monaco',
iso2: 'mc',
dialCode: '377',
flagLocation: '-0px -216px',
},
{
name: 'Mongolia',
iso2: 'mn',
dialCode: '976',
flagLocation: '-216px -216px',
},
{
name: 'Montenegro',
iso2: 'me',
dialCode: '382',
flagLocation: '-48px -216px',
},
{
name: 'Morocco',
iso2: 'ma',
dialCode: '212',
flagLocation: '-384px -192px',
},
{
name: 'Mozambique',
iso2: 'mz',
dialCode: '258',
flagLocation: '-96px -240px',
},
{
name: 'Myanmar',
iso2: 'mm',
dialCode: '95',
flagLocation: '-192px -216px',
},
{
name: 'Namibia',
iso2: 'na',
dialCode: '264',
flagLocation: '-120px -240px',
},
{
name: 'Nauru',
iso2: 'nr',
dialCode: '674',
flagLocation: '-336px -240px',
},
{
name: 'Nepal',
iso2: 'np',
dialCode: '977',
flagLocation: '-312px -240px',
},
{
name: 'Netherlands',
iso2: 'nl',
dialCode: '31',
flagLocation: '-264px -240px',
},
{
name: 'New Caledonia',
iso2: 'nc',
dialCode: '687',
flagLocation: '-144px -240px',
},
{
name: 'New Zealand',
iso2: 'nz',
dialCode: '64',
flagLocation: '-384px -240px',
},
{
name: 'Nicaragua',
iso2: 'ni',
dialCode: '505',
flagLocation: '-240px -240px',
},
{
name: 'Niger',
iso2: 'ne',
dialCode: '227',
flagLocation: '-168px -240px',
},
{
name: 'Nigeria',
iso2: 'ng',
dialCode: '234',
flagLocation: '-216px -240px',
},
{
name: 'North Korea',
iso2: 'kp',
dialCode: '850',
flagLocation: '-0px -192px',
},
{
name: 'Norway',
iso2: 'no',
dialCode: '47',
flagLocation: '-288px -240px',
},
{
name: 'Oman',
iso2: 'om',
dialCode: '968',
flagLocation: '-0px -264px',
},
{
name: 'Pakistan',
iso2: 'pk',
dialCode: '92',
flagLocation: '-192px -264px',
},
{
name: 'Palau',
iso2: 'pw',
dialCode: '680',
flagLocation: '-336px -264px',
},
{
name: 'Palestine',
iso2: 'ps',
dialCode: '970',
flagLocation: '-288px -264px',
},
{
name: 'Panama',
iso2: 'pa',
dialCode: '507',
flagLocation: '-24px -264px',
},
{
name: 'Papua New Guinea',
iso2: 'pg',
dialCode: '675',
flagLocation: '-96px -264px',
},
{
name: 'Paraguay',
iso2: 'py',
dialCode: '595',
flagLocation: '-360px -264px',
},
{
name: 'Peru',
iso2: 'pe',
dialCode: '51',
flagLocation: '-48px -264px',
},
{
name: 'Philippines',
iso2: 'ph',
dialCode: '63',
flagLocation: '-120px -264px',
},
{
name: 'Poland',
iso2: 'pl',
dialCode: '48',
flagLocation: '-216px -264px',
},
{
name: 'Portugal',
iso2: 'pt',
dialCode: '351',
flagLocation: '-312px -264px',
},
{
name: 'Puerto Rico',
iso2: 'pr',
dialCode: '1',
flagLocation: '-264px -264px',
},
{
name: 'Qatar',
iso2: 'qa',
dialCode: '974',
flagLocation: '-384px -264px',
},
{
name: 'Réunion',
iso2: 're',
dialCode: '262',
},
{
name: 'Romania',
iso2: 'ro',
dialCode: '40',
flagLocation: '-0px -288px',
},
{
name: 'Russia',
iso2: 'ru',
dialCode: '7',
flagLocation: '-48px -288px',
},
{
name: 'Rwanda',
iso2: 'rw',
dialCode: '250',
flagLocation: '-72px -288px',
},
{
name: 'Saint Kitts and Nevis',
iso2: 'kn',
dialCode: '1869',
flagLocation: '-384px -168px',
},
{
name: 'Saint Lucia',
iso2: 'lc',
dialCode: '1758',
flagLocation: '-168px -192px',
},
{
name: 'Saint Vincent and the Grenadines',
iso2: 'vc',
dialCode: '1784',
flagLocation: '-264px -336px',
},
{
name: 'Samoa',
iso2: 'ws',
dialCode: '685',
flagLocation: '-24px -360px',
},
{
name: 'San Marino',
iso2: 'sm',
dialCode: '378',
flagLocation: '-336px -288px',
},
{
name: 'São Tomé and Príncipe',
iso2: 'st',
dialCode: '239',
flagLocation: '-48px -312px',
},
{
name: 'Saudi Arabia',
iso2: 'sa',
dialCode: '966',
flagLocation: '-96px -288px',
},
{
name: 'Senegal',
iso2: 'sn',
dialCode: '221',
flagLocation: '-360px -288px',
},
{
name: 'Serbia',
iso2: 'rs',
dialCode: '381',
flagLocation: '-24px -288px',
},
{
name: 'Seychelles',
iso2: 'sc',
dialCode: '248',
flagLocation: '-144px -288px',
},
{
name: 'Sierra Leone',
iso2: 'sl',
dialCode: '232',
flagLocation: '-312px -288px',
},
{
name: 'Singapore',
iso2: 'sg',
dialCode: '65',
flagLocation: '-216px -288px',
},
{
name: 'Slovakia',
iso2: 'sk',
dialCode: '421',
flagLocation: '-288px -288px',
},
{
name: 'Slovenia',
iso2: 'si',
dialCode: '386',
flagLocation: '-264px -288px',
},
{
name: 'Solomon Islands',
iso2: 'sb',
dialCode: '677',
flagLocation: '-120px -288px',
},
{
name: 'Somalia',
iso2: 'so',
dialCode: '252',
flagLocation: '-384px -288px',
},
{
name: 'South Africa',
iso2: 'za',
dialCode: '27',
flagLocation: '-96px -360px',
},
{
name: 'South Korea',
iso2: 'kr',
dialCode: '82',
flagLocation: '-24px -192px',
},
{
name: 'South Sudan',
iso2: 'ss',
dialCode: '211',
flagLocation: '-24px -312px',
},
{
name: 'Spain',
iso2: 'es',
dialCode: '34',
flagLocation: '-0px -120px',
},
{
name: 'Sri Lanka',
iso2: 'lk',
dialCode: '94',
flagLocation: '-216px -192px',
},
{
name: 'Sudan',
iso2: 'sd',
dialCode: '249',
flagLocation: '-168px -288px',
},
{
name: 'Suriname',
iso2: 'sr',
dialCode: '597',
flagLocation: '-0px -312px',
},
{
name: 'Swaziland',
iso2: 'sz',
dialCode: '268',
flagLocation: '-120px -312px',
},
{
name: 'Sweden',
iso2: 'se',
dialCode: '46',
flagLocation: '-192px -288px',
},
{
name: 'Switzerland',
iso2: 'ch',
dialCode: '41',
flagLocation: '-216px -72px',
},
{
name: 'Syria',
iso2: 'sy',
dialCode: '963',
flagLocation: '-96px -312px',
},
{
name: 'Taiwan',
iso2: 'tw',
dialCode: '886',
flagLocation: '-72px -336px',
},
{
name: 'Tajikistan',
iso2: 'tj',
dialCode: '992',
flagLocation: '-264px -312px',
},
{
name: 'Tanzania',
iso2: 'tz',
dialCode: '255',
flagLocation: '-96px -336px',
},
{
name: 'Thailand',
iso2: 'th',
dialCode: '66',
flagLocation: '-240px -312px',
},
{
name: 'Timor-Leste',
iso2: 'tl',
dialCode: '670',
flagLocation: '-312px -312px',
},
{
name: 'Togo',
iso2: 'tg',
dialCode: '228',
flagLocation: '-216px -312px',
},
{
name: 'Tonga',
iso2: 'to',
dialCode: '676',
flagLocation: '-384px -312px',
},
{
name: 'Trinidad and Tobago',
iso2: 'tt',
dialCode: '1868',
flagLocation: '-24px -336px',
},
{
name: 'Tunisia',
iso2: 'tn',
dialCode: '216',
flagLocation: '-360px -312px',
},
{
name: 'Turkey',
iso2: 'tr',
dialCode: '90',
flagLocation: '-0px -336px',
},
{
name: 'Turkmenistan',
iso2: 'tm',
dialCode: '993',
flagLocation: '-336px -312px',
},
{
name: 'Tuvalu',
iso2: 'tv',
dialCode: '688',
flagLocation: '-48px -336px',
},
{
name: 'Uganda',
iso2: 'ug',
dialCode: '256',
flagLocation: '-144px -336px',
},
{
name: 'Ukraine',
iso2: 'ua',
dialCode: '380',
flagLocation: '-120px -336px',
},
{
name: 'United Arab Emirates',
iso2: 'ae',
dialCode: '971',
flagLocation: '-72px -24px',
},
{
name: 'United Kingdom',
iso2: 'gb',
dialCode: '44',
flagLocation: '-240px -120px',
},
{
name: 'United States',
iso2: 'us',
dialCode: '1',
flagLocation: '-168px -336px',
},
{
name: 'Uruguay',
iso2: 'uy',
dialCode: '598',
flagLocation: '-192px -336px',
},
{
name: 'Uzbekistan',
iso2: 'uz',
dialCode: '998',
flagLocation: '-216px -336px',
},
{
name: 'Vanuatu',
iso2: 'vu',
dialCode: '678',
flagLocation: '-384px -336px',
},
{
name: 'Vatican City',
iso2: 'va',
dialCode: '39',
flagLocation: '-240px -336px',
},
{
name: 'Venezuela',
iso2: 've',
dialCode: '58',
flagLocation: '-288px -336px',
},
{
name: 'Vietnam',
iso2: 'vn',
dialCode: '84',
flagLocation: '-360px -336px',
},
{
name: 'Yemen',
iso2: 'ye',
dialCode: '967',
flagLocation: '-48px -360px',
},
{
name: 'Zambia',
iso2: 'zm',
dialCode: '260',
flagLocation: '-120px -360px',
},
{
name: 'Zimbabwe',
iso2: 'zw',
dialCode: '263',
flagLocation: '-144px -360px',
},
];
export default rawCountries;
Raw
rawTerritories.ts
// Country model:
// [
// Country name,
// Regions,
// iso2 code,
// International dial code,
// Format (if available),
// Order priority (if >1 country with same dial code),
// Area codes (if >1 country with same dial code)
// ]
//
// Regions:
// ['america', 'europe', 'asia', 'oceania', 'africa']
//
// Sub-regions:
// ['north-america', 'south-america', 'central-america', 'carribean',
// 'eu-union', 'ex-ussr', 'ex-yugos', 'baltic', 'middle-east', 'north-africa']
const rawTerritories = [
{
name: 'American Samoa',
iso2: 'as',
dialCode: '1684',
flagLocation: '-312px -24px',
},
{
name: 'Anguilla',
iso2: 'ai',
dialCode: '1264',
flagLocation: '-144px -24px',
},
{
name: 'Bermuda',
iso2: 'bm',
dialCode: '1441',
flagLocation: '-288px -48px',
},
{
name: 'British Virgin Islands',
iso2: 'vg',
dialCode: '1284',
flagLocation: '-312px -336px',
},
{
name: 'Cayman Islands',
iso2: 'ky',
dialCode: '1345',
flagLocation: '-72px -192px',
},
{
name: 'Cook Islands',
iso2: 'ck',
dialCode: '682',
flagLocation: '-264px -72px',
},
{
name: 'Falkland Islands',
iso2: 'fk',
dialCode: '500',
flagLocation: '-120px -120px',
},
{
name: 'Faroe Islands',
iso2: 'fo',
dialCode: '298',
flagLocation: '-168px -120px',
},
{
name: 'Gibraltar',
iso2: 'gi',
dialCode: '350',
flagLocation: '-360px -120px',
},
{
name: 'Greenland',
iso2: 'gl',
dialCode: '299',
flagLocation: '-384px -120px',
},
{
name: 'Jersey',
iso2: 'je',
dialCode: '44',
flagLocation: '-168px -168px',
},
{
name: 'Montserrat',
iso2: 'ms',
dialCode: '1664',
flagLocation: '-336px -216px',
},
{
name: 'Niue',
iso2: 'nu',
dialCode: '683',
flagLocation: '-360px -240px',
},
{
name: 'Norfolk Island',
iso2: 'nf',
dialCode: '672',
flagLocation: '-192px -240px',
},
{
name: 'Northern Mariana Islands',
iso2: 'mp',
dialCode: '1670',
flagLocation: '-264px -216px',
},
{
name: 'Saint Barthélemy',
iso2: 'bl',
dialCode: '590',
flagLocation: '-264px -48px',
},
{
name: 'Saint Helena',
iso2: 'sh',
dialCode: '290',
flagLocation: '-240px -288px',
},
{
name: 'Saint Martin',
iso2: 'mf',
dialCode: '590',
flagLocation: '-72px -216px',
},
{
name: 'Saint Pierre and Miquelon',
iso2: 'pm',
dialCode: '508',
},
{
name: 'Sint Maarten',
iso2: 'sx',
dialCode: '1721',
},
{
name: 'Tokelau',
iso2: 'tk',
dialCode: '690',
flagLocation: '-288px -312px',
},
{
name: 'Turks and Caicos Islands',
iso2: 'tc',
dialCode: '1649',
flagLocation: '-144px -312px',
},
{
name: 'U.S. Virgin Islands',
iso2: 'vi',
dialCode: '1340',
flagLocation: '-336px -336px',
},
{
name: 'Wallis and Futuna',
iso2: 'wf',
dialCode: '681',
flagLocation: '-0px -360px',
},
];
export default rawTerritories;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment