¿Cómo agregar la entrada de número de teléfono en React.js?

En este artículo, vamos a aprender cómo podemos agregar una entrada de teléfono en ReactJs. React es una biblioteca JavaScript front-end gratuita y de código abierto para crear interfaces de usuario o componentes de interfaz de usuario. Es mantenido por Facebook y una comunidad de desarrolladores individuales y empresas.

Enfoque: para agregar la entrada de nuestro teléfono, vamos a utilizar el paquete react-phone-input-2. El paquete react-phone-input-2 nos ayuda a integrar la entrada del teléfono en nuestra aplicación. Primero, instalaremos el paquete react-phone-input-2 y luego agregaremos una entrada de teléfono en nuestra página de inicio.

Crear aplicación ReactJs: puede crear un nuevo proyecto ReactJs usando el siguiente comando:

npx create-react-app gfg

Instale el paquete requerido: ahora instalaremos el paquete react-phone-input-2 usando el siguiente comando:

npm i react-phone-input-2

Estructura del proyecto: Se verá así.

Agregar la entrada de teléfono: después de instalar el paquete, podemos agregar fácilmente una entrada de teléfono en cualquier página de nuestra aplicación. Para este ejemplo, vamos a agregar una entrada de teléfono a nuestra página de inicio.

Agregue el siguiente contenido en el archivo App.js :

import React, { useState } from "react";
import PhoneInput from 'react-phone-input-2'
import 'react-phone-input-2/lib/style.css'
  
export default class PhoneInputGfg extends React.Component {
  constructor(props) {
    super(props);
    this.state = { phone: "" };
  }
  render(){
    return (
      <div>
        <h1>ReactJs Phone Input - GeeksforGeeks</h1>
        <PhoneInput
          country={'us'}
          value={this.state.phone}
          onChange={phone => this.setState({ phone })}
        />
      </div>
    );
  }
};

Explicación: en el ejemplo anterior primero, estamos importando el componente PhoneInput y el gancho useState de reaccionar. Luego estamos usando el enlace useState para almacenar el valor del número de teléfono. Después de eso, estamos agregando la entrada de nuestro teléfono usando el paquete instalado.

Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.

npm start

Producción: