phonix-input
Version:
A modern, customizable React phone input component with country code selection, flags, and validation. Features responsive design, TypeScript support, and easy integration.
2,085 lines (2,081 loc) • 57.9 kB
JavaScript
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { useState, useRef, useEffect } from 'react';
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
const CountryMetaList = [
{
id: "1",
value: "AF",
label: "Afghanistan",
flag: "https://flagcdn.com/af.svg",
code: "+93",
phoneLength: 9,
},
{
id: "2",
value: "AX",
label: "Aland Islands",
flag: "https://flagcdn.com/ax.svg",
code: "+358",
phoneLength: 7,
},
{
id: "3",
value: "AL",
label: "Albania",
flag: "https://flagcdn.com/al.svg",
code: "+355",
phoneLength: 9,
},
{
id: "4",
value: "DZ",
label: "Algeria",
flag: "https://flagcdn.com/dz.svg",
code: "+213",
phoneLength: 9,
},
{
id: "5",
value: "AD",
label: "Andorra",
flag: "https://flagcdn.com/ad.svg",
code: "+376",
phoneLength: 6,
},
{
id: "6",
value: "AO",
label: "Angola",
flag: "https://flagcdn.com/ao.svg",
code: "+244",
phoneLength: 9,
},
{
id: "7",
value: "AI",
label: "Anguilla",
flag: "https://flagcdn.com/ai.svg",
code: "+1-264",
phoneLength: 10,
},
{
id: "8",
value: "AG",
label: "Antigua and Barbuda",
flag: "https://flagcdn.com/ag.svg",
code: "+1-268",
phoneLength: 10,
},
{
id: "9",
value: "AR",
label: "Argentina",
flag: "https://flagcdn.com/ar.svg",
code: "+54",
phoneLength: 10,
},
{
id: "10",
value: "AM",
label: "Armenia",
flag: "https://flagcdn.com/am.svg",
code: "+374",
phoneLength: 8,
},
{
id: "11",
value: "AW",
label: "Aruba",
flag: "https://flagcdn.com/aw.svg",
code: "+297",
phoneLength: 7,
},
{
id: "12",
value: "AU",
label: "Australia",
flag: "https://flagcdn.com/au.svg",
code: "+61",
phoneLength: 9,
},
{
id: "13",
value: "AT",
label: "Austria",
flag: "https://flagcdn.com/at.svg",
code: "+43",
phoneLength: 10,
},
{
id: "14",
value: "AZ",
label: "Azerbaijan",
flag: "https://flagcdn.com/az.svg",
code: "+994",
phoneLength: 9,
},
{
id: "15",
value: "BH",
label: "Bahrain",
flag: "https://flagcdn.com/bh.svg",
code: "+973",
phoneLength: 8,
},
{
id: "16",
value: "BD",
label: "Bangladesh",
flag: "https://flagcdn.com/bd.svg",
code: "+880",
phoneLength: 10,
},
{
id: "17",
value: "BB",
label: "Barbados",
flag: "https://flagcdn.com/bb.svg",
code: "+1-246",
phoneLength: 10,
},
{
id: "18",
value: "BY",
label: "Belarus",
flag: "https://flagcdn.com/by.svg",
code: "+375",
phoneLength: 9,
},
{
id: "19",
value: "BE",
label: "Belgium",
flag: "https://flagcdn.com/be.svg",
code: "+32",
phoneLength: 8,
},
{
id: "20",
value: "BZ",
label: "Belize",
flag: "https://flagcdn.com/bz.svg",
code: "+501",
phoneLength: 7,
},
{
id: "21",
value: "BJ",
label: "Benin",
flag: "https://flagcdn.com/bj.svg",
code: "+229",
phoneLength: 8,
},
{
id: "22",
value: "BM",
label: "Bermuda",
flag: "https://flagcdn.com/bm.svg",
code: "+1-441",
phoneLength: 10,
},
{
id: "23",
value: "BT",
label: "Bhutan",
flag: "https://flagcdn.com/bt.svg",
code: "+975",
phoneLength: 8,
},
{
id: "24",
value: "BO",
label: "Bolivia, Plurinational State of",
flag: "https://flagcdn.com/bo.svg",
code: "+591",
phoneLength: 8,
},
{
id: "25",
value: "BQ",
label: "Bonaire, Sint Eustatius and Saba",
flag: "https://flagcdn.com/bq.svg",
code: "+599",
phoneLength: 10,
},
{
id: "26",
value: "BA",
label: "Bosnia and Herzegovina",
flag: "https://flagcdn.com/ba.svg",
code: "+387",
phoneLength: 8,
},
{
id: "27",
value: "BW",
label: "Botswana",
flag: "https://flagcdn.com/bw.svg",
code: "+267",
phoneLength: 7,
},
{
id: "28",
value: "BR",
label: "Brazil",
flag: "https://flagcdn.com/br.svg",
code: "+55",
phoneLength: 11,
},
{
id: "29",
value: "IO",
label: "British Indian Ocean Territory",
flag: "https://flagcdn.com/io.svg",
code: "+246",
phoneLength: 9,
},
{
id: "30",
value: "BN",
label: "Brunei Darussalam",
flag: "https://flagcdn.com/bn.svg",
code: "+673",
phoneLength: 7,
},
{
id: "31",
value: "BG",
label: "Bulgaria",
flag: "https://flagcdn.com/bg.svg",
code: "+359",
phoneLength: 8,
},
{
id: "32",
value: "BF",
label: "Burkina Faso",
flag: "https://flagcdn.com/bf.svg",
code: "+226",
phoneLength: 8,
},
{
id: "33",
value: "BI",
label: "Burundi",
flag: "https://flagcdn.com/bi.svg",
code: "+257",
phoneLength: 7,
},
{
id: "34",
value: "KH",
label: "Cambodia",
flag: "https://flagcdn.com/kh.svg",
code: "+855",
phoneLength: 9,
},
{
id: "35",
value: "CM",
label: "Cameroon",
flag: "https://flagcdn.com/cm.svg",
code: "+237",
phoneLength: 9,
},
{
id: "36",
value: "CA",
label: "Canada",
flag: "https://flagcdn.com/ca.svg",
code: "+1",
phoneLength: 10,
},
{
id: "37",
value: "CV",
label: "Cape Verde",
flag: "https://flagcdn.com/cv.svg",
code: "+238",
phoneLength: 7,
},
{
id: "38",
value: "KY",
label: "Cayman Islands",
flag: "https://flagcdn.com/ky.svg",
code: "+1-345",
phoneLength: 10,
},
{
id: "39",
value: "CF",
label: "Central African Republic",
flag: "https://flagcdn.com/cf.svg",
code: "+236",
phoneLength: 8,
},
{
id: "40",
value: "TD",
label: "Chad",
flag: "https://flagcdn.com/td.svg",
code: "+235",
phoneLength: 8,
},
{
id: "41",
value: "CL",
label: "Chile",
flag: "https://flagcdn.com/cl.svg",
code: "+56",
phoneLength: 9,
},
{
id: "42",
value: "CN",
label: "China",
flag: "https://flagcdn.com/cn.svg",
code: "+86",
phoneLength: 11,
},
{
id: "43",
value: "CX",
label: "Christmas Island",
flag: "https://flagcdn.com/cx.svg",
code: "+61",
phoneLength: 9,
},
{
id: "44",
value: "CC",
label: "Cocos (Keeling) Islands",
flag: "https://flagcdn.com/cc.svg",
code: "+61",
phoneLength: 9,
},
{
id: "45",
value: "CO",
label: "Colombia",
flag: "https://flagcdn.com/co.svg",
code: "+57",
phoneLength: 10,
},
{
id: "46",
value: "KM",
label: "Comoros",
flag: "https://flagcdn.com/km.svg",
code: "+269",
phoneLength: 7,
},
{
id: "47",
value: "CK",
label: "Cook Islands",
flag: "https://flagcdn.com/ck.svg",
code: "+682",
phoneLength: 7,
},
{
id: "48",
value: "CR",
label: "Costa Rica",
flag: "https://flagcdn.com/cr.svg",
code: "+506",
phoneLength: 8,
},
{
id: "49",
value: "CI",
label: "Côte d'Ivoire",
flag: "https://flagcdn.com/ci.svg",
code: "+225",
phoneLength: 8,
},
{
id: "50",
value: "HR",
label: "Croatia",
flag: "https://flagcdn.com/hr.svg",
code: "+385",
phoneLength: 10,
},
{
id: "51",
value: "CU",
label: "Cuba",
flag: "https://flagcdn.com/cu.svg",
code: "+53",
phoneLength: 8,
},
{
id: "52",
value: "CW",
label: "Curaçao",
flag: "https://flagcdn.com/cw.svg",
code: "+599",
phoneLength: 10,
},
{
id: "53",
value: "CY",
label: "Cyprus",
flag: "https://flagcdn.com/cy.svg",
code: "+357",
phoneLength: 8,
},
{
id: "54",
value: "CZ",
label: "Czech Republic",
flag: "https://flagcdn.com/cz.svg",
code: "+420",
phoneLength: 9,
},
{
id: "55",
value: "DK",
label: "Denmark",
flag: "https://flagcdn.com/dk.svg",
code: "+45",
phoneLength: 8,
},
{
id: "56",
value: "DJ",
label: "Djibouti",
flag: "https://flagcdn.com/dj.svg",
code: "+253",
phoneLength: 6,
},
{
id: "57",
value: "DM",
label: "Dominica",
flag: "https://flagcdn.com/dm.svg",
code: "+1-767",
phoneLength: 10,
},
{
id: "58",
value: "DO",
label: "Dominican Republic",
flag: "https://flagcdn.com/do.svg",
code: "+1-809",
phoneLength: 10,
},
{
id: "59",
value: "EC",
label: "Ecuador",
flag: "https://flagcdn.com/ec.svg",
code: "+593",
phoneLength: 9,
},
{
id: "60",
value: "EG",
label: "Egypt",
flag: "https://flagcdn.com/eg.svg",
code: "+20",
phoneLength: 10,
},
{
id: "61",
value: "SV",
label: "El Salvador",
flag: "https://flagcdn.com/sv.svg",
code: "+503",
phoneLength: 8,
},
{
id: "62",
value: "GQ",
label: "Equatorial Guinea",
flag: "https://flagcdn.com/gq.svg",
code: "+240",
phoneLength: 9,
},
{
id: "63",
value: "ER",
label: "Eritrea",
flag: "https://flagcdn.com/er.svg",
code: "+291",
phoneLength: 8,
},
{
id: "64",
value: "EE",
label: "Estonia",
flag: "https://flagcdn.com/ee.svg",
code: "+372",
phoneLength: 7,
},
{
id: "65",
value: "ET",
label: "Ethiopia",
flag: "https://flagcdn.com/et.svg",
code: "+251",
phoneLength: 10,
},
{
id: "66",
value: "FK",
label: "Falkland Islands (Malvinas)",
flag: "https://flagcdn.com/fk.svg",
code: "+500",
phoneLength: 4,
},
{
id: "67",
value: "FJ",
label: "Fiji",
flag: "https://flagcdn.com/fj.svg",
code: "+679",
phoneLength: 7,
},
{
id: "68",
value: "FI",
label: "Finland",
flag: "https://flagcdn.com/fi.svg",
code: "+358",
phoneLength: 9,
},
{
id: "69",
value: "FR",
label: "France",
flag: "https://flagcdn.com/fr.svg",
code: "+33",
phoneLength: 10,
},
{
id: "70",
value: "GF",
label: "French Guiana",
flag: "https://flagcdn.com/gf.svg",
code: "+594",
phoneLength: 9,
},
{
id: "71",
value: "PF",
label: "French Polynesia",
flag: "https://flagcdn.com/pf.svg",
code: "+689",
phoneLength: 9,
},
{
id: "72",
value: "GA",
label: "Gabon",
flag: "https://flagcdn.com/ga.svg",
code: "+241",
phoneLength: 9,
},
{
id: "73",
value: "GM",
label: "Gambia",
flag: "https://flagcdn.com/gm.svg",
code: "+220",
phoneLength: 7,
},
{
id: "74",
value: "GE",
label: "Georgia",
flag: "https://flagcdn.com/ge.svg",
code: "+995",
phoneLength: 9,
},
{
id: "75",
value: "DE",
label: "Germany",
flag: "https://flagcdn.com/de.svg",
code: "+49",
phoneLength: 11,
},
{
id: "76",
value: "GH",
label: "Ghana",
flag: "https://flagcdn.com/gh.svg",
code: "+233",
phoneLength: 9,
},
{
id: "77",
value: "GI",
label: "Gibraltar",
flag: "https://flagcdn.com/gi.svg",
code: "+350",
phoneLength: 8,
},
{
id: "78",
value: "GR",
label: "Greece",
flag: "https://flagcdn.com/gr.svg",
code: "+30",
phoneLength: 10,
},
{
id: "79",
value: "GL",
label: "Greenland",
flag: "https://flagcdn.com/gl.svg",
code: "+299",
phoneLength: 6,
},
{
id: "80",
value: "GD",
label: "Grenada",
flag: "https://flagcdn.com/gd.svg",
code: "+1-473",
phoneLength: 10,
},
{
id: "81",
value: "GP",
label: "Guadeloupe",
flag: "https://flagcdn.com/gp.svg",
code: "+590",
phoneLength: 10,
},
{
id: "82",
value: "GU",
label: "Guam",
flag: "https://flagcdn.com/gu.svg",
code: "+1-671",
phoneLength: 10,
},
{
id: "83",
value: "GT",
label: "Guatemala",
flag: "https://flagcdn.com/gt.svg",
code: "+502",
phoneLength: 8,
},
{
id: "84",
value: "GG",
label: "Guernsey",
flag: "https://flagcdn.com/gg.svg",
code: "+44",
phoneLength: 10,
},
{
id: "85",
value: "GN",
label: "Guinea",
flag: "https://flagcdn.com/gn.svg",
code: "+224",
phoneLength: 9,
},
{
id: "86",
value: "GW",
label: "Guinea-Bissau",
flag: "https://flagcdn.com/gw.svg",
code: "+245",
phoneLength: 9,
},
{
id: "87",
value: "GY",
label: "Guyana",
flag: "https://flagcdn.com/gy.svg",
code: "+592",
phoneLength: 7,
},
{
id: "88",
value: "HT",
label: "Haiti",
flag: "https://flagcdn.com/ht.svg",
code: "+509",
phoneLength: 9,
},
{
id: "89",
value: "HM",
label: "Heard Island and McDonald Islands",
flag: "https://flagcdn.com/hm.svg",
code: "+672",
phoneLength: 9,
},
{
id: "90",
value: "VA",
label: "Holy See (Vatican City State)",
flag: "https://flagcdn.com/va.svg",
code: "+379",
phoneLength: 5,
},
{
id: "91",
value: "HN",
label: "Honduras",
flag: "https://flagcdn.com/hn.svg",
code: "+504",
phoneLength: 8,
},
{
id: "92",
value: "HK",
label: "Hong Kong",
flag: "https://flagcdn.com/hk.svg",
code: "+852",
phoneLength: 8,
},
{
id: "93",
value: "HU",
label: "Hungary",
flag: "https://flagcdn.com/hu.svg",
code: "+36",
phoneLength: 9,
},
{
id: "94",
value: "IS",
label: "Iceland",
flag: "https://flagcdn.com/is.svg",
code: "+354",
phoneLength: 7,
},
{
id: "95",
value: "IN",
label: "India",
flag: "https://flagcdn.com/in.svg",
code: "+91",
phoneLength: 10,
},
{
id: "96",
value: "ID",
label: "Indonesia",
flag: "https://flagcdn.com/id.svg",
code: "+62",
phoneLength: 10,
},
{
id: "97",
value: "IR",
label: "Iran",
flag: "https://flagcdn.com/ir.svg",
code: "+98",
phoneLength: 10,
},
{
id: "98",
value: "IQ",
label: "Iraq",
flag: "https://flagcdn.com/iq.svg",
code: "+964",
phoneLength: 10,
},
{
id: "99",
value: "IE",
label: "Ireland",
flag: "https://flagcdn.com/ie.svg",
code: "+353",
phoneLength: 7,
},
{
id: "100",
value: "IM",
label: "Isle of Man",
flag: "https://flagcdn.com/im.svg",
code: "+44",
phoneLength: 10,
},
{
id: "101",
value: "IL",
label: "Israel",
flag: "https://flagcdn.com/il.svg",
code: "+972",
phoneLength: 9,
},
{
id: "102",
value: "IT",
label: "Italy",
flag: "https://flagcdn.com/it.svg",
code: "+39",
phoneLength: 10,
},
{
id: "103",
value: "JM",
label: "Jamaica",
flag: "https://flagcdn.com/jm.svg",
code: "+1-876",
phoneLength: 10,
},
{
id: "104",
value: "JP",
label: "Japan",
flag: "https://flagcdn.com/jp.svg",
code: "+81",
phoneLength: 10,
},
{
id: "105",
value: "JE",
label: "Jersey",
flag: "https://flagcdn.com/je.svg",
code: "+44",
phoneLength: 10,
},
{
id: "106",
value: "JO",
label: "Jordan",
flag: "https://flagcdn.com/jo.svg",
code: "+962",
phoneLength: 9,
},
{
id: "107",
value: "KZ",
label: "Kazakhstan",
flag: "https://flagcdn.com/kz.svg",
code: "+7",
phoneLength: 10,
},
{
id: "108",
value: "KE",
label: "Kenya",
flag: "https://flagcdn.com/ke.svg",
code: "+254",
phoneLength: 10,
},
{
id: "109",
value: "KI",
label: "Kiribati",
flag: "https://flagcdn.com/ki.svg",
code: "+686",
phoneLength: 7,
},
{
id: "110",
value: "KP",
label: "North Korea",
flag: "https://flagcdn.com/kp.svg",
code: "+850",
phoneLength: 9,
},
{
id: "111",
value: "KW",
label: "Kuwait",
flag: "https://flagcdn.com/kw.svg",
code: "+965",
phoneLength: 8,
},
{
id: "112",
value: "KG",
label: "Kyrgyzstan",
flag: "https://flagcdn.com/kg.svg",
code: "+996",
phoneLength: 9,
},
{
id: "113",
value: "LA",
label: "Lao People's Democratic Republic",
flag: "https://flagcdn.com/la.svg",
code: "+856",
phoneLength: 8,
},
{
id: "114",
value: "LV",
label: "Latvia",
flag: "https://flagcdn.com/lv.svg",
code: "+371",
phoneLength: 8,
},
{
id: "115",
value: "LB",
label: "Lebanon",
flag: "https://flagcdn.com/lb.svg",
code: "+961",
phoneLength: 8,
},
{
id: "116",
value: "LS",
label: "Lesotho",
flag: "https://flagcdn.com/ls.svg",
code: "+266",
phoneLength: 8,
},
{
id: "117",
value: "LR",
label: "Liberia",
flag: "https://flagcdn.com/lr.svg",
code: "+231",
phoneLength: 7,
},
{
id: "118",
value: "LY",
label: "Libya",
flag: "https://flagcdn.com/ly.svg",
code: "+218",
phoneLength: 9,
},
{
id: "119",
value: "LI",
label: "Liechtenstein",
flag: "https://flagcdn.com/li.svg",
code: "+423",
phoneLength: 5,
},
{
id: "120",
value: "LT",
label: "Lithuania",
flag: "https://flagcdn.com/lt.svg",
code: "+370",
phoneLength: 8,
},
{
id: "121",
value: "LU",
label: "Luxembourg",
flag: "https://flagcdn.com/lu.svg",
code: "+352",
phoneLength: 9,
},
{
id: "122",
value: "MO",
label: "Macao",
flag: "https://flagcdn.com/mo.svg",
code: "+853",
phoneLength: 8,
},
{
id: "123",
value: "MK",
label: "Macedonia",
flag: "https://flagcdn.com/mk.svg",
code: "+389",
phoneLength: 8,
},
{
id: "124",
value: "MG",
label: "Madagascar",
flag: "https://flagcdn.com/mg.svg",
code: "+261",
phoneLength: 8,
},
{
id: "125",
value: "MW",
label: "Malawi",
flag: "https://flagcdn.com/mw.svg",
code: "+265",
phoneLength: 10,
},
{
id: "126",
value: "MY",
label: "Malaysia",
flag: "https://flagcdn.com/my.svg",
code: "+60",
phoneLength: 10,
},
{
id: "127",
value: "MV",
label: "Maldives",
flag: "https://flagcdn.com/mv.svg",
code: "+960",
phoneLength: 8,
},
{
id: "128",
value: "ML",
label: "Mali",
flag: "https://flagcdn.com/ml.svg",
code: "+223",
phoneLength: 8,
},
{
id: "129",
value: "MT",
label: "Malta",
flag: "https://flagcdn.com/mt.svg",
code: "+356",
phoneLength: 8,
},
{
id: "130",
value: "MH",
label: "Marshall Islands",
flag: "https://flagcdn.com/mh.svg",
code: "+692",
phoneLength: 7,
},
{
id: "131",
value: "MQ",
label: "Martinique",
flag: "https://flagcdn.com/mq.svg",
code: "+596",
phoneLength: 10,
},
{
id: "132",
value: "MR",
label: "Mauritania",
flag: "https://flagcdn.com/mr.svg",
code: "+222",
phoneLength: 8,
},
{
id: "133",
value: "MU",
label: "Mauritius",
flag: "https://flagcdn.com/mu.svg",
code: "+230",
phoneLength: 10,
},
{
id: "134",
value: "YT",
label: "Mayotte",
flag: "https://flagcdn.com/yt.svg",
code: "+262",
phoneLength: 9,
},
{
id: "135",
value: "MX",
label: "Mexico",
flag: "https://flagcdn.com/mx.svg",
code: "+52",
phoneLength: 10,
},
{
id: "136",
value: "FM",
label: "Micronesia, Federated States of",
flag: "https://flagcdn.com/fm.svg",
code: "+691",
phoneLength: 7,
},
{
id: "137",
value: "MD",
label: "Moldova",
flag: "https://flagcdn.com/md.svg",
code: "+373",
phoneLength: 8,
},
{
id: "138",
value: "MC",
label: "Monaco",
flag: "https://flagcdn.com/mc.svg",
code: "+377",
phoneLength: 5,
},
{
id: "139",
value: "MN",
label: "Mongolia",
flag: "https://flagcdn.com/mn.svg",
code: "+976",
phoneLength: 8,
},
{
id: "140",
value: "ME",
label: "Montenegro",
flag: "https://flagcdn.com/me.svg",
code: "+382",
phoneLength: 8,
},
{
id: "141",
value: "MS",
label: "Montserrat",
flag: "https://flagcdn.com/ms.svg",
code: "+1-664",
phoneLength: 10,
},
{
id: "142",
value: "MA",
label: "Morocco",
flag: "https://flagcdn.com/ma.svg",
code: "+212",
phoneLength: 9,
},
{
id: "143",
value: "MZ",
label: "Mozambique",
flag: "https://flagcdn.com/mz.svg",
code: "+258",
phoneLength: 9,
},
{
id: "144",
value: "MM",
label: "Myanmar",
flag: "https://flagcdn.com/mm.svg",
code: "+95",
phoneLength: 9,
},
{
id: "145",
value: "NA",
label: "Namibia",
flag: "https://flagcdn.com/na.svg",
code: "+264",
phoneLength: 9,
},
{
id: "146",
value: "NR",
label: "Nauru",
flag: "https://flagcdn.com/nr.svg",
code: "+674",
phoneLength: 8,
},
{
id: "147",
value: "NP",
label: "Nepal",
flag: "https://flagcdn.com/np.svg",
code: "+977",
phoneLength: 10,
},
{
id: "148",
value: "NL",
label: "Netherlands",
flag: "https://flagcdn.com/nl.svg",
code: "+31",
phoneLength: 9,
},
{
id: "149",
value: "NC",
label: "New Caledonia",
flag: "https://flagcdn.com/nc.svg",
code: "+687",
phoneLength: 6,
},
{
id: "150",
value: "NZ",
label: "New Zealand",
flag: "https://flagcdn.com/nz.svg",
code: "+64",
phoneLength: 9,
},
{
id: "151",
value: "NI",
label: "Nicaragua",
flag: "https://flagcdn.com/ni.svg",
code: "+505",
phoneLength: 8,
},
{
id: "152",
value: "NE",
label: "Niger",
flag: "https://flagcdn.com/ne.svg",
code: "+227",
phoneLength: 8,
},
{
id: "153",
value: "NG",
label: "Nigeria",
flag: "https://flagcdn.com/ng.svg",
code: "+234",
phoneLength: 10,
},
{
id: "154",
value: "NU",
label: "Niue",
flag: "https://flagcdn.com/nu.svg",
code: "+683",
phoneLength: 7,
},
{
id: "155",
value: "NF",
label: "Norfolk Island",
flag: "https://flagcdn.com/nf.svg",
code: "+672",
phoneLength: 9,
},
{
id: "156",
value: "MP",
label: "Northern Mariana Islands",
flag: "https://flagcdn.com/mp.svg",
code: "+1-670",
phoneLength: 10,
},
{
id: "157",
value: "NO",
label: "Norway",
flag: "https://flagcdn.com/no.svg",
code: "+47",
phoneLength: 8,
},
{
id: "158",
value: "OM",
label: "Oman",
flag: "https://flagcdn.com/om.svg",
code: "+968",
phoneLength: 8,
},
{
id: "159",
value: "PK",
label: "Pakistan",
flag: "https://flagcdn.com/pk.svg",
code: "+92",
phoneLength: 10,
},
{
id: "160",
value: "PW",
label: "Palau",
flag: "https://flagcdn.com/pw.svg",
code: "+680",
phoneLength: 7,
},
{
id: "161",
value: "PS",
label: "Palestine",
flag: "https://flagcdn.com/ps.svg",
code: "+970",
phoneLength: 9,
},
{
id: "162",
value: "PA",
label: "Panama",
flag: "https://flagcdn.com/pa.svg",
code: "+507",
phoneLength: 8,
},
{
id: "163",
value: "PG",
label: "Papua New Guinea",
flag: "https://flagcdn.com/pg.svg",
code: "+675",
phoneLength: 8,
},
{
id: "164",
value: "PY",
label: "Paraguay",
flag: "https://flagcdn.com/py.svg",
code: "+595",
phoneLength: 9,
},
{
id: "165",
value: "PE",
label: "Peru",
flag: "https://flagcdn.com/pe.svg",
code: "+51",
phoneLength: 9,
},
{
id: "166",
value: "PH",
label: "Philippines",
flag: "https://flagcdn.com/ph.svg",
code: "+63",
phoneLength: 10,
},
{
id: "167",
value: "PN",
label: "Pitcairn",
flag: "https://flagcdn.com/pn.svg",
code: "+64",
phoneLength: 9,
},
{
id: "168",
value: "PL",
label: "Poland",
flag: "https://flagcdn.com/pl.svg",
code: "+48",
phoneLength: 9,
},
{
id: "169",
value: "PT",
label: "Portugal",
flag: "https://flagcdn.com/pt.svg",
code: "+351",
phoneLength: 9,
},
{
id: "170",
value: "PR",
label: "Puerto Rico",
flag: "https://flagcdn.com/pr.svg",
code: "+1-787",
phoneLength: 10,
},
{
id: "171",
value: "QA",
label: "Qatar",
flag: "https://flagcdn.com/qa.svg",
code: "+974",
phoneLength: 8,
},
{
id: "172",
value: "RE",
label: "Réunion",
flag: "https://flagcdn.com/re.svg",
code: "+262",
phoneLength: 9,
},
{
id: "173",
value: "RO",
label: "Romania",
flag: "https://flagcdn.com/ro.svg",
code: "+40",
phoneLength: 10,
},
{
id: "174",
value: "RU",
label: "Russian Federation",
flag: "https://flagcdn.com/ru.svg",
code: "+7",
phoneLength: 10,
},
{
id: "175",
value: "RW",
label: "Rwanda",
flag: "https://flagcdn.com/rw.svg",
code: "+250",
phoneLength: 9,
},
{
id: "176",
value: "BL",
label: "Saint Barthélemy",
flag: "https://flagcdn.com/bl.svg",
code: "+590",
phoneLength: 10,
},
{
id: "177",
value: "SH",
label: "Saint Helena, Ascension and Tristan da Cunha",
flag: "https://flagcdn.com/sh.svg",
code: "+290",
phoneLength: 9,
},
{
id: "178",
value: "KN",
label: "Saint Kitts and Nevis",
flag: "https://flagcdn.com/kn.svg",
code: "+1-869",
phoneLength: 10,
},
{
id: "179",
value: "LC",
label: "Saint Lucia",
flag: "https://flagcdn.com/lc.svg",
code: "+1-758",
phoneLength: 10,
},
{
id: "180",
value: "MF",
label: "Saint Martin (French part)",
flag: "https://flagcdn.com/mf.svg",
code: "+590",
phoneLength: 10,
},
{
id: "181",
value: "PM",
label: "Saint Pierre and Miquelon",
flag: "https://flagcdn.com/pm.svg",
code: "+508",
phoneLength: 9,
},
{
id: "182",
value: "VC",
label: "Saint Vincent and the Grenadines",
flag: "https://flagcdn.com/vc.svg",
code: "+1-784",
phoneLength: 10,
},
{
id: "183",
value: "WS",
label: "Samoa",
flag: "https://flagcdn.com/ws.svg",
code: "+685",
phoneLength: 7,
},
{
id: "184",
value: "SM",
label: "San Marino",
flag: "https://flagcdn.com/sm.svg",
code: "+378",
phoneLength: 9,
},
{
id: "185",
value: "ST",
label: "Sao Tome and Principe",
flag: "https://flagcdn.com/st.svg",
code: "+239",
phoneLength: 7,
},
{
id: "186",
value: "SA",
label: "Saudi Arabia",
flag: "https://flagcdn.com/sa.svg",
code: "+966",
phoneLength: 9,
},
{
id: "187",
value: "SN",
label: "Senegal",
flag: "https://flagcdn.com/sn.svg",
code: "+221",
phoneLength: 9,
},
{
id: "188",
value: "RS",
label: "Serbia",
flag: "https://flagcdn.com/rs.svg",
code: "+381",
phoneLength: 9,
},
{
id: "189",
value: "SC",
label: "Seychelles",
flag: "https://flagcdn.com/sc.svg",
code: "+248",
phoneLength: 6,
},
{
id: "190",
value: "SL",
label: "Sierra Leone",
flag: "https://flagcdn.com/sl.svg",
code: "+232",
phoneLength: 8,
},
{
id: "191",
value: "SG",
label: "Singapore",
flag: "https://flagcdn.com/sg.svg",
code: "+65",
phoneLength: 8,
},
{
id: "192",
value: "SX",
label: "Sint Maarten (Dutch part)",
flag: "https://flagcdn.com/sx.svg",
code: "+1-721",
phoneLength: 10,
},
{
id: "193",
value: "SK",
label: "Slovakia",
flag: "https://flagcdn.com/sk.svg",
code: "+421",
phoneLength: 9,
},
{
id: "194",
value: "SI",
label: "Slovenia",
flag: "https://flagcdn.com/si.svg",
code: "+386",
phoneLength: 9,
},
{
id: "195",
value: "SB",
label: "Solomon Islands",
flag: "https://flagcdn.com/sb.svg",
code: "+677",
phoneLength: 7,
},
{
id: "196",
value: "SO",
label: "Somalia",
flag: "https://flagcdn.com/so.svg",
code: "+252",
phoneLength: 9,
},
{
id: "197",
value: "ZA",
label: "South Africa",
flag: "https://flagcdn.com/za.svg",
code: "+27",
phoneLength: 10,
},
{
id: "198",
value: "GS",
label: "South Georgia and the South Sandwich Islands",
flag: "https://flagcdn.com/gs.svg",
code: "+500",
phoneLength: 9,
},
{
id: "199",
value: "KR",
label: "South Korea",
flag: "https://flagcdn.com/kr.svg",
code: "+82",
phoneLength: 10,
},
{
id: "200",
value: "SS",
label: "South Sudan",
flag: "https://flagcdn.com/ss.svg",
code: "+211",
phoneLength: 9,
},
{
id: "201",
value: "ES",
label: "Spain",
flag: "https://flagcdn.com/es.svg",
code: "+34",
phoneLength: 9,
},
{
id: "202",
value: "LK",
label: "Sri Lanka",
flag: "https://flagcdn.com/lk.svg",
code: "+94",
phoneLength: 10,
},
{
id: "203",
value: "SD",
label: "Sudan",
flag: "https://flagcdn.com/sd.svg",
code: "+249",
phoneLength: 9,
},
{
id: "204",
value: "SR",
label: "Suriname",
flag: "https://flagcdn.com/sr.svg",
code: "+597",
phoneLength: 7,
},
{
id: "205",
value: "SJ",
label: "Svalbard and Jan Mayen",
flag: "https://flagcdn.com/sj.svg",
code: "+47",
phoneLength: 8,
},
{
id: "206",
value: "SZ",
label: "Swaziland",
flag: "https://flagcdn.com/sz.svg",
code: "+268",
phoneLength: 8,
},
{
id: "207",
value: "SE",
label: "Sweden",
flag: "https://flagcdn.com/se.svg",
code: "+46",
phoneLength: 9,
},
{
id: "208",
value: "CH",
label: "Switzerland",
flag: "https://flagcdn.com/ch.svg",
code: "+41",
phoneLength: 9,
},
{
id: "209",
value: "SY",
label: "Syrian Arab Republic",
flag: "https://flagcdn.com/sy.svg",
code: "+963",
phoneLength: 9,
},
{
id: "210",
value: "TW",
label: "Taiwan, Province of China",
flag: "https://flagcdn.com/tw.svg",
code: "+886",
phoneLength: 10,
},
{
id: "211",
value: "TJ",
label: "Tajikistan",
flag: "https://flagcdn.com/tj.svg",
code: "+992",
phoneLength: 9,
},
{
id: "212",
value: "TZ",
label: "Tanzania",
flag: "https://flagcdn.com/tz.svg",
code: "+255",
phoneLength: 9,
},
{
id: "213",
value: "TH",
label: "Thailand",
flag: "https://flagcdn.com/th.svg",
code: "+66",
phoneLength: 9,
},
{
id: "214",
value: "TL",
label: "Timor-Leste",
flag: "https://flagcdn.com/tl.svg",
code: "+670",
phoneLength: 9,
},
{
id: "215",
value: "TG",
label: "Togo",
flag: "https://flagcdn.com/tg.svg",
code: "+228",
phoneLength: 8,
},
{
id: "216",
value: "TK",
label: "Tokelau",
flag: "https://flagcdn.com/tk.svg",
code: "+690",
phoneLength: 7,
},
{
id: "217",
value: "TO",
label: "Tonga",
flag: "https://flagcdn.com/to.svg",
code: "+676",
phoneLength: 7,
},
{
id: "218",
value: "TT",
label: "Trinidad and Tobago",
flag: "https://flagcdn.com/tt.svg",
code: "+1-868",
phoneLength: 10,
},
{
id: "219",
value: "TN",
label: "Tunisia",
flag: "https://flagcdn.com/tn.svg",
code: "+216",
phoneLength: 8,
},
{
id: "220",
value: "TR",
label: "Turkey",
flag: "https://flagcdn.com/tr.svg",
code: "+90",
phoneLength: 10,
},
{
id: "221",
value: "TM",
label: "Turkmenistan",
flag: "https://flagcdn.com/tm.svg",
code: "+993",
phoneLength: 8,
},
{
id: "222",
value: "TC",
label: "Turks and Caicos Islands",
flag: "https://flagcdn.com/tc.svg",
code: "+1-649",
phoneLength: 10,
},
{
id: "223",
value: "TV",
label: "Tuvalu",
flag: "https://flagcdn.com/tv.svg",
code: "+688",
phoneLength: 7,
},
{
id: "224",
value: "UG",
label: "Uganda",
flag: "https://flagcdn.com/ug.svg",
code: "+256",
phoneLength: 9,
},
{
id: "225",
value: "UA",
label: "Ukraine",
flag: "https://flagcdn.com/ua.svg",
code: "+380",
phoneLength: 9,
},
{
id: "226",
value: "AE",
label: "United Arab Emirates",
flag: "https://flagcdn.com/ae.svg",
code: "+971",
phoneLength: 9,
},
{
id: "227",
value: "GB",
label: "United Kingdom",
flag: "https://flagcdn.com/gb.svg",
code: "+44",
phoneLength: 10,
},
{
id: "228",
value: "US",
label: "United States",
flag: "https://flagcdn.com/us.svg",
code: "+1",
phoneLength: 10,
},
{
id: "229",
value: "UY",
label: "Uruguay",
flag: "https://flagcdn.com/uy.svg",
code: "+598",
phoneLength: 8,
},
{
id: "230",
value: "UZ",
label: "Uzbekistan",
flag: "https://flagcdn.com/uz.svg",
code: "+998",
phoneLength: 9,
},
{
id: "231",
value: "VU",
label: "Vanuatu",
flag: "https://flagcdn.com/vu.svg",
code: "+678",
phoneLength: 7,
},
{
id: "232",
value: "VE",
label: "Venezuela",
flag: "https://flagcdn.com/ve.svg",
code: "+58",
phoneLength: 10,
},
{
id: "233",
value: "VN",
label: "Vietnam",
flag: "https://flagcdn.com/vn.svg",
code: "+84",
phoneLength: 9,
},
{
id: "234",
value: "VI",
label: "Virgin Islands",
flag: "https://flagcdn.com/vi.svg",
code: "+1-340",
phoneLength: 10,
},
{
id: "235",
value: "WF",
label: "Wallis and Futuna",
flag: "https://flagcdn.com/wf.svg",
code: "+681",
phoneLength: 7,
},
{
id: "236",
value: "EH",
label: "Western Sahara",
flag: "https://flagcdn.com/eh.svg",
code: "+212",
phoneLength: 9,
},
{
id: "237",
value: "YE",
label: "Yemen",
flag: "https://flagcdn.com/ye.svg",
code: "+967",
phoneLength: 9,
},
{
id: "238",
value: "ZM",
label: "Zambia",
flag: "https://flagcdn.com/zm.svg",
code: "+260",
phoneLength: 9,
},
{
id: "239",
value: "ZW",
label: "Zimbabwe",
flag: "https://flagcdn.com/zw.svg",
code: "+263",
phoneLength: 9,
},
];
const defaultMessages = {
placeholder: "123-456-7890",
phoneRequired: "Phone number is required",
phoneInvalid: "Invalid phone number format",
phoneLengthInvalid: "Phone number must have {length} digits",
countryRequired: "Country selection is required",
};
const PhoneInputWithCountrySelectList = ({ value = { countryCode: "", phone: "" }, onChange, label, placeholder, countryPlaceholder, required = false, disabled = false, validationMessages = {}, }) => {
// State
const [selectedCountry, setSelectedCountry] = useState(null);
const [phone, setPhone] = useState(value.phone || "");
const [errors, setErrors] = useState({});
const [isFocused, setIsFocused] = useState(false);
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const [searchQuery, setSearchQuery] = useState("");
const [highlightedIndex, setHighlightedIndex] = useState(-1);
// Refs
const containerRef = useRef(null);
const searchInputRef = useRef(null);
// Countries list
const countries = CountryMetaList;
// Filter countries based on search query
const filteredCountries = countries.filter(country => {
if (!searchQuery.trim())
return true;
const query = searchQuery.toLowerCase().trim();
const countryName = country.label?.toLowerCase() || '';
const countryCode = country.code?.toLowerCase() || '';
const phoneCodeNumbers = country.code?.replace('+', '') || '';
const countryValueCode = country.value?.toLowerCase() || '';
return (countryName.includes(query) || // Search by name: "india"
countryCode.includes(query) || // Search by full code: "+91"
phoneCodeNumbers.includes(query) || // Search by numbers: "91"
countryValueCode.includes(query) // Search by ISO code: "in"
);
});
// Initialize with India as default
useEffect(() => {
console.log('Countries loaded:', countries.length, 'items');
console.log('First 3 countries:', countries.slice(0, 3));
if (!selectedCountry && countries.length > 0) {
const defaultCountry = countries.find(c => c.code === "+91") || countries[0];
console.log('Setting default country:', defaultCountry?.label, defaultCountry?.code);
setSelectedCountry(defaultCountry);
if (onChange) {
onChange({ countryCode: defaultCountry.code, phone });
}
}
}, []);
// Close dropdown when clicking outside
useEffect(() => {
const handleClickOutside = (event) => {
if (containerRef.current && !containerRef.current.contains(event.target)) {
setIsDropdownOpen(false);
setSearchQuery(""); // Clear search when closing
}
};
if (isDropdownOpen) {
document.addEventListener('mousedown', handleClickOutside);
// Focus search input when dropdown opens
setTimeout(() => {
if (searchInputRef.current) {
searchInputRef.current.focus();
}
}, 100);
}
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [isDropdownOpen]);
// Update internal state when value prop changes
useEffect(() => {
if (value.countryCode !== selectedCountry?.code) {
const country = countries.find(c => c.code === value.countryCode);
setSelectedCountry(country || null);
}
if (value.phone !== phone) {
setPhone(value.phone);
}
}, [value]);
// Phone number formatting function
const formatPhoneNumber = (phone, countryCode) => {
const digitsOnly = phone.replace(/\D/g, "");
const country = countries.find(c => c.code === countryCode);
if (!country || !digitsOnly)
return digitsOnly;
// Different formatting patterns based on country
switch (countryCode) {
case "+1": // US/Canada: (123) 456-7890
if (digitsOnly.length <= 3)
return digitsOnly;
if (digitsOnly.length <= 6)
return `${digitsOnly.slice(0, 3)}-${digitsOnly.slice(3)}`;
return `${digitsOnly.slice(0, 3)}-${digitsOnly.slice(3, 6)}-${digitsOnly.slice(6, 10)}`;
case "+44": // UK: 020 1234 5678
if (digitsOnly.length <= 3)
return digitsOnly;
if (digitsOnly.length <= 7)
return `${digitsOnly.slice(0, 3)} ${digitsOnly.slice(3)}`;
return `${digitsOnly.slice(0, 3)} ${digitsOnly.slice(3, 7)} ${digitsOnly.slice(7, 11)}`;
case "+91": // India: 98765 43210
if (digitsOnly.length <= 5)
return digitsOnly;
return `${digitsOnly.slice(0, 5)} ${digitsOnly.slice(5, 10)}`;
case "+86": // China: 138 0013 8000
if (digitsOnly.length <= 3)
return digitsOnly;
if (digitsOnly.length <= 7)
return `${digitsOnly.slice(0, 3)} ${digitsOnly.slice(3)}`;
return `${digitsOnly.slice(0, 3)} ${digitsOnly.slice(3, 7)} ${digitsOnly.slice(7, 11)}`;
case "+33": // France: 01 23 45 67 89
if (digitsOnly.length <= 2)
return digitsOnly;
if (digitsOnly.length <= 4)
return `${digitsOnly.slice(0, 2)} ${digitsOnly.slice(2)}`;
if (digitsOnly.length <= 6)
return `${digitsOnly.slice(0, 2)} ${digitsOnly.slice(2, 4)} ${digitsOnly.slice(4)}`;
if (digitsOnly.length <= 8)
return `${digitsOnly.slice(0, 2)} ${digitsOnly.slice(2, 4)} ${digitsOnly.slice(4, 6)} ${digitsOnly.slice(6)}`;
return `${digitsOnly.slice(0, 2)} ${digitsOnly.slice(2, 4)} ${digitsOnly.slice(4, 6)} ${digitsOnly.slice(6, 8)} ${digitsOnly.slice(8, 10)}`;
case "+49": // Germany: 030 12345678
if (digitsOnly.length <= 3)
return digitsOnly;
return `${digitsOnly.slice(0, 3)} ${digitsOnly.slice(3, 11)}`;
case "+81": // Japan: 090-1234-5678
if (digitsOnly.length <= 3)
return digitsOnly;
if (digitsOnly.length <= 7)
return `${digitsOnly.slice(0, 3)}-${digitsOnly.slice(3)}`;
return `${digitsOnly.slice(0, 3)}-${digitsOnly.slice(3, 7)}-${digitsOnly.slice(7, 11)}`;
case "+61": // Australia: 0412 345 678
if (digitsOnly.length <= 4)
return digitsOnly;
if (digitsOnly.length <= 7)
return `${digitsOnly.slice(0, 4)} ${digitsOnly.slice(4)}`;
return `${digitsOnly.slice(0, 4)} ${digitsOnly.slice(4, 7)} ${digitsOnly.slice(7, 10)}`;
default:
// Generic formatting: space every 3-4 digits
if (digitsOnly.length <= 4)
return digitsOnly;
if (digitsOnly.length <= 7)
return `${digitsOnly.slice(0, 3)} ${digitsOnly.slice(3)}`;
return `${digitsOnly.slice(0, 3)} ${digitsOnly.slice(3, 6)} ${digitsOnly.slice(6)}`;
}
};
// Highlight matching text in search results
const highlightMatch = (text, query) => {
if (!query.trim())
return text;
const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
const parts = text.split(regex);
return parts.map((part, index) => regex.test(part) ? (jsx("mark", { className: "search-highlight", children: part }, index)) : (part));
};
// Validation
const validate = (countryCode, phoneVal) => {
const newErrors = {};
const country = countries.find(c => c.code === countryCode);
if (required && !phoneVal.trim()) {
newErrors.phone = validationMessages.phoneRequired || defaultMessages.phoneRequired;
}
else if (phoneVal.trim()) {
if (!country || !country.phoneLength) {
newErrors.phone = validationMessages.phoneInvalid || defaultMessages.phoneInvalid;
}