DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to detect user location and auto-fill forms in React with VisitorAPI
Chaoming Li
Chaoming Li

Posted on

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        
Enter fullscreen mode Exit fullscreen mode

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("");
Enter fullscreen mode Exit fullscreen mode

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);
    }
  );
},[]);
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)

🌚 Turn on dark mode

πŸ”  Change your default font

πŸ“š Adjust your experience level to see more relevant content

Β 

Head to your account's Settings to do all this and more.