Números de teléfono en formato React

1. Crear la lógica personalizada para dar formato al número de teléfono
2. Use la biblioteca react-phone-number-input para formatear el número de teléfono según el país

En este artículo, aprenderemos a formatear números de teléfono en React. Los desarrolladores a menudo enfrentan el problema de formatear el valor de entrada mientras desarrollan aplicaciones React.

Aquí, formatearemos un número de teléfono de 10 dígitos en el formato (###) ### - ####. Para lograr nuestro objetivo, creamos la lógica personalizada en el primer ejemplo y usamos la biblioteca integrada de React en el segundo ejemplo.

Crear la lógica personalizada para dar formato al número de teléfono

Podemos crear una lógica personalizada para formatear los números de teléfono según nuestros requisitos. Los usuarios pueden seguir los pasos a continuación para formatear los números de teléfono.

En el código de ejemplo a continuación, hemos creado el <input> para tomar la entrada del número de teléfono. Siempre que cambie el valor de la entrada, llamará a la función handlephoneNumber().

La función handlephoneNumber() llama a la función formatPhoneNumber() para formatear el número de teléfono de acuerdo con los pasos anteriores. Después de formatear el número de teléfono, la función handlephoneNumber() establece el valor formateado del número de teléfono en la entrada.

Código de ejemplo:

// 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>
  );
}

Producción:

En el resultado anterior, los usuarios pueden ver números de teléfono formateados según la longitud del valor de entrada. Además, no permite a los usuarios agregar ningún otro carácter a la entrada, excepto números.

Además, los usuarios no pueden ingresar un número con una longitud superior a 10.

Use la biblioteca react-phone-number-input para formatear el número de teléfono según el país

La biblioteca react-phone-number-input de React nos permite formatear el número de teléfono según diferentes países. Podemos importar la biblioteca en nuestro código y usar el componente <phoneInput> para tomar la entrada del número de teléfono, que formatea automáticamente el número de teléfono.

Antes de ver el ejemplo, los usuarios deben instalar la biblioteca en la aplicación React. Para eso, abra la terminal en el mismo directorio donde está su aplicación React e ingrese el comando:

npm install react-phone-number-input

Ahora, los usuarios deben usar el componente <phoneInput> en la aplicación como se muestra a continuación. Aquí, la variable phoneNumber realiza un seguimiento del valor de entrada, y la función setPhoneNumber() establece el valor en phoneNumber cuando el usuario cambia el valor de entrada.

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

Hemos implementado el formateo de números de teléfono con una sola línea de código. Los usuarios pueden ver el código de trabajo completo a continuación.

Código de ejemplo:

//  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;

Producción:

En el resultado anterior, los usuarios pueden ver que formatea el número de teléfono según el país que seleccionen en el menú desplegable. Además, selecciona automáticamente el país según la longitud del número de teléfono.

El segundo método es más simple para escribir código, pero no impide que los usuarios ingresen números. Los usuarios pueden ingresar números de teléfono de cualquier longitud, lo cual no es una buena práctica al desarrollar la aplicación.

Podemos personalizar los números de teléfono según nuestros requisitos escribiendo una lógica personalizada como hemos escrito en el primer método. Por lo tanto, se recomienda que los programadores utilicen una lógica personalizada.