How to detect user location and auto-fill forms in React with VisitorAPI
Tags: react, javascript, node, webdev
Published: 2022-06-14 11:39:02

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](https://www.visitorapi.com).

## Installing VisitorAPI

VisitorAPI can be installed by using npm:

```jsx
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

```jsx
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.

```jsx
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.                                                                                   |