Skip to main content

Phone validation

react-international-phone is not providing validation functionality anymore.

To validate phone number we recommend to use a google-libphonenumber library.
There is how you can create a validator function:

import { PhoneNumberUtil } from 'google-libphonenumber';

const phoneUtil = PhoneNumberUtil.getInstance();

const isPhoneValid = (phone: string) => {
  try {
    return phoneUtil.isValidNumber(phoneUtil.parseAndKeepRawInput(phone));
  } catch (error) {
    return false;
  }
};

Basic Example​

import { PhoneNumberUtil } from 'google-libphonenumber';
import React, { useState } from 'react';
import { PhoneInput } from 'react-international-phone';
import 'react-international-phone/style.css';

const phoneUtil = PhoneNumberUtil.getInstance();

const isPhoneValid = (phone: string) => {
  try {
    return phoneUtil.isValidNumber(phoneUtil.parseAndKeepRawInput(phone));
  } catch (error) {
    return false;
  }
};

const App = () => {
  const [phone, setPhone] = useState('');
  const isValid = isPhoneValid(phone);

  return (
    <form
      onSubmit={(e) => {
        // some submit logic
        e.preventDefault();
        alert(`Submitted phone: ${phone}`);
      }}
    >
      <PhoneInput
        defaultCountry="ua"
        value={phone}
        onChange={(phone) => setPhone(phone)}
      />

      {!isValid && <div style={{ color: 'red' }}>Phone is not valid</div>}

      <button
        disabled={!isValid}
        type="submit"
      >
        Submit
      </button>
    </form>
  );
};

Output:

Phone is not valid