Almost every address form requires users to pick their countries from a long list of countries. An ideal user experience is to detect the user’s location based on the IP address and auto-fill the city, state and country fields. However, this is a challenge for Reactjs because JavaScript cannot get IP addresses from browsers. To solve this problem, we need a little bit of help from a server-side API – VisitorAPI.

Installing VisitorAPI

VisitorAPI can be installed by using npm:

npm install visitorapi         

Calling VisitorAPI to auto-fill location states

Let’s assume that you have the following states in the parent component of the form fields to store the location variables: country, state and city

const [country, setCountry] = useState(""); const [state, setState] = useState(""); const [city, setCity] = useState(""); 

Now, we can call the VisitorAPI in an useEffect function to set the variables based on the user’s IP address. This will make a call to the API to retrieve the user’s location, currencies, languages and device information when the React component is loaded.

const VisitorAPI = require("visitorapi");  const [country, setCountry] = useState(""); const [state, setState] = useState(""); const [city, setCity] = useState("");  useEffect(() => {   VisitorAPI(     "<project id>",     data => {       setCountry(data.countryCode);       setState(data.region);       setCity(data.city);     }   ); },[]); 

You will need to create a free project in VisitorAPI to get your project ID to replace the <project id> in the example code.

Don’t forget to add your domains to the VisitorAPI authorised domain list otherwise the API will return a 403 error. Because the API is designed to be used by the frontend, there is no API key or token. It uses the referrer domain to authorise the API calls.

API returned data

The API returns more than just the user’s location data. Here is a list of all the property names of the returned JSON and their descriptions.