Using libphonenumber-js in React

You do not need a heavy phone input component to validate numbers in React. libphonenumber-js is a plain function library, so a small hook is enough. This guide builds one and shows when to use a ready-made input instead.

A validation hook

This hook takes the raw input and a default country and returns the parsed number, its E.164 form and whether it is valid. It recalculates only when the input changes.

import { useMemo } from 'react'
import { parsePhoneNumberFromString } from 'libphonenumber-js'

export function usePhone(value, country = 'US') {
  return useMemo(() => {
    const phone = parsePhoneNumberFromString(value || '', country)
    return {
      isValid: !!phone && phone.isValid(),
      e164: phone ? phone.number : '',
      international: phone ? phone.formatInternational() : ''
    }
  }, [value, country])
}

A controlled input

Show an error only after the user has typed something, and send the E.164 value to your server, not the text the user typed.

function PhoneField({ onChange }) {
  const [value, setValue] = useState('')
  const phone = usePhone(value, 'US')
  return (
    <label>
      Phone
      <input
        type="tel"
        value={value}
        onChange={(e) => { setValue(e.target.value); onChange(phone.e164) }}
        aria-invalid={!!value && !phone.isValid}
      />
      {value && !phone.isValid && <span role="alert">Enter a valid phone number</span>}
    </label>
  )
}

Formatting while the user types

Use the AsYouType class to add spaces and brackets as the number is typed. Our as-you-type guide has the details.

React Native

The same code works in React Native because the library has no browser dependency. Use the mobile build when your app only accepts mobile numbers, to keep the bundle small.

isValid or isPossible for a form?

The library's author says they prefer isPossible() for user input, because numbering plans change and an old copy of the library can wrongly reject a newly assigned range. isPossible() checks only the length, so it never rejects a real number because the data is old. isValid() is stricter and catches typos in the first digits. Pick isPossible() for contact forms on sites that are rarely updated, and isValid() when a wrong number costs you money, for example before you send an SMS.

When to use a ready-made component

If you need a country flag dropdown with search and automatic formatting, the react-phone-number-input package, which the library's documentation recommends for React, builds on libphonenumber-js and gives you that. For a plain field with validation, the hook above is smaller and easier to style.