"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}}]);