use-phone-input

This library requires React v16.8 or later.

Simplify phone number handling in React applications with automatic formatting, validation, and country code selection for international numbers. This library also provides the flexibility to work exclusively with specific countries, effectively reducing the final bundle size of your application. All phone number data is sourced from the Google phone number lib. Moreover, the library is equipped with automated update checks every day.

Installation

using npm:

npm install --save use-phone-input

or yarn:

yarn add use-phone-input

or pnpm:

pnpm add use-phone-input

---

API

• useInternationalPhoneInput
• createPhoneNumberUtils
• isPhoneNumberValid
• isPhoneNumberValidAsync

useInternationalPhoneInput

Simplify international phone number handling in React apps with automatic formatting and country code selection.

1type PhoneNumber = {
2  iso2: ISO2 | '';
3  countryCode: string;
4  nationalNumber: string;
5  formattedValue: string;
6};
7
8const useInternationalPhoneInput: (
9  utils: PhoneNumberUtils,
10  value: PhoneNumber,
11  onChange: (value: PhoneNumber) => void
12) => {
13  inputProps: {
14    type: 'tel';
15    value: string;
16    onInput: FormEventHandler<HTMLInputElement>;
17  };
18  setCountry(iso2: ISO2): void;
19};

Example:

1import phoneNumberUtils from 'use-phone-input/phoneNumberUtils';
2import useInternationalPhoneInput from 'use-phone-input/useInternationalPhoneInput';
3
4// use it if you want to have no prefix in formatted phone number
5phoneNumberUtils.setPrefix('');
6
7const PhoneInput = () => {
8  const [phone, setPhone] = useState(phoneNumberUtils.toPhoneNumber(''));
9
10  const { inputProps, setCountry } = useInternationalPhoneInput(
11    phoneNumberUtils,
12    phone,
13    setPhone
14  );
15
16  return (
17    <div>
18      <select
19        value={phone.iso2}
20        onChange={(e) => {
21          setCountry(e.target.value);
22        }}
23      >
24        <option value=''>-</option>
25        {phoneNumberUtils.iso2List.map((iso2) => (
26          <option key={iso2} value={iso2}>
27            {iso2}
28          </option>
29        ))}
30      </select>
31      <input {...inputProps} />
32    </div>
33  );
34};

---

createPhoneNumberUtils

Generate utils for specific list of countries, use it if you need to handle specific countries phone numbers, otherwise just use phoneNumberUtils, like in the example above

1type PhoneNumberUtils = {
2  toPhoneNumber(value: string, estimatedIso2?: ISO2): PhoneNumber;
3  getCountryCode<T extends string>(
4    iso2: T
5  ): T extends ISO2 ? string : undefined;
6  setPrefix(prefix: string): void;
7  readonly iso2List: ISO2[];
8};
9
10const createPhoneNumberUtils: (
11  data: PhoneNumberFormat[],
12  prefix?: string // '+' by default
13) => PhoneNumberUtils;

Example:

1import createPhoneNumberUtils from 'use-phone-input/createPhoneNumberUtils';
2import CA from 'use-phone-input/phoneNumberFormats/CA';
3import US from 'use-phone-input/phoneNumberFormats/US';
4
5// generates utils only for Canada and USA phone numbers
6const phoneNumberUtils = createPhoneNumberUtils([CA, US]);

---

isPhoneNumberValid

Checks if the given international phone number is valid based on the provided phone verification patterns

1const isPhoneNumberValid: (
2  phoneValidationPatterns: Record<string, RegExp>,
3  value: PhoneNumber
4) => boolean;

Example:

1import isPhoneNumberValid from 'use-phone-input/isPhoneNumberValid';
2
3import phoneValidationPatterns from 'use-phone-input/phoneValidationPatterns';
4
5import CA from 'use-phone-input/phoneValidationPatterns/CA';
6import US from 'use-phone-input/phoneValidationPatterns/US';
7
8isPhoneNumberValid(phoneValidationPatterns, value);
9
10isPhoneNumberValid({ CA, US }, value);

---

isPhoneNumberValidAsync

Checks if a given international phone number is valid

This method uses dynamic import under the hood, use only if your builder supports it

1const isPhoneNumberValidAsync = (value: PhoneNumber) => Promise<boolean>;

---

License

MIT © Krombik