"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[158],{6289:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>p,contentTitle:()=>s,default:()=>m,frontMatter:()=>i,metadata:()=>u,toc:()=>l});var o=n(4321),a=(n(2983),n(4993)),r=n(1475);const i={},s="Modify countries",u={unversionedId:"Usage/ModifyCountries",id:"Usage/ModifyCountries",title:"Modify countries",description:"You can define your own country list for PhoneInput.",source:"@site/docs/02-Usage/02-ModifyCountries.md",sourceDirName:"02-Usage",slug:"/Usage/ModifyCountries",permalink:"/docs/Usage/ModifyCountries",draft:!1,editUrl:"https://github.com/goveo/react-international-phone/tree/master/packages/docs/docs/02-Usage/02-ModifyCountries.md",tags:[],version:"current",sidebarPosition:2,frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"PhoneInput API",permalink:"/docs/Usage/PhoneInput"},next:{title:"Phone validation",permalink:"/docs/Usage/PhoneValidation/"}},p={},d=r.Z8.filter((t=>{const{iso2:e}=(0,r.ow)(t);return["us","ua","gb"].includes(e)})),l=[{value:"Example",id:"example",level:2},{value:"Country Data Type",id:"country-data-type",level:2}],c={toc:l};function m(t){let{components:e,...n}=t;return(0,a.kt)("wrapper",(0,o.Z)({},c,n,{components:e,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"modify-countries"},"Modify countries"),(0,a.kt)("p",null,"You can define your own country list for ",(0,a.kt)("strong",{parentName:"p"},"PhoneInput"),".\nJust import ",(0,a.kt)("inlineCode",{parentName:"p"},"defaultCountries")," and update it how you want."),(0,a.kt)("h2",{id:"example"},"Example"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},"import { useState } from 'react';\nimport {\n PhoneInput,\n // highlight-start\n defaultCountries,\n parseCountry,\n // highlight-end\n} from 'react-international-phone';\n\n// highlight-start\nconst countries = defaultCountries.filter((country) => {\n const { iso2 } = parseCountry(country);\n return ['us', 'ua', 'gb'].includes(iso2);\n});\n// highlight-end\n\nconst App = () => {\n const [phone, setPhone] = useState('');\n\n return (\n <div>\n <PhoneInput\n defaultCountry=\"ua\"\n phone={phone}\n onChange={setPhone}\n // highlight-start\n countries={countries}\n // highlight-end\n />\n </div>\n );\n};\n")),(0,a.kt)("p",null,"Output:"),(0,a.kt)(r.sb,{defaultCountry:"ua",countries:d,mdxType:"PhoneInput"}),(0,a.kt)("h2",{id:"country-data-type"},"Country Data Type"),(0,a.kt)("p",null,"Each country in ",(0,a.kt)("inlineCode",{parentName:"p"},"defaultCountries")," follows this format:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"[\n string, // country name\n CountryIso2, // iso2 code\n string, // international dial code\n FormatConfig | string, // format (optional)\n number, // order priority (optional)\n string[], // area codes (optional)\n]\n")),(0,a.kt)("admonition",{type:"note"},(0,a.kt)("p",{parentName:"admonition"},"The format can be either a string or a format-config object of the following type:"),(0,a.kt)("pre",{parentName:"admonition"},(0,a.kt)("code",{parentName:"pre",className:"language-ts"},'// Record with required "default" key\ntype FormatConfig = Record<string, string> & { default: string };\n')),(0,a.kt)("p",{parentName:"admonition"},"It should contain stringified regexp as keys and mask as value. Providing ",(0,a.kt)("inlineCode",{parentName:"p"},"default")," key is required.",(0,a.kt)("br",null),"\nExample of format config object:"),(0,a.kt)("pre",{parentName:"admonition"},(0,a.kt)("code",{parentName:"pre",className:"language-js"},"{\n 'default': '. .... ....',\n '/^4/': '... ... ...',\n '/^5(?!50)/': '... ... ...'\n}\n"))),(0,a.kt)("p",null,"You can use these data to filter/modify country list."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"const [name, iso2, dialCode, format, priority, areaCodes] = defaultCountries[0];\n")),(0,a.kt)("admonition",{type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"You can use the ",(0,a.kt)("inlineCode",{parentName:"p"},"parseCountry")," helper function to convert the country data array to an object, modify it in some way, and build back with ",(0,a.kt)("inlineCode",{parentName:"p"},"buildCountryData")),(0,a.kt)("pre",{parentName:"admonition"},(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"const lowercasedCountries = defaultCountries.map((country) => {\n const parsedCountry = parseCountry(country);\n // lowercase country names, for example\n parsedCountry.name = parsedCountry.name.toLowerCase();\n\n return buildCountryData(parsedCountry);\n});\n"))),(0,a.kt)("p",null,"Country data was originally taken from ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/bl00mber/react-phone-input-2/blob/master/src/rawCountries.js"},"react-phone-input-2")," \ud83d\ude4f"))}m.isMDXComponent=!0}}]);