How to use react-phone-input-2 with react hook form
Using PhoneInput along with react hook form
First time when i went to use some phone input in react i search for a good library that can fit my need, ideal library that have good validation forms.
also that one i can use it react hook form new version but i didn’t found good library that can validate phone number for each country validate length of phone number and if it’s on good format the one library that i found good for this stuff is react-phone-input-2.
But this library not completely work like a charm when i need to link it with react hook form v7 specially on validation side you need to do it manually.
So for this article i will show you how i did this:
1- I add PhoneInput of react-phone-input-2 inside Controller of react hook form on render props and i give it the required props like control of the form name and some rules of validation (we well explain that in next sections)
2- in render props i add the normal callback function that render provide with some utils params that i need to get PhoneInput work
3- in onChange props of phone input i do callback function that execute 2 thing the trigger of react hook form that i get it from useForm() hook i add it in constant variable i called it useFormMthods (i know the name of variable not like i went is should be useFormMethods my bad 😅) and the onChange of controller that i from the params of render callback the props param there is property called field give some methods of native input like onChange
on this onChange i trigger the onChange of controller and form validation by trigger props as i said previously
4- inputProps it’s normal props of PhoneInput that i give the important one for validation it’s required
5- Country you can add some default country for PhoneInput if you need
6- value when i trigger onChange of controller that i get from field as i said previously the PhoneInput it need to assign the actual value changed so Controller give you the value from field property that i get from props params
7- isValid this is important props for validation react hook form her i do custom validation i create it so PhoneInput can link with react hook form
as you see isValid give you callback also i use 4 params from it that i need it like actual inputNumber (the actual value of phoneInput) country (actual selected country and his dial code countries (give you list of countries with his deal code that i was need it
after that i declare constant of phoneLength that give me how length of phone should be for each country format i calculate that by filtering list of countries from actual country selected and his dial code that equal some dial code in countries list and get his phone format from this countries list and his length the divide it y 2 (why i divide it by 2 because of format spaces that eliminate them but all this calcul inside Math.ceil so if there is float result finally he give exact number of max length of phone number then i created external validatePhoneNumber function outside of render that i pass on it some params i was need it this function give you if phoneInput valid or not by some condition
8- validatePhoneNumber this function have the rest of logic of phone validation inputNumber the phoneInput value country (actual country) isDirty (that i get from our actual props of params callback render react hook form phoneLength (how max length should phoneInput get)
then i add some if verification like you see in screenshoot (you can do better from that) verify first if input dirty then verifying if inputNumber is valid after i can cut the default dial code to verify the rest of inputNumber is valid another verification of length if all the verification are good then i assign validPhoneNumber variable that phone is good and true and return true validation(this variable i use it in rules of controller i didn’t use state because i didn’t need component re-render and also for performance)
9- rules of controller her i add the required like always and validate function that i give it the validPhoneNumber variable if true if not it will return some msg error that you can specify
you can find her the code source in github https://github.com/youssefSamih/telInputExample/blob/main/telInput
if you have any question you can contact me at:
My linkedin: https://www.linkedin.com/in/youssef-samih
Twitter: https://twitter.com/YoussefSamih97
