Introduction to libphonenumber-js

libphonenumber-js is a powerful JavaScript library for parsing, formatting, and validating phone numbers. It’s essential for developers dealing with international phone numbers in their web or mobile applications. This library offers an extensive API for different uses, making it a great choice for ensuring phone number accuracy and consistency.

Getting Started

To get started with libphonenumber-js, you first need to install it via npm:

  
    npm install libphonenumber-js
  

Basic Usage

Here are some basic usages of libphonenumber-js to get you started:

Parsing Phone Numbers

  
    import { parsePhoneNumber } from 'libphonenumber-js';

    const phoneNumber = parsePhoneNumber('+12133734253');
    console.log(phoneNumber.country); // 'US'
  

Formatting Phone Numbers

  
    import { formatPhoneNumber } from 'libphonenumber-js';

    const formattedNumber = formatPhoneNumber('+12133734253', 'International');
    console.log(formattedNumber); // '+1 213 373 4253'
  

Validating Phone Numbers

  
    import { isValidPhoneNumber } from 'libphonenumber-js';

    const isValid = isValidPhoneNumber('+12133734253');
    console.log(isValid); // true
  

Getting Country from Phone Number

  
    import { getCountryCodeForRegion } from 'libphonenumber-js';

    const countryCode = getCountryCodeForRegion('US');
    console.log(countryCode); // 1
  

Advanced Usage

If you need more advanced functionalities, libphonenumber-js has got you covered:

Custom Formatting

  
    import { parsePhoneNumber, formatPhoneNumber } from 'libphonenumber-js';

    const phoneNumber = parsePhoneNumber('+12133734253');
    const formattedNumber = phoneNumber.format('NATIONAL');
    console.log(formattedNumber); // '(213) 373-4253'
  

Extracting Extention

  
    import { parsePhoneNumber } from 'libphonenumber-js';

    const phoneNumber = parsePhoneNumber('+12133734253 ext. 123');
    console.log(phoneNumber.ext); // '123'
  

Number Type Checking

  
    import { parsePhoneNumber } from 'libphonenumber-js';

    const phoneNumber = parsePhoneNumber('+12133734253');
    console.log(phoneNumber.getType()); // 'MOBILE'
  

Example App Integration

Let’s create a simple app that uses various libphonenumber-js APIs to demonstrate its power. Here’s an example:

  
    import React, { useState } from 'react';
    import { isValidPhoneNumber, parsePhoneNumber, formatPhoneNumber } from 'libphonenumber-js';

    const PhoneNumberApp = () => {
      const [phoneNumber, setPhoneNumber] = useState('');
      const [formattedNumber, setFormattedNumber] = useState('');
      const [isValid, setIsValid] = useState(false);

      const handleChange = (e) => {
        const input = e.target.value;
        setPhoneNumber(input);

        if (isValidPhoneNumber(input)) {
          setIsValid(true);
          const parsedNumber = parsePhoneNumber(input);
          setFormattedNumber(formatPhoneNumber(parsedNumber, 'International'));
        } else {
          setIsValid(false);
          setFormattedNumber('');
        }
      };

      return (
        

          
Phone Number Validation App
          
          
Formatted Number: {formattedNumber}
          
{isValid ? 'Valid' : 'Invalid'} phone number
        
      );
    };

    export default PhoneNumberApp;
  

The above example demonstrates how easy it is to integrate libphonenumber-js into a React app for validating and formatting phone numbers. This ensures that your users provide accurate and consistent phone numbers, improving your data quality.

Happy coding!

Hash: fa240cb5281f7bc7b60d8a5f73039c4b75af739ab8ac9c7f98de7df65a0fd8af