"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[516],{6267:(e,t,n)=>{n.d(t,{Z:()=>o});var a=n(2983);const o=e=>{let{type:t,description:n,defaultValue:o}=e;return a.createElement("div",null,a.createElement("p",{style:{marginBottom:"0.25rem"}},n),a.createElement("ul",null,a.createElement("li",null,"Type: ",a.createElement("code",null,t)),o&&a.createElement("li",null,"Default: ",a.createElement("code",null,o))))}},1072:(e,t,n)=>{n.d(t,{Z:()=>o});var a=n(2983);const o=()=>a.createElement("span",{title:"required",style:{color:"red"}},"*")},1500:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>d,default:()=>c,frontMatter:()=>l,metadata:()=>r,toc:()=>s});var a=n(4321),o=(n(2983),n(4993)),i=(n(1072),n(6267));const l={},d="usePhoneInput",r={unversionedId:"Advanced Usage/usePhoneInput",id:"Advanced Usage/usePhoneInput",title:"usePhoneInput",description:"usePhoneInput is a hook for providing phone formatting to existing input components.",source:"@site/docs/04-Advanced Usage/01-usePhoneInput.md",sourceDirName:"04-Advanced Usage",slug:"/Advanced Usage/usePhoneInput",permalink:"/docs/Advanced Usage/usePhoneInput",draft:!1,editUrl:"https://github.com/goveo/react-international-phone/tree/master/packages/docs/docs/04-Advanced Usage/01-usePhoneInput.md",tags:[],version:"current",sidebarPosition:1,frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"FlagImage API",permalink:"/docs/Subcomponents API/FlagImage"},next:{title:"Using with UI libraries",permalink:"/docs/Advanced Usage/useWithUiLibs"}},u={},s=[{value:"Usage Example",id:"usage-example",level:2},{value:"Hook arguments",id:"hook-arguments",level:2},{value:"<code>value</code>",id:"value",level:3},{value:"<code>onChange</code>",id:"onchange",level:3},{value:"<code>defaultCountry</code>",id:"defaultcountry",level:3},{value:"<code>countries</code>",id:"countries",level:3},{value:"<code>prefix</code>",id:"prefix",level:3},{value:"<code>defaultMask</code>",id:"defaultmask",level:3},{value:"<code>charAfterDialCode</code>",id:"charafterdialcode",level:3},{value:"<code>historySaveDebounceMS</code>",id:"historysavedebouncems",level:3},{value:"<code>disableCountryGuess</code>",id:"disablecountryguess",level:3},{value:"<code>disableDialCodePrefill</code>",id:"disabledialcodeprefill",level:3},{value:"<code>forceDialCode</code>",id:"forcedialcode",level:3},{value:"<code>disableDialCodeAndPrefix</code>",id:"disabledialcodeandprefix",level:3},{value:"<code>disableFormatting</code>",id:"disableformatting",level:3},{value:"<code>inputRef</code>",id:"inputref",level:3},{value:"Returned values",id:"returned-values",level:2},{value:"<code>inputValue</code>",id:"inputvalue",level:3},{value:"<code>phone</code>",id:"phone",level:3},{value:"<code>handlePhoneValueChange</code>",id:"handlephonevaluechange",level:3},{value:"<code>inputRef</code>",id:"inputref-1",level:3},{value:"<code>country</code>",id:"country",level:3},{value:"<code>setCountry</code>",id:"setcountry",level:3}],p={toc:s};function c(e){let{components:t,...n}=e;return(0,o.kt)("wrapper",(0,a.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"usephoneinput"},"usePhoneInput"),(0,o.kt)("p",null,(0,o.kt)("strong",{parentName:"p"},"usePhoneInput")," is a hook for providing phone formatting to existing input components."),(0,o.kt)("p",null,"Use ",(0,o.kt)("inlineCode",{parentName:"p"},"phone")," (as value), ",(0,o.kt)("inlineCode",{parentName:"p"},"handlePhoneValueChange")," (as onChange callback) and ",(0,o.kt)("inlineCode",{parentName:"p"},"inputRef")," (as passed ref) to handle input."),(0,o.kt)("h2",{id:"usage-example"},"Usage Example"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},"// import { usePhoneInput } from 'react-international-phone';\n\nconst {\n inputValue,\n phone,\n country,\n setCountry,\n handlePhoneValueChange,\n inputRef,\n} = usePhoneInput({\n defaultCountry: 'us',\n value: '+1 (234)',\n onChange: ({ phone, inputValue, country }) => {\n // make something on change\n },\n});\n")),(0,o.kt)("h2",{id:"hook-arguments"},"Hook arguments"),(0,o.kt)("h3",{id:"value"},(0,o.kt)("inlineCode",{parentName:"h3"},"value")),(0,o.kt)(i.Z,{type:"string",description:"Phone value.",defaultValue:'""',mdxType:"PropDescription"}),(0,o.kt)("h3",{id:"onchange"},(0,o.kt)("inlineCode",{parentName:"h3"},"onChange")),(0,o.kt)(i.Z,{type:"(data: { phone: string; inputValue: string; country: ParsedCountry }) => void",description:"Callback that calls on phone change",defaultValue:"undefined",mdxType:"PropDescription"}),(0,o.kt)("h3",{id:"defaultcountry"},(0,o.kt)("inlineCode",{parentName:"h3"},"defaultCountry")),(0,o.kt)(i.Z,{type:"CountryIso2",description:"Default country value (iso2).",defaultValue:'"us"',mdxType:"PropDescription"}),(0,o.kt)("h3",{id:"countries"},(0,o.kt)("inlineCode",{parentName:"h3"},"countries")),(0,o.kt)(i.Z,{type:"CountryData[]",description:"An array of available countries to select (and guess)",defaultValue:"defaultCountries",mdxType:"PropDescription"}),(0,o.kt)("h3",{id:"prefix"},(0,o.kt)("inlineCode",{parentName:"h3"},"prefix")),(0,o.kt)(i.Z,{type:"string",description:"Prefix for phone value.",defaultValue:'"+"',mdxType:"PropDescription"}),(0,o.kt)("h3",{id:"defaultmask"},(0,o.kt)("inlineCode",{parentName:"h3"},"defaultMask")),(0,o.kt)(i.Z,{type:"string",description:"This mask will apply on countries that does not have specified mask.",defaultValue:'"............"',mdxType:"PropDescription"}),(0,o.kt)("h3",{id:"charafterdialcode"},(0,o.kt)("inlineCode",{parentName:"h3"},"charAfterDialCode")),(0,o.kt)(i.Z,{type:"string",description:"Char that renders after country dial code.",defaultValue:(0,o.kt)("span",null,'"\xa0"'),mdxType:"PropDescription"}),(0,o.kt)("h3",{id:"historysavedebouncems"},(0,o.kt)("inlineCode",{parentName:"h3"},"historySaveDebounceMS")),(0,o.kt)(i.Z,{type:"number",description:"Save value to history if there were not any changes in provided milliseconds timeslot. Undo/redo (ctrl+z/ctrl+shift+z) works only with values that are saved in history",defaultValue:"200",mdxType:"PropDescription"}),(0,o.kt)("h3",{id:"disablecountryguess"},(0,o.kt)("inlineCode",{parentName:"h3"},"disableCountryGuess")),(0,o.kt)(i.Z,{type:"boolean",description:(0,o.kt)("span",null,"Disable country guess on value change. ",(0,o.kt)("code",null,"onCountryGuess")," callback would not be called."),defaultValue:"false",mdxType:"PropDescription"}),(0,o.kt)("h3",{id:"disabledialcodeprefill"},(0,o.kt)("inlineCode",{parentName:"h3"},"disableDialCodePrefill")),(0,o.kt)(i.Z,{type:"boolean",description:"Disable dial code prefill on initialization. Dial code prefill works only when empty phone value have been provided.",defaultValue:"false",mdxType:"PropDescription"}),(0,o.kt)("h3",{id:"forcedialcode"},(0,o.kt)("inlineCode",{parentName:"h3"},"forceDialCode")),(0,o.kt)(i.Z,{type:"boolean",description:"Always display the dial code. Dial code can't be removed/changed by keyboard events, but it can be changed by pasting another country phone value.",defaultValue:"false",mdxType:"PropDescription"}),(0,o.kt)("h3",{id:"disabledialcodeandprefix"},(0,o.kt)("inlineCode",{parentName:"h3"},"disableDialCodeAndPrefix")),(0,o.kt)(i.Z,{type:"boolean",description:(0,o.kt)("span",null,"Display phone value will not include passed ",(0,o.kt)("code",null,"dialCode")," and ",(0,o.kt)("code",null,"prefix")," if set to ",(0,o.kt)("code",null,"true"),". ",(0,o.kt)("code",null,"forceDialCode")," value will be ignored."),defaultValue:"false",mdxType:"PropDescription"}),(0,o.kt)("h3",{id:"disableformatting"},(0,o.kt)("inlineCode",{parentName:"h3"},"disableFormatting")),(0,o.kt)(i.Z,{type:"boolean",description:"Disable phone value mask formatting. All formatting characters will not be displayed, but the mask length will be preserved.",defaultValue:"false",mdxType:"PropDescription"}),(0,o.kt)("h3",{id:"inputref"},(0,o.kt)("inlineCode",{parentName:"h3"},"inputRef")),(0,o.kt)(i.Z,{type:"React.MutableRefObject<HTMLInputElement | null>",description:"Ref for the input element.",defaultValue:"undefined",mdxType:"PropDescription"}),(0,o.kt)("h2",{id:"returned-values"},"Returned values"),(0,o.kt)("h3",{id:"inputvalue"},(0,o.kt)("inlineCode",{parentName:"h3"},"inputValue")),(0,o.kt)(i.Z,{type:"string",description:"Formatted phone string. Value that should be rendered inside input element.",mdxType:"PropDescription"}),(0,o.kt)("h3",{id:"phone"},(0,o.kt)("inlineCode",{parentName:"h3"},"phone")),(0,o.kt)(i.Z,{type:"string",description:"Phone in E164 format.",mdxType:"PropDescription"}),(0,o.kt)("h3",{id:"handlephonevaluechange"},(0,o.kt)("inlineCode",{parentName:"h3"},"handlePhoneValueChange")),(0,o.kt)(i.Z,{type:"(e: React.ChangeEvent<HTMLInputElement>) => string",description:"Change handler for input component.",mdxType:"PropDescription"}),(0,o.kt)("h3",{id:"inputref-1"},(0,o.kt)("inlineCode",{parentName:"h3"},"inputRef")),(0,o.kt)(i.Z,{type:"React.RefObject<HTMLInputElement>",description:"Ref object for input component (handles caret position, focus and undo/redo).",mdxType:"PropDescription"}),(0,o.kt)("h3",{id:"country"},(0,o.kt)("inlineCode",{parentName:"h3"},"country")),(0,o.kt)(i.Z,{type:"ParsedCountry",description:"Current country object.",mdxType:"PropDescription"}),(0,o.kt)("h3",{id:"setcountry"},(0,o.kt)("inlineCode",{parentName:"h3"},"setCountry")),(0,o.kt)(i.Z,{type:"(country: CountryIso2, options?: { focusOnInput: boolean })) => void",description:"Country setter.",mdxType:"PropDescription"}))}c.isMDXComponent=!0}}]);