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.

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.