Skip to content

Instantly share code, notes, and snippets.

@AntsiferovMaxim

AntsiferovMaxim/airbnb-phone-input

Last active April 3, 2020 23:49
Show Gist options
  • Save AntsiferovMaxim/d845190ca4760e864a503cfa1a74f903 to your computer and use it in GitHub Desktop.
Save AntsiferovMaxim/d845190ca4760e864a503cfa1a74f903 to your computer and use it in GitHub Desktop.
Download ZIP
Airbnb phone input
Raw
countries.json
{
"+93": {
"country": "Afghanistan",
"name": "Afghanistan (+93)",
"dial_code": "+93",
"code": "AF",
"id": "14306d15-2554-403e-89c7-411145a44bee"
},
"+358": {
"country": "Finland",
"name": "Finland (+358)",
"dial_code": "+358",
"code": "FI",
"id": "70eb2cba-d92c-4b76-a8e7-6ed436d1b48b"
},
"+355": {
"country": "Albania",
"name": "Albania (+355)",
"dial_code": "+355",
"code": "AL",
"id": "41dade2f-8ba6-4314-8af5-60226cccaff1"
},
"+213": {
"country": "Algeria",
"name": "Algeria (+213)",
"dial_code": "+213",
"code": "DZ",
"id": "e7bbbf17-fa85-4560-8837-6c664a9f0255"
},
"+1 684": {
"country": "AmericanSamoa",
"name": "AmericanSamoa (+1 684)",
"dial_code": "+1 684",
"code": "AS",
"id": "a01dde9d-291c-4a24-911d-b38d12c37ae5"
},
"+376": {
"country": "Andorra",
"name": "Andorra (+376)",
"dial_code": "+376",
"code": "AD",
"id": "2747437a-12ab-4a08-84f0-ea6001a5f768"
},
"+244": {
"country": "Angola",
"name": "Angola (+244)",
"dial_code": "+244",
"code": "AO",
"id": "6d8732dc-d8be-4416-a6d5-e87407b0e2bb"
},
"+1 264": {
"country": "Anguilla",
"name": "Anguilla (+1 264)",
"dial_code": "+1 264",
"code": "AI",
"id": "883d68e8-8f11-4e5e-95ec-991951d56ae1"
},
"+672": {
"country": "Norfolk Island",
"name": "Norfolk Island (+672)",
"dial_code": "+672",
"code": "NF",
"id": "31df7b36-c6ec-4328-9db5-255ec7b851b7"
},
"+1268": {
"country": "Antigua and Barbuda",
"name": "Antigua and Barbuda (+1268)",
"dial_code": "+1268",
"code": "AG",
"id": "177fd02c-c2ca-4888-9abe-5138f841d45a"
},
"+54": {
"country": "Argentina",
"name": "Argentina (+54)",
"dial_code": "+54",
"code": "AR",
"id": "1a4f23bb-1a4b-4049-83cb-1e596e9d7bf6"
},
"+374": {
"country": "Armenia",
"name": "Armenia (+374)",
"dial_code": "+374",
"code": "AM",
"id": "1a3c1c22-45a1-4f3a-a086-75d684dd4c64"
},
"+297": {
"country": "Aruba",
"name": "Aruba (+297)",
"dial_code": "+297",
"code": "AW",
"id": "9ff41560-87e2-4470-b01d-58f70dca9bc0"
},
"+61": {
"country": "Cocos (Keeling) Islands",
"name": "Cocos (Keeling) Islands (+61)",
"dial_code": "+61",
"code": "CC",
"id": "53661326-05ef-4c49-8252-b31cee6299df"
},
"+43": {
"country": "Austria",
"name": "Austria (+43)",
"dial_code": "+43",
"code": "AT",
"id": "999af121-fc25-43c5-ba5e-9b814834d57a"
},
"+994": {
"country": "Azerbaijan",
"name": "Azerbaijan (+994)",
"dial_code": "+994",
"code": "AZ",
"id": "d39053a9-e10c-4334-b80c-59b41ae8f6b6"
},
"+1 242": {
"country": "Bahamas",
"name": "Bahamas (+1 242)",
"dial_code": "+1 242",
"code": "BS",
"id": "8a04a870-084c-41b3-b1cf-dcdf351b0dd0"
},
"+973": {
"country": "Bahrain",
"name": "Bahrain (+973)",
"dial_code": "+973",
"code": "BH",
"id": "07afdc21-3887-41a6-a215-e6c12bf13564"
},
"+880": {
"country": "Bangladesh",
"name": "Bangladesh (+880)",
"dial_code": "+880",
"code": "BD",
"id": "334947b4-b256-4e4c-a8a8-4dcd5f245530"
},
"+1 246": {
"country": "Barbados",
"name": "Barbados (+1 246)",
"dial_code": "+1 246",
"code": "BB",
"id": "807f1e7b-3704-4872-a4e0-d1c9387be2aa"
},
"+375": {
"country": "Belarus",
"name": "Belarus (+375)",
"dial_code": "+375",
"code": "BY",
"id": "94ef358a-8711-4051-9fe3-8ae53f84833e"
},
"+32": {
"country": "Belgium",
"name": "Belgium (+32)",
"dial_code": "+32",
"code": "BE",
"id": "db082467-2b71-4cae-bf52-62213b23cd6c"
},
"+501": {
"country": "Belize",
"name": "Belize (+501)",
"dial_code": "+501",
"code": "BZ",
"id": "0df915a0-deba-4330-8009-93b2e97213e9"
},
"+229": {
"country": "Benin",
"name": "Benin (+229)",
"dial_code": "+229",
"code": "BJ",
"id": "4aa5e5bf-6629-413a-8984-c55c8612b75f"
},
"+1 441": {
"country": "Bermuda",
"name": "Bermuda (+1 441)",
"dial_code": "+1 441",
"code": "BM",
"id": "b3c39655-baa3-4bfb-addd-aedb79b41bde"
},
"+975": {
"country": "Bhutan",
"name": "Bhutan (+975)",
"dial_code": "+975",
"code": "BT",
"id": "eabf75a8-98c4-4b17-ad4c-d038eaf38453"
},
"+591": {
"country": "Bolivia, Plurinational State of",
"name": "Bolivia, Plurinational State of (+591)",
"dial_code": "+591",
"code": "BO",
"id": "44ce9ffb-fbd6-4432-bf15-03ba4d54a1c5"
},
"+387": {
"country": "Bosnia and Herzegovina",
"name": "Bosnia and Herzegovina (+387)",
"dial_code": "+387",
"code": "BA",
"id": "0d3ce4bd-f860-41f9-acd4-61c95aaed5c5"
},
"+267": {
"country": "Botswana",
"name": "Botswana (+267)",
"dial_code": "+267",
"code": "BW",
"id": "fe055f6e-ad2c-4501-acbc-e687b9574a7d"
},
"+55": {
"country": "Brazil",
"name": "Brazil (+55)",
"dial_code": "+55",
"code": "BR",
"id": "28093802-d552-445f-a2a9-85bee0212bee"
},
"+246": {
"country": "British Indian Ocean Territory",
"name": "British Indian Ocean Territory (+246)",
"dial_code": "+246",
"code": "IO",
"id": "4d69e2c0-d07e-4721-96c7-70003f05aa32"
},
"+673": {
"country": "Brunei Darussalam",
"name": "Brunei Darussalam (+673)",
"dial_code": "+673",
"code": "BN",
"id": "967a9b1f-254f-49ed-8845-c7fa3e1efe61"
},
"+359": {
"country": "Bulgaria",
"name": "Bulgaria (+359)",
"dial_code": "+359",
"code": "BG",
"id": "1323e3fb-4c07-4b6b-9575-3aedb876c7d6"
},
"+226": {
"country": "Burkina Faso",
"name": "Burkina Faso (+226)",
"dial_code": "+226",
"code": "BF",
"id": "73cc7d01-47f7-467b-9ec0-e67c87bee813"
},
"+257": {
"country": "Burundi",
"name": "Burundi (+257)",
"dial_code": "+257",
"code": "BI",
"id": "cfaa8bd3-a8ae-43e6-9d37-25fb24b2adca"
},
"+855": {
"country": "Cambodia",
"name": "Cambodia (+855)",
"dial_code": "+855",
"code": "KH",
"id": "5f9f372f-ad92-4772-9612-efa10a477cb2"
},
"+237": {
"country": "Cameroon",
"name": "Cameroon (+237)",
"dial_code": "+237",
"code": "CM",
"id": "2b93ae26-1462-4bb1-9485-3cf4ae99c292"
},
"+1": {
"country": "United States",
"name": "United States (+1)",
"dial_code": "+1",
"code": "US",
"id": "751658b9-325e-46c1-9afc-7d46b0df1099"
},
"+238": {
"country": "Cape Verde",
"name": "Cape Verde (+238)",
"dial_code": "+238",
"code": "CV",
"id": "167efb78-38ff-477b-808f-4fe6ade0097e"
},
"+ 345": {
"country": "Cayman Islands",
"name": "Cayman Islands (+ 345)",
"dial_code": "+ 345",
"code": "KY",
"id": "b05b22fa-c627-4e1c-a2c9-4c0149291791"
},
"+236": {
"country": "Central African Republic",
"name": "Central African Republic (+236)",
"dial_code": "+236",
"code": "CF",
"id": "f61dca1c-a4af-4422-8ef5-beafc4d2cf10"
},
"+235": {
"country": "Chad",
"name": "Chad (+235)",
"dial_code": "+235",
"code": "TD",
"id": "61e61627-ce80-45eb-b3bf-f3d53c20f3c2"
},
"+56": {
"country": "Chile",
"name": "Chile (+56)",
"dial_code": "+56",
"code": "CL",
"id": "269b518d-9558-4090-a547-c92461d999a8"
},
"+86": {
"country": "China",
"name": "China (+86)",
"dial_code": "+86",
"code": "CN",
"id": "fadc6fc8-d1e3-45c0-b8ac-cac41f328225"
},
"+57": {
"country": "Colombia",
"name": "Colombia (+57)",
"dial_code": "+57",
"code": "CO",
"id": "44f77df1-213a-472e-a7a2-be58c441bb93"
},
"+269": {
"country": "Comoros",
"name": "Comoros (+269)",
"dial_code": "+269",
"code": "KM",
"id": "f99444ae-a7ee-4fdb-bc89-602cc31aaae2"
},
"+242": {
"country": "Congo",
"name": "Congo (+242)",
"dial_code": "+242",
"code": "CG",
"id": "39190297-4519-4b20-81aa-0dff07a543c2"
},
"+243": {
"country": "Congo, The Democratic Republic of the Congo",
"name": "Congo, The Democratic Republic of the Congo (+243)",
"dial_code": "+243",
"code": "CD",
"id": "079b719e-2eea-40b9-9632-b5be876a11f7"
},
"+682": {
"country": "Cook Islands",
"name": "Cook Islands (+682)",
"dial_code": "+682",
"code": "CK",
"id": "51326187-a36f-49b9-9e45-5fa30a90e0f6"
},
"+506": {
"country": "Costa Rica",
"name": "Costa Rica (+506)",
"dial_code": "+506",
"code": "CR",
"id": "85c60111-8f2c-435b-9003-26ea075bf653"
},
"+225": {
"country": "Cote d'Ivoire",
"name": "Cote d'Ivoire (+225)",
"dial_code": "+225",
"code": "CI",
"id": "ea484878-dca5-4299-b907-6a1531d6d69e"
},
"+385": {
"country": "Croatia",
"name": "Croatia (+385)",
"dial_code": "+385",
"code": "HR",
"id": "8660c262-d28a-433b-9323-7c7dc4ca39d6"
},
"+53": {
"country": "Cuba",
"name": "Cuba (+53)",
"dial_code": "+53",
"code": "CU",
"id": "df440399-2054-4c32-842f-8fd34fc4a1e8"
},
"+357": {
"country": "Cyprus",
"name": "Cyprus (+357)",
"dial_code": "+357",
"code": "CY",
"id": "6f9c9a4a-b99b-4023-9700-becc6215ef35"
},
"+420": {
"country": "Czech Republic",
"name": "Czech Republic (+420)",
"dial_code": "+420",
"code": "CZ",
"id": "c05f233f-0753-4029-8146-a9f3244878b8"
},
"+45": {
"country": "Denmark",
"name": "Denmark (+45)",
"dial_code": "+45",
"code": "DK",
"id": "b0add477-e0da-443c-abb9-50946749fd65"
},
"+253": {
"country": "Djibouti",
"name": "Djibouti (+253)",
"dial_code": "+253",
"code": "DJ",
"id": "3bd286e1-e67e-4761-b391-1da37708bde3"
},
"+1 767": {
"country": "Dominica",
"name": "Dominica (+1 767)",
"dial_code": "+1 767",
"code": "DM",
"id": "c19820aa-90b1-4ac8-9170-090617e014c4"
},
"+1 849": {
"country": "Dominican Republic",
"name": "Dominican Republic (+1 849)",
"dial_code": "+1 849",
"code": "DO",
"id": "d72eca01-e191-4f2f-b6b8-f1e2d8677d9c"
},
"+593": {
"country": "Ecuador",
"name": "Ecuador (+593)",
"dial_code": "+593",
"code": "EC",
"id": "efedf329-54ad-48d8-b78b-6a4cd1c47aad"
},
"+20": {
"country": "Egypt",
"name": "Egypt (+20)",
"dial_code": "+20",
"code": "EG",
"id": "cedde53a-26de-42f2-bdff-c18bd2e5b1d3"
},
"+503": {
"country": "El Salvador",
"name": "El Salvador (+503)",
"dial_code": "+503",
"code": "SV",
"id": "b3ce527f-7f37-4253-a983-3b586127c303"
},
"+240": {
"country": "Equatorial Guinea",
"name": "Equatorial Guinea (+240)",
"dial_code": "+240",
"code": "GQ",
"id": "5bade479-b2de-4cd0-a17a-cb4db9d26fbc"
},
"+291": {
"country": "Eritrea",
"name": "Eritrea (+291)",
"dial_code": "+291",
"code": "ER",
"id": "9d5e69e7-6e69-4011-ad2e-f95f68154e94"
},
"+372": {
"country": "Estonia",
"name": "Estonia (+372)",
"dial_code": "+372",
"code": "EE",
"id": "fe88f4a0-aca6-40b3-be59-8da5ba1a1fff"
},
"+251": {
"country": "Ethiopia",
"name": "Ethiopia (+251)",
"dial_code": "+251",
"code": "ET",
"id": "0b124aff-e952-4219-afed-1060b6e91d7d"
},
"+500": {
"country": "South Georgia and the South Sandwich Islands",
"name": "South Georgia and the South Sandwich Islands (+500)",
"dial_code": "+500",
"code": "GS",
"id": "e5d37843-7c0f-40b7-add6-f160182e8744"
},
"+298": {
"country": "Faroe Islands",
"name": "Faroe Islands (+298)",
"dial_code": "+298",
"code": "FO",
"id": "ad011ffd-ad17-4b43-939b-41cbb783fdab"
},
"+679": {
"country": "Fiji",
"name": "Fiji (+679)",
"dial_code": "+679",
"code": "FJ",
"id": "5b323f02-02e2-4cc0-8465-1c29c1a9a5e9"
},
"+33": {
"country": "France",
"name": "France (+33)",
"dial_code": "+33",
"code": "FR",
"id": "92c3a631-2b33-430e-b855-e4fa3731b6a5"
},
"+594": {
"country": "French Guiana",
"name": "French Guiana (+594)",
"dial_code": "+594",
"code": "GF",
"id": "3e7d0c79-1f7a-47e2-90ee-0bd790a2945c"
},
"+689": {
"country": "French Polynesia",
"name": "French Polynesia (+689)",
"dial_code": "+689",
"code": "PF",
"id": "3aa7e1f4-df24-4c1c-bcb2-972dab2ca210"
},
"+241": {
"country": "Gabon",
"name": "Gabon (+241)",
"dial_code": "+241",
"code": "GA",
"id": "7174066a-eb72-40bd-8d8b-f1924f2df6f2"
},
"+220": {
"country": "Gambia",
"name": "Gambia (+220)",
"dial_code": "+220",
"code": "GM",
"id": "a1f524ef-3795-4c2b-9d77-a105af69211e"
},
"+995": {
"country": "Georgia",
"name": "Georgia (+995)",
"dial_code": "+995",
"code": "GE",
"id": "5bbddcac-81bd-47dc-b4e5-5d6df09df62a"
},
"+49": {
"country": "Germany",
"name": "Germany (+49)",
"dial_code": "+49",
"code": "DE",
"id": "c9db9832-2812-40a3-9bb4-dc0a2048f018"
},
"+233": {
"country": "Ghana",
"name": "Ghana (+233)",
"dial_code": "+233",
"code": "GH",
"id": "32989415-ef56-46d0-b932-b389ecf61362"
},
"+350": {
"country": "Gibraltar",
"name": "Gibraltar (+350)",
"dial_code": "+350",
"code": "GI",
"id": "44c44d6e-868c-47f9-9d90-bfa1d86789c6"
},
"+30": {
"country": "Greece",
"name": "Greece (+30)",
"dial_code": "+30",
"code": "GR",
"id": "85f63378-51ac-43b6-873b-de18ace89052"
},
"+299": {
"country": "Greenland",
"name": "Greenland (+299)",
"dial_code": "+299",
"code": "GL",
"id": "5cb02ac2-425c-45e1-8365-f946d6b2d828"
},
"+1 473": {
"country": "Grenada",
"name": "Grenada (+1 473)",
"dial_code": "+1 473",
"code": "GD",
"id": "b3d733de-53ea-49a9-8980-9d1da6ed8d39"
},
"+590": {
"country": "Saint Martin",
"name": "Saint Martin (+590)",
"dial_code": "+590",
"code": "MF",
"id": "52c9ffb5-5f7a-4698-9410-6c0ae5651774"
},
"+1 671": {
"country": "Guam",
"name": "Guam (+1 671)",
"dial_code": "+1 671",
"code": "GU",
"id": "53fef964-cf6c-444b-a7c2-1d3d6ce7236d"
},
"+502": {
"country": "Guatemala",
"name": "Guatemala (+502)",
"dial_code": "+502",
"code": "GT",
"id": "8d9ad90d-3c0d-413c-8816-f2c36ad686ec"
},
"+44": {
"country": "United Kingdom",
"name": "United Kingdom (+44)",
"dial_code": "+44",
"code": "GB",
"id": "94fd4a91-4f4c-4eeb-9430-57f14f81dc78"
},
"+224": {
"country": "Guinea",
"name": "Guinea (+224)",
"dial_code": "+224",
"code": "GN",
"id": "bbcb8392-2bac-44a0-8e54-c4520cb8a365"
},
"+245": {
"country": "Guinea-Bissau",
"name": "Guinea-Bissau (+245)",
"dial_code": "+245",
"code": "GW",
"id": "9efc590b-6ccd-46b3-a23b-5ab3e6d78066"
},
"+595": {
"country": "Paraguay",
"name": "Paraguay (+595)",
"dial_code": "+595",
"code": "PY",
"id": "c71c2a1c-10f6-4c13-8d29-1721621016b9"
},
"+509": {
"country": "Haiti",
"name": "Haiti (+509)",
"dial_code": "+509",
"code": "HT",
"id": "8c5ffca9-8a20-4a5e-a892-340d24051a2b"
},
"+379": {
"country": "Holy See (Vatican City State)",
"name": "Holy See (Vatican City State) (+379)",
"dial_code": "+379",
"code": "VA",
"id": "10db405e-495f-4799-9a60-48c2019c1532"
},
"+504": {
"country": "Honduras",
"name": "Honduras (+504)",
"dial_code": "+504",
"code": "HN",
"id": "a9584dc1-f750-4eb2-8750-bdd76c5b0b6e"
},
"+852": {
"country": "Hong Kong",
"name": "Hong Kong (+852)",
"dial_code": "+852",
"code": "HK",
"id": "ebc0f325-69cc-4ce1-ba39-0b081a7e1fe0"
},
"+36": {
"country": "Hungary",
"name": "Hungary (+36)",
"dial_code": "+36",
"code": "HU",
"id": "4fdcbc61-ed67-4254-8bcb-1dfacd917f52"
},
"+354": {
"country": "Iceland",
"name": "Iceland (+354)",
"dial_code": "+354",
"code": "IS",
"id": "aee6dd99-dc2b-4b8e-ba1d-fef4c890203f"
},
"+91": {
"country": "India",
"name": "India (+91)",
"dial_code": "+91",
"code": "IN",
"id": "0db07c8d-3c33-47a5-80fa-feeea66da7c2"
},
"+62": {
"country": "Indonesia",
"name": "Indonesia (+62)",
"dial_code": "+62",
"code": "ID",
"id": "9641a634-89b8-4c04-b1a9-784435d603a0"
},
"+98": {
"country": "Iran, Islamic Republic of Persian Gulf",
"name": "Iran, Islamic Republic of Persian Gulf (+98)",
"dial_code": "+98",
"code": "IR",
"id": "4c04ec2a-4ef5-4758-8a64-da79093d243b"
},
"+964": {
"country": "Iraq",
"name": "Iraq (+964)",
"dial_code": "+964",
"code": "IQ",
"id": "6f37a466-2af8-4ea7-9e4f-41898468f2bb"
},
"+353": {
"country": "Ireland",
"name": "Ireland (+353)",
"dial_code": "+353",
"code": "IE",
"id": "b26619e8-118b-47c3-acd8-dbaa7d06c3e7"
},
"+972": {
"country": "Israel",
"name": "Israel (+972)",
"dial_code": "+972",
"code": "IL",
"id": "15a8f0f2-ccad-49ea-b490-26c4b83f4003"
},
"+39": {
"country": "Italy",
"name": "Italy (+39)",
"dial_code": "+39",
"code": "IT",
"id": "3f83d8a6-7dc8-47f5-82f3-5edf572c34fc"
},
"+1 876": {
"country": "Jamaica",
"name": "Jamaica (+1 876)",
"dial_code": "+1 876",
"code": "JM",
"id": "899a1cdc-c9b8-4f58-94a7-3b0394979d9c"
},
"+81": {
"country": "Japan",
"name": "Japan (+81)",
"dial_code": "+81",
"code": "JP",
"id": "8c3f91f8-1a69-4136-9ae2-6c13e902be2d"
},
"+962": {
"country": "Jordan",
"name": "Jordan (+962)",
"dial_code": "+962",
"code": "JO",
"id": "753b0e8a-f71b-40f6-8676-7683518716ad"
},
"+7 7": {
"country": "Kazakhstan",
"name": "Kazakhstan (+7 7)",
"dial_code": "+7 7",
"code": "KZ",
"id": "8d6f72da-4a18-4544-9ca5-c77f706d66c3"
},
"+254": {
"country": "Kenya",
"name": "Kenya (+254)",
"dial_code": "+254",
"code": "KE",
"id": "2a5be433-6dc3-45f4-ab33-c5be908daabb"
},
"+686": {
"country": "Kiribati",
"name": "Kiribati (+686)",
"dial_code": "+686",
"code": "KI",
"id": "ceaed9cb-f1dd-4455-9965-d6c69a2a2bee"
},
"+850": {
"country": "Korea, Democratic People's Republic of Korea",
"name": "Korea, Democratic People's Republic of Korea (+850)",
"dial_code": "+850",
"code": "KP",
"id": "2909bbcd-520e-451a-bbe0-7c9f8083349f"
},
"+82": {
"country": "Korea, Republic of South Korea",
"name": "Korea, Republic of South Korea (+82)",
"dial_code": "+82",
"code": "KR",
"id": "8ed62e7c-026b-442e-a245-66b842f7a5a1"
},
"+965": {
"country": "Kuwait",
"name": "Kuwait (+965)",
"dial_code": "+965",
"code": "KW",
"id": "b9d1fe32-61d6-44bc-89ad-eb8ecf3677b7"
},
"+996": {
"country": "Kyrgyzstan",
"name": "Kyrgyzstan (+996)",
"dial_code": "+996",
"code": "KG",
"id": "72412ff0-6850-43d3-a87d-b4bb2177133d"
},
"+856": {
"country": "Laos",
"name": "Laos (+856)",
"dial_code": "+856",
"code": "LA",
"id": "ea36c4c3-4700-4f3d-84bc-cc5533b6abf5"
},
"+371": {
"country": "Latvia",
"name": "Latvia (+371)",
"dial_code": "+371",
"code": "LV",
"id": "14f70744-8772-464d-8a78-487a234b56c3"
},
"+961": {
"country": "Lebanon",
"name": "Lebanon (+961)",
"dial_code": "+961",
"code": "LB",
"id": "39d19186-e70f-49b0-a1b5-a96aa249c2fe"
},
"+266": {
"country": "Lesotho",
"name": "Lesotho (+266)",
"dial_code": "+266",
"code": "LS",
"id": "43cced83-f885-4e7b-b299-4ee3534f20a1"
},
"+231": {
"country": "Liberia",
"name": "Liberia (+231)",
"dial_code": "+231",
"code": "LR",
"id": "a03ec9d5-5618-4da1-8e6f-e942771f090f"
},
"+218": {
"country": "Libyan Arab Jamahiriya",
"name": "Libyan Arab Jamahiriya (+218)",
"dial_code": "+218",
"code": "LY",
"id": "fa80c53d-0e06-4e3a-8b3d-7aab16cdd61b"
},
"+423": {
"country": "Liechtenstein",
"name": "Liechtenstein (+423)",
"dial_code": "+423",
"code": "LI",
"id": "3e356b0e-d5a5-452b-948b-4dfaa54378a4"
},
"+370": {
"country": "Lithuania",
"name": "Lithuania (+370)",
"dial_code": "+370",
"code": "LT",
"id": "502de5db-61aa-4f59-b4df-729d43a1d4bc"
},
"+352": {
"country": "Luxembourg",
"name": "Luxembourg (+352)",
"dial_code": "+352",
"code": "LU",
"id": "36a898eb-b8c1-47b3-91a2-f34bc3f62871"
},
"+853": {
"country": "Macao",
"name": "Macao (+853)",
"dial_code": "+853",
"code": "MO",
"id": "77b3b061-3d48-4e2c-9d49-5fedeaf138aa"
},
"+389": {
"country": "Macedonia",
"name": "Macedonia (+389)",
"dial_code": "+389",
"code": "MK",
"id": "a2706675-f46f-476b-b152-616238045baa"
},
"+261": {
"country": "Madagascar",
"name": "Madagascar (+261)",
"dial_code": "+261",
"code": "MG",
"id": "a3325f55-797f-4f45-ac4d-e0cf252f2fc6"
},
"+265": {
"country": "Malawi",
"name": "Malawi (+265)",
"dial_code": "+265",
"code": "MW",
"id": "bf58ad82-e12d-42e6-b129-aab0a1d80605"
},
"+60": {
"country": "Malaysia",
"name": "Malaysia (+60)",
"dial_code": "+60",
"code": "MY",
"id": "85bdcf28-2d3c-477a-86ff-7259c2f507d8"
},
"+960": {
"country": "Maldives",
"name": "Maldives (+960)",
"dial_code": "+960",
"code": "MV",
"id": "85f532e9-c398-4479-9231-7528403e8485"
},
"+223": {
"country": "Mali",
"name": "Mali (+223)",
"dial_code": "+223",
"code": "ML",
"id": "f4bb60f0-fccf-4926-a9bc-5555cb6c8252"
},
"+356": {
"country": "Malta",
"name": "Malta (+356)",
"dial_code": "+356",
"code": "MT",
"id": "2e46ef04-75b3-492e-a8e1-b54691f23962"
},
"+692": {
"country": "Marshall Islands",
"name": "Marshall Islands (+692)",
"dial_code": "+692",
"code": "MH",
"id": "1d7314d6-e80e-4000-b61c-35e99b78e62c"
},
"+596": {
"country": "Martinique",
"name": "Martinique (+596)",
"dial_code": "+596",
"code": "MQ",
"id": "8539ce77-cbb3-4773-8479-0061079b9258"
},
"+222": {
"country": "Mauritania",
"name": "Mauritania (+222)",
"dial_code": "+222",
"code": "MR",
"id": "79471a7a-2cb8-4a5e-9e95-d14d3cc157f4"
},
"+230": {
"country": "Mauritius",
"name": "Mauritius (+230)",
"dial_code": "+230",
"code": "MU",
"id": "97a350c6-832f-484f-8f47-e84907b4d751"
},
"+262": {
"country": "Reunion",
"name": "Reunion (+262)",
"dial_code": "+262",
"code": "RE",
"id": "8560374a-ec40-40ea-93c0-5bf009f2b94d"
},
"+52": {
"country": "Mexico",
"name": "Mexico (+52)",
"dial_code": "+52",
"code": "MX",
"id": "fad30c8c-c70c-43ca-83f1-dc63a1842342"
},
"+691": {
"country": "Micronesia, Federated States of Micronesia",
"name": "Micronesia, Federated States of Micronesia (+691)",
"dial_code": "+691",
"code": "FM",
"id": "ee60f4bb-02e9-48fb-86eb-1d6ff6602cb8"
},
"+373": {
"country": "Moldova",
"name": "Moldova (+373)",
"dial_code": "+373",
"code": "MD",
"id": "3c4dec36-86ac-44dd-bdb0-b4ca24eb18f4"
},
"+377": {
"country": "Monaco",
"name": "Monaco (+377)",
"dial_code": "+377",
"code": "MC",
"id": "aee63866-bd6e-4d9d-bde9-f1d431a2c231"
},
"+976": {
"country": "Mongolia",
"name": "Mongolia (+976)",
"dial_code": "+976",
"code": "MN",
"id": "b74b7eae-47a5-495c-8388-489cae9bba66"
},
"+382": {
"country": "Montenegro",
"name": "Montenegro (+382)",
"dial_code": "+382",
"code": "ME",
"id": "1917e73a-da3d-4610-9e35-a534a1c4b2fd"
},
"+1664": {
"country": "Montserrat",
"name": "Montserrat (+1664)",
"dial_code": "+1664",
"code": "MS",
"id": "d7e34c23-9c89-42b1-85ab-d9d981161baf"
},
"+212": {
"country": "Morocco",
"name": "Morocco (+212)",
"dial_code": "+212",
"code": "MA",
"id": "29624435-29e7-4f92-92b7-fe9849e4e510"
},
"+258": {
"country": "Mozambique",
"name": "Mozambique (+258)",
"dial_code": "+258",
"code": "MZ",
"id": "a278b33c-f8d8-4a41-881e-df90e2d9ccfd"
},
"+95": {
"country": "Myanmar",
"name": "Myanmar (+95)",
"dial_code": "+95",
"code": "MM",
"id": "c14289e7-c442-439c-b131-1d323ebf4afd"
},
"+264": {
"country": "Namibia",
"name": "Namibia (+264)",
"dial_code": "+264",
"code": "NA",
"id": "8a1ec75b-6058-4cac-ba48-3464c041922b"
},
"+674": {
"country": "Nauru",
"name": "Nauru (+674)",
"dial_code": "+674",
"code": "NR",
"id": "f0272ad4-6c6f-4038-94f9-db51cec528b0"
},
"+977": {
"country": "Nepal",
"name": "Nepal (+977)",
"dial_code": "+977",
"code": "NP",
"id": "ac599af8-48ed-4ab0-8fda-0d5d5d0d6f45"
},
"+31": {
"country": "Netherlands",
"name": "Netherlands (+31)",
"dial_code": "+31",
"code": "NL",
"id": "458e0af6-e2a1-4291-a18b-17a203e2b788"
},
"+599": {
"country": "Netherlands Antilles",
"name": "Netherlands Antilles (+599)",
"dial_code": "+599",
"code": "AN",
"id": "7de4ccce-ce3d-4d91-b65b-7c99b004d98c"
},
"+687": {
"country": "New Caledonia",
"name": "New Caledonia (+687)",
"dial_code": "+687",
"code": "NC",
"id": "137f2e2a-85b9-47ea-aeab-f86939e7aec2"
},
"+64": {
"country": "New Zealand",
"name": "New Zealand (+64)",
"dial_code": "+64",
"code": "NZ",
"id": "8782f1db-e7f9-42c8-b653-7c618b777f8c"
},
"+505": {
"country": "Nicaragua",
"name": "Nicaragua (+505)",
"dial_code": "+505",
"code": "NI",
"id": "8d8b11fe-8f1a-45ed-b2e1-8630bf9828c6"
},
"+227": {
"country": "Niger",
"name": "Niger (+227)",
"dial_code": "+227",
"code": "NE",
"id": "3339f147-1720-4a34-82de-637208371f14"
},
"+234": {
"country": "Nigeria",
"name": "Nigeria (+234)",
"dial_code": "+234",
"code": "NG",
"id": "1c6ca5d4-a88f-422d-a294-d10e57d4a582"
},
"+683": {
"country": "Niue",
"name": "Niue (+683)",
"dial_code": "+683",
"code": "NU",
"id": "e8e32936-7350-47b7-ab33-5cae8db9d0e2"
},
"+1 670": {
"country": "Northern Mariana Islands",
"name": "Northern Mariana Islands (+1 670)",
"dial_code": "+1 670",
"code": "MP",
"id": "d15e49ec-e4b5-4ba6-b858-dfee45be1810"
},
"+47": {
"country": "Svalbard and Jan Mayen",
"name": "Svalbard and Jan Mayen (+47)",
"dial_code": "+47",
"code": "SJ",
"id": "2caff444-a3f9-4287-8418-c204677da32b"
},
"+968": {
"country": "Oman",
"name": "Oman (+968)",
"dial_code": "+968",
"code": "OM",
"id": "efe8c3ab-1ff9-4b69-a4c2-06267de440ab"
},
"+92": {
"country": "Pakistan",
"name": "Pakistan (+92)",
"dial_code": "+92",
"code": "PK",
"id": "22a2aa96-cd2f-426d-921e-bbff1aa04be0"
},
"+680": {
"country": "Palau",
"name": "Palau (+680)",
"dial_code": "+680",
"code": "PW",
"id": "0f8ac08b-5947-4746-bc77-98a43c42d812"
},
"+970": {
"country": "Palestinian Territory, Occupied",
"name": "Palestinian Territory, Occupied (+970)",
"dial_code": "+970",
"code": "PS",
"id": "2eb1618a-ccf1-42fc-b183-7e67f8f0a275"
},
"+507": {
"country": "Panama",
"name": "Panama (+507)",
"dial_code": "+507",
"code": "PA",
"id": "286b6bf0-e333-4903-8977-be5fcd58aaef"
},
"+675": {
"country": "Papua New Guinea",
"name": "Papua New Guinea (+675)",
"dial_code": "+675",
"code": "PG",
"id": "7eb37f4a-f275-46c2-a09e-14588baa1abb"
},
"+51": {
"country": "Peru",
"name": "Peru (+51)",
"dial_code": "+51",
"code": "PE",
"id": "798165e5-990c-4357-8681-44ebafd60701"
},
"+63": {
"country": "Philippines",
"name": "Philippines (+63)",
"dial_code": "+63",
"code": "PH",
"id": "d465ffde-906e-4780-bae3-2b19e2c3653d"
},
"+872": {
"country": "Pitcairn",
"name": "Pitcairn (+872)",
"dial_code": "+872",
"code": "PN",
"id": "81d0a21b-4de2-4900-8424-c8004363f5bc"
},
"+48": {
"country": "Poland",
"name": "Poland (+48)",
"dial_code": "+48",
"code": "PL",
"id": "b9f1383c-6415-4f81-82bd-945a48f0b336"
},
"+351": {
"country": "Portugal",
"name": "Portugal (+351)",
"dial_code": "+351",
"code": "PT",
"id": "bfa7cf4e-8612-471e-aaa8-066376ff71d9"
},
"+1 939": {
"country": "Puerto Rico",
"name": "Puerto Rico (+1 939)",
"dial_code": "+1 939",
"code": "PR",
"id": "f93e2c67-df98-4117-9777-73e5fc9b7500"
},
"+974": {
"country": "Qatar",
"name": "Qatar (+974)",
"dial_code": "+974",
"code": "QA",
"id": "ee53ce44-31aa-46a3-bb7b-b3883a8e7703"
},
"+40": {
"country": "Romania",
"name": "Romania (+40)",
"dial_code": "+40",
"code": "RO",
"id": "41cc0ccc-8257-42a9-9f6d-540a6ce5fe6f"
},
"+7": {
"country": "Russia",
"name": "Russia (+7)",
"dial_code": "+7",
"code": "RU",
"id": "d9e50c5a-5d2c-492c-81ca-68bff37c8396"
},
"+250": {
"country": "Rwanda",
"name": "Rwanda (+250)",
"dial_code": "+250",
"code": "RW",
"id": "a3894dc8-30ec-414d-8b21-9fe7a7ae80b9"
},
"+290": {
"country": "Saint Helena, Ascension and Tristan Da Cunha",
"name": "Saint Helena, Ascension and Tristan Da Cunha (+290)",
"dial_code": "+290",
"code": "SH",
"id": "44572bb7-caac-4047-b33c-075dee578b8b"
},
"+1 869": {
"country": "Saint Kitts and Nevis",
"name": "Saint Kitts and Nevis (+1 869)",
"dial_code": "+1 869",
"code": "KN",
"id": "4d385df2-713a-4924-a826-76bd577ca69e"
},
"+1 758": {
"country": "Saint Lucia",
"name": "Saint Lucia (+1 758)",
"dial_code": "+1 758",
"code": "LC",
"id": "dab7b518-966e-4b66-bbca-2ffb281c7c3e"
},
"+508": {
"country": "Saint Pierre and Miquelon",
"name": "Saint Pierre and Miquelon (+508)",
"dial_code": "+508",
"code": "PM",
"id": "37e63f76-dd8d-43b3-b254-55f4766b5647"
},
"+1 784": {
"country": "Saint Vincent and the Grenadines",
"name": "Saint Vincent and the Grenadines (+1 784)",
"dial_code": "+1 784",
"code": "VC",
"id": "03310fbd-ffb1-4cf8-948a-cd675a45532a"
},
"+685": {
"country": "Samoa",
"name": "Samoa (+685)",
"dial_code": "+685",
"code": "WS",
"id": "c48ab915-2412-484f-a18c-5f177ff98d4c"
},
"+378": {
"country": "San Marino",
"name": "San Marino (+378)",
"dial_code": "+378",
"code": "SM",
"id": "13f2c521-761a-4454-aafb-1bab2bb75474"
},
"+239": {
"country": "Sao Tome and Principe",
"name": "Sao Tome and Principe (+239)",
"dial_code": "+239",
"code": "ST",
"id": "5e1ae722-5116-4239-b4f0-94fdfa24da20"
},
"+966": {
"country": "Saudi Arabia",
"name": "Saudi Arabia (+966)",
"dial_code": "+966",
"code": "SA",
"id": "f2e2d885-1221-4429-ac2d-e1400c200e7d"
},
"+221": {
"country": "Senegal",
"name": "Senegal (+221)",
"dial_code": "+221",
"code": "SN",
"id": "e7ea9d00-67f5-4bd0-aae6-147c7b8bdedb"
},
"+381": {
"country": "Serbia",
"name": "Serbia (+381)",
"dial_code": "+381",
"code": "RS",
"id": "596d4a9c-d71b-458e-9a27-02801ee9c9be"
},
"+248": {
"country": "Seychelles",
"name": "Seychelles (+248)",
"dial_code": "+248",
"code": "SC",
"id": "42e1577d-b683-4e49-a292-094c641c00a0"
},
"+232": {
"country": "Sierra Leone",
"name": "Sierra Leone (+232)",
"dial_code": "+232",
"code": "SL",
"id": "022c437f-0cd7-4e1a-9c4c-7482bf3fdbeb"
},
"+65": {
"country": "Singapore",
"name": "Singapore (+65)",
"dial_code": "+65",
"code": "SG",
"id": "d21a41b5-ddc7-4a79-800b-c6552c924129"
},
"+421": {
"country": "Slovakia",
"name": "Slovakia (+421)",
"dial_code": "+421",
"code": "SK",
"id": "1dd11539-cec5-4823-a8b1-10dbfec21fa1"
},
"+386": {
"country": "Slovenia",
"name": "Slovenia (+386)",
"dial_code": "+386",
"code": "SI",
"id": "22218b8b-614c-40c1-8821-5147e2fc1f1c"
},
"+677": {
"country": "Solomon Islands",
"name": "Solomon Islands (+677)",
"dial_code": "+677",
"code": "SB",
"id": "5eb41e9e-0852-4ded-b0dd-62b50b2799b2"
},
"+252": {
"country": "Somalia",
"name": "Somalia (+252)",
"dial_code": "+252",
"code": "SO",
"id": "d2ff70f4-e130-4853-b2b3-d039e71f0a7d"
},
"+27": {
"country": "South Africa",
"name": "South Africa (+27)",
"dial_code": "+27",
"code": "ZA",
"id": "9c5e3a53-e3c3-44b7-bbd9-5cfe1c5db5f7"
},
"+34": {
"country": "Spain",
"name": "Spain (+34)",
"dial_code": "+34",
"code": "ES",
"id": "1b3f1f27-9b96-4425-a25d-92d851856c78"
},
"+94": {
"country": "Sri Lanka",
"name": "Sri Lanka (+94)",
"dial_code": "+94",
"code": "LK",
"id": "86c60d95-7aa0-4369-a1e2-3b656109cd0b"
},
"+249": {
"country": "Sudan",
"name": "Sudan (+249)",
"dial_code": "+249",
"code": "SD",
"id": "f43b0a12-667b-45dd-9db1-07e501dd6532"
},
"+597": {
"country": "Suriname",
"name": "Suriname (+597)",
"dial_code": "+597",
"code": "SR",
"id": "3c8867d2-00ab-49c7-9cd8-4fcbe94079e6"
},
"+268": {
"country": "Swaziland",
"name": "Swaziland (+268)",
"dial_code": "+268",
"code": "SZ",
"id": "531cd58d-69d7-4242-bddb-81415e742258"
},
"+46": {
"country": "Sweden",
"name": "Sweden (+46)",
"dial_code": "+46",
"code": "SE",
"id": "b65f7a11-a6a0-4458-a322-ea4d3fbcf678"
},
"+41": {
"country": "Switzerland",
"name": "Switzerland (+41)",
"dial_code": "+41",
"code": "CH",
"id": "3c854c8f-29cc-4892-b06c-3af6a18b9ec3"
},
"+963": {
"country": "Syrian Arab Republic",
"name": "Syrian Arab Republic (+963)",
"dial_code": "+963",
"code": "SY",
"id": "aa7929b0-719b-4077-a10b-e2b059bfc96e"
},
"+886": {
"country": "Taiwan",
"name": "Taiwan (+886)",
"dial_code": "+886",
"code": "TW",
"id": "13dbf70f-9fe8-48de-866a-0491de530306"
},
"+992": {
"country": "Tajikistan",
"name": "Tajikistan (+992)",
"dial_code": "+992",
"code": "TJ",
"id": "0a6f9ad7-329a-4b6e-a5e0-e94a683c6686"
},
"+255": {
"country": "Tanzania, United Republic of Tanzania",
"name": "Tanzania, United Republic of Tanzania (+255)",
"dial_code": "+255",
"code": "TZ",
"id": "931bd9f1-267c-4e59-b24c-e9c1bc1bcd90"
},
"+66": {
"country": "Thailand",
"name": "Thailand (+66)",
"dial_code": "+66",
"code": "TH",
"id": "ec0705da-301d-446a-b5c3-c6bc30be9f9c"
},
"+670": {
"country": "Timor-Leste",
"name": "Timor-Leste (+670)",
"dial_code": "+670",
"code": "TL",
"id": "a78a5787-cc5a-4c67-bed1-7d5643f4bbaf"
},
"+228": {
"country": "Togo",
"name": "Togo (+228)",
"dial_code": "+228",
"code": "TG",
"id": "77c3ea90-d24a-4909-9da1-f8facee078f5"
},
"+690": {
"country": "Tokelau",
"name": "Tokelau (+690)",
"dial_code": "+690",
"code": "TK",
"id": "15d7ab35-80bc-461c-b710-f3ce5854826d"
},
"+676": {
"country": "Tonga",
"name": "Tonga (+676)",
"dial_code": "+676",
"code": "TO",
"id": "d5de1a43-79bb-46e7-9baf-6bffba95c120"
},
"+1 868": {
"country": "Trinidad and Tobago",
"name": "Trinidad and Tobago (+1 868)",
"dial_code": "+1 868",
"code": "TT",
"id": "ff8055b3-ad4e-4aa9-a37d-ba3406d84a49"
},
"+216": {
"country": "Tunisia",
"name": "Tunisia (+216)",
"dial_code": "+216",
"code": "TN",
"id": "3aa55657-d28d-43a9-9b05-c94a7fa508c3"
},
"+90": {
"country": "Turkey",
"name": "Turkey (+90)",
"dial_code": "+90",
"code": "TR",
"id": "8c6a2dbd-dd59-42f8-9a36-fbd371bb05fd"
},
"+993": {
"country": "Turkmenistan",
"name": "Turkmenistan (+993)",
"dial_code": "+993",
"code": "TM",
"id": "7b8fe5ed-ba21-4abf-bce1-265a2161ed9a"
},
"+1 649": {
"country": "Turks and Caicos Islands",
"name": "Turks and Caicos Islands (+1 649)",
"dial_code": "+1 649",
"code": "TC",
"id": "978204ed-98bf-49ef-bb08-7d1b1745463a"
},
"+688": {
"country": "Tuvalu",
"name": "Tuvalu (+688)",
"dial_code": "+688",
"code": "TV",
"id": "061c9c37-6165-4c03-9426-2cff6069ee1b"
},
"+256": {
"country": "Uganda",
"name": "Uganda (+256)",
"dial_code": "+256",
"code": "UG",
"id": "d00c67a3-51a8-4b4d-9755-0bfadc28eeb0"
},
"+380": {
"country": "Ukraine",
"name": "Ukraine (+380)",
"dial_code": "+380",
"code": "UA",
"id": "1d41e7e7-d666-4b27-9940-30648de57944"
},
"+971": {
"country": "United Arab Emirates",
"name": "United Arab Emirates (+971)",
"dial_code": "+971",
"code": "AE",
"id": "4377ef0b-2ed9-45a2-a3df-4726ce369e85"
},
"+598": {
"country": "Uruguay",
"name": "Uruguay (+598)",
"dial_code": "+598",
"code": "UY",
"id": "f94c33ca-4540-46f7-8902-c8d87ba338e4"
},
"+998": {
"country": "Uzbekistan",
"name": "Uzbekistan (+998)",
"dial_code": "+998",
"code": "UZ",
"id": "3a2fa5e4-517d-4fac-a1b8-fbcfb9cd17be"
},
"+678": {
"country": "Vanuatu",
"name": "Vanuatu (+678)",
"dial_code": "+678",
"code": "VU",
"id": "65675db1-fb44-4937-ade7-a65a7383cfc4"
},
"+58": {
"country": "Venezuela, Bolivarian Republic of Venezuela",
"name": "Venezuela, Bolivarian Republic of Venezuela (+58)",
"dial_code": "+58",
"code": "VE",
"id": "dbc659bb-72bf-4372-8ea6-382fcdd94037"
},
"+84": {
"country": "Vietnam",
"name": "Vietnam (+84)",
"dial_code": "+84",
"code": "VN",
"id": "8f4cd568-8cec-4c76-aeed-d2b74ccc653a"
},
"+1 284": {
"country": "Virgin Islands, British",
"name": "Virgin Islands, British (+1 284)",
"dial_code": "+1 284",
"code": "VG",
"id": "01eea7b3-a7d5-4d5d-8f68-ff2171852393"
},
"+1 340": {
"country": "Virgin Islands, U.S.",
"name": "Virgin Islands, U.S. (+1 340)",
"dial_code": "+1 340",
"code": "VI",
"id": "580363b2-2b36-4061-85b3-f98b08055e04"
},
"+681": {
"country": "Wallis and Futuna",
"name": "Wallis and Futuna (+681)",
"dial_code": "+681",
"code": "WF",
"id": "25c8ead7-0ded-49c3-9a29-baa540babaca"
},
"+967": {
"country": "Yemen",
"name": "Yemen (+967)",
"dial_code": "+967",
"code": "YE",
"id": "3415d105-ad47-4f3d-894f-ae1de7e98d76"
},
"+260": {
"country": "Zambia",
"name": "Zambia (+260)",
"dial_code": "+260",
"code": "ZM",
"id": "dc43f135-af2d-4752-9091-7522e64e9c59"
},
"+263": {
"country": "Zimbabwe",
"name": "Zimbabwe (+263)",
"dial_code": "+263",
"code": "ZW",
"id": "b7225d4d-5fe5-424d-a12c-37e023e82695"
}
}
Raw
input-base.tsx
import styled from 'astroturf';
import React, { useState, useCallback, ChangeEvent, FC } from 'react';
export type InputProps<T = HTMLInputElement> = {
name: string;
id?: string;
onChange?: (e: ChangeEvent<T>) => void;
value: string | number;
label: string;
}
export const InputBase: FC<InputProps> = (props) => {
const { id, value, label, children } = props;
const [focused, changeFocused] = useState(false);
const onFocus = useCallback(
() => changeFocused(true),
[changeFocused],
);
const onBlur = useCallback(
() => changeFocused(false),
[changeFocused],
);
const isTitleTop = focused || value !== '';
return (
<Label
htmlFor={id}
onFocus={onFocus}
onBlur={onBlur}
data-focused={focused}
>
<Title data-top={isTitleTop}>{label}</Title>
{children}
</Label>
);
};
const Label = styled('label')`
display: flex;
position: relative;
border-radius: 8px;
--padding: 26px 36px 10px 12px;
&:before {
content: '';
display: block;
position: absolute;
box-sizing: border-box;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid rgb(176, 176, 176);
border-radius: 8px;
transition: border-color .2s ease-in-out;
pointer-events: none;
}
&[data-focused='true']:before {
border-width: 2px;
border-color: #222;
}
`;
const Title = styled('span')`
position: absolute;
top: 18px;
left: 12px;
color: rgb(113, 113, 113);
font-size: 16px;
transition: transform .2s ease-in-out;
transform: translate(0, 0);
&[data-top='true'] {
transform: translate(-10px, -12px) scale(.8);
}
`;
Raw
input-phone-number.tsx
import styled from 'astroturf';
import React, { useState, FC, ChangeEvent, useCallback } from 'react';
import { InputBase, InputProps } from 'ui/input/input-base';
const phoneRegExp = /\d+$/;
export const InputPhoneNumber: FC<InputProps & { code: string }> = (props) => {
const { name, id = name, value, label, onChange, code } = props;
const [focused, changeFocused] = useState(false);
const onFocus = useCallback(
() => changeFocused(true),
[changeFocused],
);
const onBlur = useCallback(
() => changeFocused(false),
[changeFocused],
);
const validate = useCallback(
(e: ChangeEvent<HTMLInputElement>) => {
if (e.target.value === '' || phoneRegExp.test(e.target.value)) {
onChange && onChange(e);
}
},
[onChange]
);
const isCodeVisible = focused || value !== '';
return (
<InputBase
name={name}
id={id}
value={value}
label={label}
>
<Code
data-visible={isCodeVisible}
>
{code}
</Code>
<Input
onFocus={onFocus}
onBlur={onBlur}
type="tel"
value={value}
onChange={validate}
id={id}
name={id}
/>
</InputBase>
);
};
const Code = styled('span')`
padding: var(--padding);
padding-right: 0;
font-size: 16px;
opacity: 0;
transition: .2s ease-in-out;
&[data-visible='true'] {
opacity: 1;
}
`;
const Input = styled('input')`
display: block;
width: 100%;
padding: var(--padding);
box-sizing: border-box;
border-width: 0;
border-color: transparent;
outline: none;
font-size: 16px;
`;
Raw
input-phone.tsx
import React, { FC, useState } from 'react';
import styled from 'astroturf';
import countries from 'ui/input/countries.json';
import { InputSelect, OptionItem } from 'ui/input/input-select';
import { InputPhoneNumber } from 'ui/input/input-phone-number';
interface CountryCode {
country: string,
name: string,
dial_code: string,
code: string,
id: string
}
export type PhoneNumber = {
code: string;
number: string;
};
type InputFullPhoneProps = {
onChange: (payload: PhoneNumber) => void;
value: PhoneNumber,
};
const options: OptionItem[] = Object
.entries(countries)
.map(([value, { name }]: [string, CountryCode]) => ({
value,
label: name,
}));
export const InputPhone: FC<InputFullPhoneProps> = (props) => {
const { value } = props;
const [code, changeCode] = useState(value.code);
const [number, updateNumber] = useState(value.number);
return (
<InputsGroup>
<InputSelect
value={code}
options={options}
onChange={e => changeCode(e.target.value)}
label='Country/Region'
name='phone-code'
/>
<InputPhoneNumber
code={code}
value={number}
onChange={e => updateNumber(e.target.value)}
label='Phone number'
name='phone'
/>
</InputsGroup>
);
};
const InputsGroup = styled('div')`
& > label:first-child {
margin-bottom: -1px;
&::before {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
}
& > label:last-child:before {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
`;
Raw
input-select.tsx
import styled from 'astroturf';
import React, { FC } from 'react';
import { InputBase, InputProps } from './input-base';
export type InputSelectProps = InputProps<HTMLSelectElement> & {
options: OptionItem[],
}
export interface OptionItem {
value: string | number;
label?: string | number;
}
export const InputSelect: FC<InputSelectProps> = (props) => {
const {
name,
id = name,
label,
value,
options,
} = props;
return (
<InputBase
name={name}
id={id}
label={label}
value={value}
>
<Select
name={props.name}
id={props.id}
value={props.value}
onChange={props.onChange}
>
{options.map(({ value, label }) => (
<option
key={value}
value={value}
>
{label || value}
</option>
))}
</Select>
</InputBase>
);
};
const Select = styled('select')`
appearance: none;
display: block;
background: transparent;
border-color: transparent;
padding: var(--padding);
width: 100%;
font-size: 16px;
outline: none;
`;
const Title = styled('span')`
position: absolute;
top: 8px !important;
left: 12px !important;
font-size: 13px;
color: rgb(113, 113, 113);
`;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment