The most annoying thing about filling out an online order form is picking your country and state from a long list of options. Ideally, the order forms would be able to detect the user's country and state based on his or her IP address, and pre-fill the form to create a smooth user experience. However, this is a challenge for Reactjs because JavaScript cannot get IP addresses from browsers. To solve this problem, we need a little help from a server-side API - VisitorAPI.

Installing VisitorAPI

VisitorAPI is an npm package you can install easily by running the following command.

npm install visitorapi

Your location states in Reactjs

You have the following states in the parent component of the form fields to set the fields and store the location variables: country, state and city

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

Calling VisitorAPI to pre-fill the location states

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

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 front end, there is no API key or token. It uses the referrer domain to authorise the API calls. This makes it safe to be used on the Internet without the need to worry about exposing your API keys.

Response data

The API response is 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.

Conclusion

I hope this post will help you build better user experience by automate some annoying tasks your users experience and lead to a better conversion rate for your Reactjs forms.

Chaoming's Blog