"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[454],{6324:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>i,default:()=>c,frontMatter:()=>r,metadata:()=>d,toc:()=>l});var a=n(4321),o=(n(2983),n(4993));const r={},i="Migrating from v1 to v2",d={unversionedId:"Migrations/migrate-to-v2",id:"Migrations/migrate-to-v2",title:"Migrating from v1 to v2",description:"Version 1 becomes deprecated and unsupported since v2 is released.",source:"@site/docs/05-Migrations/04-migrate-to-v2.md",sourceDirName:"05-Migrations",slug:"/Migrations/migrate-to-v2",permalink:"/docs/Migrations/migrate-to-v2",draft:!1,editUrl:"https://github.com/goveo/react-international-phone/tree/master/packages/docs/docs/05-Migrations/04-migrate-to-v2.md",tags:[],version:"current",sidebarPosition:4,frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Migrating from v2.1 to v2.2",permalink:"/docs/Migrations/migrate-to-v2.2"}},s={},l=[{value:"<code>initialCountry</code> has been renamed to <code>defaultCountry</code>",id:"initialcountry-has-been-renamed-to-defaultcountry",level:2},{value:"<code>hideSpaceAfterDialCode</code> has been changed with <code>charAfterDialCode</code>",id:"hidespaceafterdialcode-has-been-changed-with-charafterdialcode",level:2},{value:"<code>usePhone</code> hook has been removed",id:"usephone-hook-has-been-removed",level:2},{value:"<code>onCountryChange</code> callback has been removed",id:"oncountrychange-callback-has-been-removed",level:2}],u={toc:l};function c(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:"migrating-from-v1-to-v2"},"Migrating from v1 to v2"),(0,o.kt)("admonition",{title:"Why is it important to update?",type:"caution"},(0,o.kt)("p",{parentName:"admonition"},"Version 1 becomes deprecated and unsupported since v2 is released. ",(0,o.kt)("br",null),"\nNew features and bug fixes will be pushed only to v2.")),(0,o.kt)("h2",{id:"initialcountry-has-been-renamed-to-defaultcountry"},(0,o.kt)("inlineCode",{parentName:"h2"},"initialCountry")," has been renamed to ",(0,o.kt)("inlineCode",{parentName:"h2"},"defaultCountry")),(0,o.kt)("p",null,"You should rename ",(0,o.kt)("inlineCode",{parentName:"p"},"initialCountry")," prop to ",(0,o.kt)("inlineCode",{parentName:"p"},"defaultCountry")," in your codebase:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-jsx"},'/* before */\n<PhoneInput initialCountry="us" />\n\n/* after */\n<PhoneInput defaultCountry="us" />\n')),(0,o.kt)("h2",{id:"hidespaceafterdialcode-has-been-changed-with-charafterdialcode"},(0,o.kt)("inlineCode",{parentName:"h2"},"hideSpaceAfterDialCode")," has been changed with ",(0,o.kt)("inlineCode",{parentName:"h2"},"charAfterDialCode")),(0,o.kt)("p",null,"You should remove ",(0,o.kt)("inlineCode",{parentName:"p"},"hideSpaceAfterDialCode")," and add the ",(0,o.kt)("inlineCode",{parentName:"p"},"charAfterDialCode")," prop with the corresponding value, for example:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-jsx"},'/* before */\n<PhoneInput hideSpaceAfterDialCode={true} />\n\n/* after */\n<PhoneInput charAfterDialCode="" />\n')),(0,o.kt)("h2",{id:"usephone-hook-has-been-removed"},(0,o.kt)("inlineCode",{parentName:"h2"},"usePhone")," hook has been removed"),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"usePhone")," was removed and now it is not exported from the package entry point."),(0,o.kt)("p",null,"If you used it for some reason, please change it to ",(0,o.kt)("inlineCode",{parentName:"p"},"usePhoneInput"),", it should work the same."),(0,o.kt)("h2",{id:"oncountrychange-callback-has-been-removed"},(0,o.kt)("inlineCode",{parentName:"h2"},"onCountryChange")," callback has been removed"),(0,o.kt)("p",null,"Please remove it, or use the ",(0,o.kt)("inlineCode",{parentName:"p"},"useEffect")," hook to handle country change:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-jsx"},"const { country } = usePhoneInput({\n  defaultCountry: 'us',\n  value,\n});\n\nuseEffect(() => {\n  // move your country change logic here\n}, [country]);\n")))}c.isMDXComponent=!0}}]);