"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[510],{1267:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>r,default:()=>l,frontMatter:()=>i,metadata:()=>s,toc:()=>c});var a=n(4321),o=(n(2983),n(4993));const i={},r="Get active country mask",s={unversionedId:"Usage/GetActiveCountryMask",id:"Usage/GetActiveCountryMask",title:"Get active country mask",description:"You can get current country formatting mask using getActiveFormattingMask function.",source:"@site/docs/02-Usage/05-GetActiveCountryMask.md",sourceDirName:"02-Usage",slug:"/Usage/GetActiveCountryMask",permalink:"/docs/Usage/GetActiveCountryMask",draft:!1,editUrl:"https://github.com/goveo/react-international-phone/tree/master/packages/docs/docs/02-Usage/05-GetActiveCountryMask.md",tags:[],version:"current",sidebarPosition:5,frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Custom country flags",permalink:"/docs/Usage/CustomCountryFlags/"},next:{title:"Subcomponents API",permalink:"/docs/Subcomponents API/"}},p={},c=[{value:"Basic example",id:"basic-example",level:2},{value:"Config properties",id:"config-properties",level:2}],u={toc:c};function l(e){let{components:t,...n}=e;return(0,o.kt)("wrapper",(0,a.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"get-active-country-mask"},"Get active country mask"),(0,o.kt)("p",null,"You can get current country formatting mask using ",(0,o.kt)("inlineCode",{parentName:"p"},"getActiveFormattingMask")," function."),(0,o.kt)("admonition",{type:"warning"},(0,o.kt)("p",{parentName:"admonition"},"You should not use raw ",(0,o.kt)("inlineCode",{parentName:"p"},"country.format")," value because it will be an object if active country has a dynamic formatting mask.")),(0,o.kt)("h2",{id:"basic-example"},"Basic example"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import { PhoneInput, getActiveFormattingMask } from 'react-international-phone';\n\nconst App = () => {\n  const [phone, setPhone] = useState('');\n\n  return (\n    <PhoneInput\n      value={phone}\n      onChange={(phone, { country }) => {\n        setPhone(phone);\n        // highlight-start\n        const mask = getActiveFormattingMask({ phone, country });\n        // highlight-end\n        // use formatting mask for your purposes\n      })}\n    />\n  )\n}\n")),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"phone")," should be in a E.164 format"),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"country")," should be a parsed country object")),(0,o.kt)("h2",{id:"config-properties"},"Config properties"),(0,o.kt)("p",null,"You must provide same ",(0,o.kt)("inlineCode",{parentName:"p"},"prefix"),", ",(0,o.kt)("inlineCode",{parentName:"p"},"defaultMask")," or ",(0,o.kt)("inlineCode",{parentName:"p"},"disableFormatting")," properties to ",(0,o.kt)("inlineCode",{parentName:"p"},"getActiveFormattingMask")," if you have provided them to ",(0,o.kt)("inlineCode",{parentName:"p"},"PhoneInput")),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"getActiveFormattingMask({\n  country,\n  phone,\n  prefix: '+',\n  defaultMask: '............',\n  disableFormatting: false,\n});\n")))}l.isMDXComponent=!0}}]);