"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[300],{4976:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>h,default:()=>b,frontMatter:()=>u,metadata:()=>d,toc:()=>m});var o=t(4321),a=t(2983),i=t(4993),r=t(8553),l=t(1475);const s=r.PhoneNumberUtil.getInstance(),p=()=>{const[e,n]=(0,a.useState)(""),t=(e=>{try{return s.isValidNumber(s.parseAndKeepRawInput(e))}catch(n){return!1}})(e);return a.createElement("form",{onSubmit:n=>{n.preventDefault(),alert(`Submitted phone: ${e}`)}},a.createElement(l.sb,{defaultCountry:"ua",value:e,onChange:e=>n(e)}),!t&&a.createElement("div",{style:{color:"red"}},"Phone is not valid"),a.createElement("button",{disabled:!t,type:"submit"},"Submit"))},u={},h="Phone validation",d={unversionedId:"Usage/PhoneValidation/index",id:"Usage/PhoneValidation/index",title:"Phone validation",description:"react-international-phone is not providing validation functionality anymore.",source:"@site/docs/02-Usage/03-PhoneValidation/index.md",sourceDirName:"02-Usage/03-PhoneValidation",slug:"/Usage/PhoneValidation/",permalink:"/docs/Usage/PhoneValidation/",draft:!1,editUrl:"https://github.com/goveo/react-international-phone/tree/master/packages/docs/docs/02-Usage/03-PhoneValidation/index.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Modify countries",permalink:"/docs/Usage/ModifyCountries"},next:{title:"Custom country flags",permalink:"/docs/Usage/CustomCountryFlags/"}},c={},m=[{value:"Basic Example",id:"basic-example",level:2}],g={toc:m};function b(e){let{components:n,...t}=e;return(0,i.kt)("wrapper",(0,o.Z)({},g,t,{components:n,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"phone-validation"},"Phone validation"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"react-international-phone")," is not providing validation functionality anymore."),(0,i.kt)("p",null,"To validate phone number we recommend to use a ",(0,i.kt)("a",{parentName:"p",href:"https://www.npmjs.com/package/google-libphonenumber"},(0,i.kt)("inlineCode",{parentName:"a"},"google-libphonenumber"))," library.",(0,i.kt)("br",null),"\nThere is how you can create a validator function:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { PhoneNumberUtil } from 'google-libphonenumber';\n\nconst phoneUtil = PhoneNumberUtil.getInstance();\n\nconst isPhoneValid = (phone: string) => {\n try {\n return phoneUtil.isValidNumber(phoneUtil.parseAndKeepRawInput(phone));\n } catch (error) {\n return false;\n }\n};\n")),(0,i.kt)("h2",{id:"basic-example"},"Basic Example"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-tsx"},"import { PhoneNumberUtil } from 'google-libphonenumber';\nimport React, { useState } from 'react';\nimport { PhoneInput } from 'react-international-phone';\nimport 'react-international-phone/style.css';\n\nconst phoneUtil = PhoneNumberUtil.getInstance();\n\nconst isPhoneValid = (phone: string) => {\n try {\n return phoneUtil.isValidNumber(phoneUtil.parseAndKeepRawInput(phone));\n } catch (error) {\n return false;\n }\n};\n\nconst App = () => {\n const [phone, setPhone] = useState('');\n // highlight-start\n const isValid = isPhoneValid(phone);\n // highlight-end\n\n return (\n <form\n onSubmit={(e) => {\n // some submit logic\n e.preventDefault();\n alert(`Submitted phone: ${phone}`);\n }}\n >\n <PhoneInput\n defaultCountry=\"ua\"\n value={phone}\n onChange={(phone) => setPhone(phone)}\n />\n\n {/* highlight-start */}\n {!isValid && <div style={{ color: 'red' }}>Phone is not valid</div>}\n {/* highlight-end */}\n\n <button\n // highlight-start\n disabled={!isValid}\n // highlight-end\n type=\"submit\"\n >\n Submit\n </button>\n </form>\n );\n};\n")),(0,i.kt)("p",null,"Output:"),(0,i.kt)(p,{mdxType:"PhoneValidationExample"}))}b.isMDXComponent=!0}}]);