React 形式の電話番号

// import react and usestate
import React, { useState } from "react";

function formatPhoneNumber(input) {
  //  if the input is null, return a null value
  if (!input) return input;
  // remove all characters from the input except number input.
  const numberInput = input.replace(/[^\d]/g, "");
  //  take the length of the value of the input
  const numberInputLength = numberInput.length;
  // if the number length is 1, 2, or 3, then return it as it is.
  if (numberInputLength < 4) {
    return numberInput;
  } else if (numberInputLength < 7) {
    // if the number input length is 4, 5, or 6, format it accordingly.
    return `(${numberInput.slice(0, 3)}) ${numberInput.slice(3)}`;
  } else {
    //  if the number input length is 7, 8, 9, 10, or more, format it like the below.
    return `(${numberInput.slice(0, 3)}) ${numberInput.slice(
      3,
      6
    )}-${numberInput.slice(6, 10)}`;
  }
  // return empty string in case any condition doesn't satisfy.
  return "";
}

export default function App() {
  // Binded phoneNumber with an input value and setPhoneNUmber is used to make changes to the value of phoneNumber
  const [phoneNumber, setphoneNumber] = useState("");
  //  whenever input will change, handlephoneNumber() function will invoke.
  const handlephoneNumber = (e) => {
    // format phone number
    const formattedPhoneNumber = formatPhoneNumber(e.target.value);
    //  set the formatted phone number to the input value
    setphoneNumber(formattedPhoneNumber);
  };

  return (
    <div style={{ textAlign: "center", marginTop: "30px" }}>
      {/* number input to take phone numbetr */}
      <input onChange={(e) => handlephoneNumber(e)} value={phoneNumber} />
    </div>
  );
}

npm install react-phone-number-input

<PhoneInput value={phoneNumber}  onChange={setphoneNumber}/>

//  import required libraries
import 'react-phone-number-input/style.css'
import PhoneInput from 'react-phone-number-input';
import { useState } from 'react';

function App() {
  const [phoneNumber, setphoneNumber] = useState()
  // using phoneInput component of react-phone-number-input library
  return (
    <PhoneInput
      placeholder="Add Your Phone Number Here"
      value={phoneNumber}
      onChange={setphoneNumber}/>
  )
}

export default App;