"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[840],{6328:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>r,default:()=>u,frontMatter:()=>i,metadata:()=>d,toc:()=>s});var o=n(4321),a=(n(2983),n(4993));const i={},r="Migrating from v3 to v4",d={unversionedId:"Migrations/migrate-to-v4",id:"Migrations/migrate-to-v4",title:"Migrating from v3 to v4",description:"Version 3 becomes deprecated and unsupported since v4 is released.",source:"@site/docs/05-Migrations/01-migrate-to-v4.md",sourceDirName:"05-Migrations",slug:"/Migrations/migrate-to-v4",permalink:"/docs/Migrations/migrate-to-v4",draft:!1,editUrl:"https://github.com/goveo/react-international-phone/tree/master/packages/docs/docs/05-Migrations/01-migrate-to-v4.md",tags:[],version:"current",sidebarPosition:1,frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Using with UI libraries",permalink:"/docs/Advanced Usage/useWithUiLibs"},next:{title:"Migrating from v2 to v3",permalink:"/docs/Migrations/migrate-to-v3"}},p={},s=[{value:"usePhoneInput return properties renamed",id:"usephoneinput-return-properties-renamed",level:2},{value:"Added support for multiple masks per country",id:"added-support-for-multiple-masks-per-country",level:2},{value:"Switched to E.164 format",id:"switched-to-e164-format",level:2},{value:"Second argument of onChange callback is now an object",id:"second-argument-of-onchange-callback-is-now-an-object",level:2},{value:"usePhoneInput now returns country object",id:"usephoneinput-now-returns-country-object",level:2},{value:"CountrySelectorDropdown item id updated",id:"countryselectordropdown-item-id-updated",level:2},{value:"<code>FlagEmoji</code> has been renamed to <code>FlagImage</code>",id:"flagemoji-has-been-renamed-to-flagimage",level:2}],l={toc:s};function u(e){let{components:t,...n}=e;return(0,a.kt)("wrapper",(0,o.Z)({},l,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"migrating-from-v3-to-v4"},"Migrating from v3 to v4"),(0,a.kt)("admonition",{title:"Why is it important to update?",type:"caution"},(0,a.kt)("p",{parentName:"admonition"},"Version 3 becomes deprecated and unsupported since v4 is released. ",(0,a.kt)("br",null),"\nNew features and bug fixes will be pushed only to v4.")),(0,a.kt)("h2",{id:"usephoneinput-return-properties-renamed"},"usePhoneInput return properties renamed"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"phone")," is renamed to ",(0,a.kt)("inlineCode",{parentName:"li"},"inputValue")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"e164Phone")," is renamed to ",(0,a.kt)("inlineCode",{parentName:"li"},"phone"))),(0,a.kt)("p",null,"Now ",(0,a.kt)("inlineCode",{parentName:"p"},"phone")," stands for E.164 formatted phone, and ",(0,a.kt)("inlineCode",{parentName:"p"},"inputValue")," stands for string that is rendered inside input element."),(0,a.kt)("admonition",{type:"warning"},(0,a.kt)("p",{parentName:"admonition"},"The hook still returns the ",(0,a.kt)("inlineCode",{parentName:"p"},"phone")," value, but its value purpose has been changed.",(0,a.kt)("br",null),"\nPlease update values if you were using ",(0,a.kt)("inlineCode",{parentName:"p"},"usePhoneInput")," hook.")),(0,a.kt)("h2",{id:"added-support-for-multiple-masks-per-country"},"Added support for multiple masks per country"),(0,a.kt)("p",null,"Now country format mask can be dynamic, so country data type have been changed. You can check the new ",(0,a.kt)("a",{parentName:"p",href:"/docs/Usage/ModifyCountries#country-data-type"},"Country Data Type"),"."),(0,a.kt)("h2",{id:"switched-to-e164-format"},"Switched to E.164 format"),(0,a.kt)("p",null,"Now ",(0,a.kt)("inlineCode",{parentName:"p"},"onChange")," callback returns phone in E.164 format by default. New ",(0,a.kt)("inlineCode",{parentName:"p"},"phone")," return value was also provided to ",(0,a.kt)("inlineCode",{parentName:"p"},"usePhoneInput")," hook.\nE.164 format phone returned in callback even if ",(0,a.kt)("inlineCode",{parentName:"p"},"disabledDialCodeAndPrefix")," was set to ",(0,a.kt)("inlineCode",{parentName:"p"},"true"),"."),(0,a.kt)("h2",{id:"second-argument-of-onchange-callback-is-now-an-object"},"Second argument of onChange callback is now an object"),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"onChange")," callback type is changed: ",(0,a.kt)("br",null),"\nBefore: ",(0,a.kt)("inlineCode",{parentName:"p"},"(phone: string, country: CountryIso2) => void"),(0,a.kt)("br",null),"\nAfter: ",(0,a.kt)("inlineCode",{parentName:"p"},"(phone: string, data: { country: ParsedCountry, inputValue: string }) => void"),"."),(0,a.kt)("p",null,"The second argument is now an object that contains additional information about the phone."),(0,a.kt)("h2",{id:"usephoneinput-now-returns-country-object"},"usePhoneInput now returns country object"),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"usePhoneInput")," returns a parsed ",(0,a.kt)("a",{parentName:"p",href:"/docs/Usage/PhoneInput#parsedcountry-type"},"country object")," instead of iso2 code.",(0,a.kt)("br",null),"\nCheck updated ",(0,a.kt)("inlineCode",{parentName:"p"},"usePhoneInput")," API reference ",(0,a.kt)("a",{parentName:"p",href:"/docs/Advanced%20Usage/usePhoneInput"},"here"),"."),(0,a.kt)("h2",{id:"countryselectordropdown-item-id-updated"},"CountrySelectorDropdown item id updated"),(0,a.kt)("p",null,"Dropdown item ids are now prefixed with the library name to avoid id conflicts: ",(0,a.kt)("inlineCode",{parentName:"p"},"react-international-phone__${iso2}-option"),(0,a.kt)("br",null),"\nBefore: ",(0,a.kt)("inlineCode",{parentName:"p"},'id="ua-option"'),(0,a.kt)("br",null),"\nAfter: ",(0,a.kt)("inlineCode",{parentName:"p"},'id="react-international-phone__ua-option"')),(0,a.kt)("h2",{id:"flagemoji-has-been-renamed-to-flagimage"},(0,a.kt)("inlineCode",{parentName:"h2"},"FlagEmoji")," has been renamed to ",(0,a.kt)("inlineCode",{parentName:"h2"},"FlagImage")),(0,a.kt)("p",null,"Since the flag component can render custom images, it is not necessarily an emoji.",(0,a.kt)("br",null),"\nPlease update component name if you used it."))}u.isMDXComponent=!0}}]);