"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[11],{5275:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>m,frontMatter:()=>p,metadata:()=>s,toc:()=>u});var o=n(4321),r=(n(2983),n(4993));const p={},a="Subcomponents API",s={unversionedId:"Subcomponents API/index",id:"Subcomponents API/index",title:"Subcomponents API",description:"The PhoneInput component consists of four main parts:",source:"@site/docs/03-Subcomponents API/index.md",sourceDirName:"03-Subcomponents API",slug:"/Subcomponents API/",permalink:"/docs/Subcomponents API/",draft:!1,editUrl:"https://github.com/goveo/react-international-phone/tree/master/packages/docs/docs/03-Subcomponents API/index.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Get active country mask",permalink:"/docs/Usage/GetActiveCountryMask"},next:{title:"CountrySelector API",permalink:"/docs/Subcomponents API/CountrySelector"}},c={},u=[],i={toc:u};function m(e){let{components:t,...n}=e;return(0,r.kt)("wrapper",(0,o.Z)({},i,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"subcomponents-api"},"Subcomponents API"),(0,r.kt)("p",null,"The ",(0,r.kt)("strong",{parentName:"p"},"PhoneInput")," component consists of four main parts:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Input component"),(0,r.kt)("li",{parentName:"ul"},"CountrySelector component"),(0,r.kt)("li",{parentName:"ul"},"CountrySelectorDropdown component"),(0,r.kt)("li",{parentName:"ul"},"DialCodePreview component")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"InputComponent")," is a base HTML input"),(0,r.kt)("p",null,"You can reuse ",(0,r.kt)("inlineCode",{parentName:"p"},"CountrySelector"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"CountrySelectorDropdown"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"DialCodePreview")," (and ",(0,r.kt)("inlineCode",{parentName:"p"},"FlagImage")," component) to build your own fully custom component."))}m.isMDXComponent=!0}}]);