"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[718],{9893:(n,e,t)=>{t.r(e),t.d(e,{assets:()=>g,contentTitle:()=>c,default:()=>f,frontMatter:()=>u,metadata:()=>p,toc:()=>m});var s=t(4321),o=t(2983),a=t(4993),r=t(1475);const l=[{iso2:"ua",src:"/flags/ua.svg"},{iso2:"fr",src:"/flags/fr.svg"},{iso2:"jp",src:"/flags/jp.svg"},{iso2:"pl",src:"/flags/pl.svg"}],i=()=>{const[n,e]=(0,o.useState)("");return o.createElement(r.sb,{countries:r.Z8.filter((n=>{const e=(0,r.ow)(n);return l.map((n=>n.iso2)).includes(e.iso2)})),flags:l,style:{"--react-international-phone-flag-width":"24px","--react-international-phone-flag-height":"15px"},value:n,onChange:e,defaultCountry:"jp",placeholder:"Phone number"})},u={},c="Custom country flags",p={unversionedId:"Usage/CustomCountryFlags/index",id:"Usage/CustomCountryFlags/index",title:"Custom country flags",description:"You can pass the flags prop to `` component to render custom country flags.",source:"@site/docs/02-Usage/04-CustomCountryFlags/index.md",sourceDirName:"02-Usage/04-CustomCountryFlags",slug:"/Usage/CustomCountryFlags/",permalink:"/docs/Usage/CustomCountryFlags/",draft:!1,editUrl:"https://github.com/goveo/react-international-phone/tree/master/packages/docs/docs/02-Usage/04-CustomCountryFlags/index.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Phone validation",permalink:"/docs/Usage/PhoneValidation/"},next:{title:"Get active country mask",permalink:"/docs/Usage/GetActiveCountryMask"}},g={},m=[{value:"Basic Example",id:"basic-example",level:2}],d={toc:m};function f(n){let{components:e,...t}=n;return(0,a.kt)("wrapper",(0,s.Z)({},d,t,{components:e,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"custom-country-flags"},"Custom country flags"),(0,a.kt)("p",null,"You can pass the ",(0,a.kt)("inlineCode",{parentName:"p"},"flags")," prop to ",(0,a.kt)("inlineCode",{parentName:"p"},"<PhoneInput/>")," component to render custom country flags.",(0,a.kt)("br",null),"\n",(0,a.kt)("inlineCode",{parentName:"p"},"flags")," should be an array of ",(0,a.kt)("inlineCode",{parentName:"p"},"{ iso2: string, src: string }")," objects."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},"<PhoneInput\n  flags={[\n    {\n      iso2: 'ua',\n      src: '/flags/ua.svg',\n    },\n    {\n      iso2: 'fr',\n      src: '/flags/fr.svg',\n    },\n    // ...\n  ]}\n/>\n")),(0,a.kt)("admonition",{type:"note"},(0,a.kt)("p",{parentName:"admonition"},"If icon for some country is not provided, the default twemoji country icon one will be rendered.")),(0,a.kt)("h2",{id:"basic-example"},"Basic Example"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},"import 'react-international-phone/style.css';\n\nimport React, { useState } from 'react';\nimport {\n  defaultCountries,\n  parseCountry,\n  PhoneInput,\n} from 'react-international-phone';\n\nconst customFlags = [\n  {\n    iso2: 'ua',\n    src: '/flags/ua.svg',\n  },\n  {\n    iso2: 'fr',\n    src: '/flags/fr.svg',\n  },\n  {\n    iso2: 'jp',\n    src: '/flags/jp.svg',\n  },\n  {\n    iso2: 'pl',\n    src: '/flags/pl.svg',\n  },\n];\n\nconst countries = defaultCountries.filter((c) => {\n  const country = parseCountry(c);\n  return customFlags.map((f) => f.iso2).includes(country.iso2);\n});\n\nconst App = () => {\n  const [phone, setPhone] = useState('');\n\n  return (\n    <PhoneInput\n      countries={countries}\n      flags={customFlags}\n      style={\n        {\n          // style with css variables or with \".react-international-phone-flag-emoji\" class\n          '--react-international-phone-flag-width': '24px',\n          '--react-international-phone-flag-height': '24px',\n        } as React.CSSProperties\n      }\n      value={phone}\n      onChange={setPhone}\n      defaultCountry=\"jp\"\n      placeholder=\"Phone number\"\n    />\n  );\n};\n")),(0,a.kt)("p",null,"Output:"),(0,a.kt)(i,{mdxType:"CountryFlagsExample"}))}f.isMDXComponent=!0}}]);