en este código de país de número de teléfono, ¿cómo es posible configurar automáticamente el código de país por región? como si abro el sitio web en EE. UU., muestra el código de país +1 automáticamente, si abro el sitio web en INDIA, muestra el código de país +91 automáticamente. Al igual que la API meteorológica, ¿hay alguna API que deba verificar automáticamente el código de país?
import React from "react"; import PhoneInput, {isValidPhoneNumber } from "react-phone-number-input"; export default function App() { const [fields, setFields] = React.useState([{ value: null }]); function handleChange(i, event) { if (event) { const values = [...fields]; values[i].value = event; setFields((v) => values); } } return ( <div className="App"> {fields.map((field, idx) => ( <PhoneInput key={idx} id="phoneNumbers1" type="text" placeholder="Enter phone number " value={field.value || ""} defaultCountry="IN" international name="phoneNumbers" autoComplete="off" onChange={(e) => handleChange(idx, e)} /> ))} <button type="button" > Phone Number </button> </div> ); }Para detectar el país, la aplicación React necesita buscar la dirección IP utilizando servicios IP-to-Location como IPRegistry
Aquí hay un ejemplo del lado del cliente con IPRegistry:
const getCountryBtn = document.getElementById("getCountry"); const countryNameElement = document.getElementById("country"); getCountryBtn.onclick = function() { fetch('https://api.ipregistry.co/?key=tryout') .then(function (response) { return response.json(); }) .then(function (payload) { countryNameElement.innerHTML = payload.location.country.name; }); } <html> <body> <button id="getCountry">Get Country</button> <div id="country"></div> </body> </html>Una vez que el nombre del país está disponible, su código de país correspondiente se puede establecer como valor predeterminado en el componente React.