react-intl-tel-input icon indicating copy to clipboard operation
react-intl-tel-input copied to clipboard

how to use it with react-hook-form

Open navneetgarggate6 opened this issue 4 years ago • 1 comments

I am using react-hook-form now how i can get the country code as user change it ? there is any method available which trigger when the country changed ?

navneetgarggate6 avatar Jun 30 '20 11:06 navneetgarggate6

onSelectFlag is what you want. Also in the documented props.

The docs right now don't list out all of the params of the onSelectFlag callback, unfortunately (this needs to be improved upon), so keep this with you as a guide:

JavaScript

const handleSelectFlag = (currentNumber, seletedCountryData, fullNumber, isValid) => {
  console.log(seletedCountryData.iso2);
};

TypeScript

type CountryData = {
  /** Country name. */
  name?: string;
  /** ISO 3166-1 alpha-2 code. */
  iso2?: string;
  /** International dial code. */
  dialCode?: string;
  /** Order (if >1 country with same dial code). */
  priority?: number;
  /** Area codes (if >1 country with same dial code). */
  areaCodes?: string[] | null;
};

const handleSelectFlag = (currentNumber: string, seletedCountryData: CountryData, fullNumber: string, isValid: boolean): void => {
  console.log(seletedCountryData.iso2);
};

I wrote an example here just for this: https://github.com/andrewsantarin/react-intl-tel-input-with-react-hook-form/blob/master/src/hook-form-example/HookFormExample.tsx

andrewsantarin avatar Jun 30 '20 13:06 andrewsantarin