How to: React Visitor IP Geolocation

Knowing visitor geolocation can help you tailor your application to provide a better user experience. For example, you can adjust:

• Currency settings based on the user’s location
• Shipping options to match the user’s region
• Legal compliance requirements specific to the user’s country
• Block access to your app from certain regions or countries

Sounds interesting? Let’s start with creating a new React application:

npx create-react-router@latest

After creating the app, enter its directory. Then, install the IP-Sonar SDK:

npm install --save @ip-sonar/ip-sonar-js

Now, edit the app/welcome/welcome.tsx file. First, import createClient factory function and the IPGeolocation type from the IP-Sonar SDK. Additionally, import useState and useEffect:

import {createClient, type IPGeolocation} from "@ip-sonar/ip-sonar-js";
import {useState, useEffect} from "react";

Now, inside the Welcome component, create a client instance using the createClient function. Then, use the useState hook to create a state variable for storing the IP geolocation details and initialize it to null.

export function Welcome() {
    const client = createClient({apiKey: "YOUR_API_KEY"}); // optional: pass your API key here
    const [myIPDetails, setMyIPDetails] = useState<IPGeolocation | null>(null);

    useEffect(() => {
        client
            .lookupMyIP()
            .then(result => setMyIPDetails(result))
            .catch(err => console.log(err));
    }, []);
}

Note: You can pass your API key to the createClient function if you have one. If you don’t have an API key, you can still use the SDK without it, with rate limits applied.

Now, you can render the IP geolocation details in your component. If the details are not yet available, display a loading message:

return (
    <main className="flex items-center justify-center pt-16 pb-4">
        <div className="flex-1 flex flex-col items-center gap-16 min-h-0">
            <div className="w-full space-y-6 px-4">
                {myIPDetails ? (
                    <div className="text-center">
                        <code className="text-xs text-gray-500">
                            {JSON.stringify(myIPDetails, null, 2)}
                        </code>
                    </div>
                ) : (
                    <div className="text-center text-gray-500">
                        Loading your IP details...
                    </div>
                )}
            </div>
        </div>
    </main>
);

Finally, your complete app/welcome/welcome.tsx file should look like this:

import {createClient, type IPGeolocation} from "@ip-sonar/ip-sonar-js";
import {useState, useEffect} from "react";

export function Welcome() {
    const client = createClient({apiKey: "YOUR_API_KEY"}); // optional: pass your API key here
    const [myIPDetails, setMyIPDetails] = useState<IPGeolocation | null>(null);

    useEffect(() => {
        client
            .lookupMyIP()
            .then(result => setMyIPDetails(result))
            .catch(err => console.log(err));
    }, []);

    return (
        <main className="flex items-center justify-center pt-16 pb-4">
            <div className="flex-1 flex flex-col items-center gap-16 min-h-0">
                <div className="w-full space-y-6 px-4">
                    {myIPDetails ? (
                        <div className="text-center">
                            <code className="text-xs text-gray-500">
                                {JSON.stringify(myIPDetails, null, 2)}
                            </code>
                        </div>
                    ) : (
                        <div className="text-center text-gray-500">
                            Loading your IP details...
                        </div>
                    )}
                </div>
            </div>
        </main>
    );
}

That’s it! You have successfully implemented IP geolocation in your React application. Now, run your React app. You should see your IP geolocation details displayed on the Welcome page.

You can inspect the type IPGeolocation in your IDE to see what properties are available. Use properties like country, city, latitude, and longitude to enhance your app’s functionality.

Free tier limits

Remember that the free tier of the IP-Sonar service has a limit of 1,000 requests per day. If you need more requests, consider upgrading to a paid plan. See our pricing page for more details.

Learn More

• Documentation