How to detect user location and auto-fill forms in React with VisitorAPI

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.

JSON Path	Description
ipAddress	The IP address of the visitor.
countryCode	Country from which the visitor is located in as an ISO 3166-1 alpha-2 country code.
countryName	The full name of the country which the visitor is located in.
currencies	An array of the official currencies of the country which the visitor is located in.
languages	An array of the official languages of the country which the visitor is located in.
region	Name of the region, state or province which the visitor is located in. The complete list of valid region values is found in the ISO-3166-2 standard.
city	Name of the city which the visitor is located in.
cityLatLong	Latitude and longitude of the city which the visitor is located in.
browser	The browser name which the visitor uses.
browserVersion	The browser version which the visitor uses.
deviceBrand	The brand of the device which the visitor uses. Only applicable to mobile devices.
deviceModel	The model of the device which the visitor uses. Only applicable to mobile devices.
deviceFamily	The family of the device which the visitor uses. Only applicable to mobile devices.
os	The operating system name of the device which the visitor uses.
osVersion	The operating system version of the device which the visitor uses.