how to format phonenumber in reactjs

Formatting Phone Numbers in ReactJS

Formatting phone numbers is an essential aspect of web development. In ReactJS, we can format phone numbers by using different libraries. In this blog post, we will explore two popular libraries used for formatting phone numbers in ReactJS: react-phone-number-input and libphonenumber-js.

Using react-phone-number-input

The react-phone-number-input library is a simple and easy-to-use library that allows us to format phone numbers in ReactJS. Here are the steps to format phone numbers using this library:

• Install the library using the following command: npm install react-phone-number-input
• Import the library in your React component using the following code:

    import PhoneInput from 'react-phone-number-input';
    import 'react-phone-number-input/style.css';
  

• Use the <PhoneInput /> component in your JSX code to format phone numbers.

    <PhoneInput
      placeholder="Enter phone number"
      value={this.state.phone}
      onChange={phone => this.setState({ phone })}
    />
  

• The phone number will be automatically formatted as the user types.

Using libphonenumber-js

The libphonenumber-js library is a more advanced library that provides formatting options for phone numbers. Here are the steps to format phone numbers using this library:

• Install the library using the following command: npm install libphonenumber-js
• Import the library in your React component using the following code:

    import PhoneNumber from 'libphonenumber-js';
  

• Create a function to format phone numbers:

    formatPhoneNumber(number) {
      const phoneNumber = new PhoneNumber(number);
      return phoneNumber.formatNational();
    }
  

• Call the formatPhoneNumber() function to format phone numbers.

    <div>
      Formatted Phone Number: {this.formatPhoneNumber("+1234567890")}
    </div>
  

• The phone number will be formatted based on the country code provided.

These are two popular libraries used for formatting phone numbers in ReactJS. You can choose the library based on your project requirements and preferences.