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