Watch-IP

React'te IP Konum Belirleme: Bir Ziyaretçi Konumu Bileşeni

Watch-IP JavaScript SDK'sı etrafında, gerçek bir React bileşeninin ihtiyaç duyduğu yükleme, hata ve iptal (cancellation) işleme dahil olmak üzere yeniden kullanılabilir bir useVisitorGeo hook'u oluşturun — isteğin geliştirme ortamında neden iki kez tetiklenebileceği de dahil.

Başlamadan önce

  • Bir Watch-IP hesabı ve uygulamanızın origin'inin (geliştirme ve üretim) izin verilen origin listesinde bulunduğu yayınlanabilir bir ziyaretçi anahtarı.
  • React 18 veya daha yenisi — aşağıda açıklanan StrictMode çift çağırma davranışı yalnızca geliştirme moduna özgüdür.
  • @digitload/watch-ip-sdk kurulu olmalı (npm install @digitload/watch-ip-sdk).

1. Bir useVisitorGeo hook'u oluşturun

SDK'nın getGeo() çağrısını, yükleme/sonuç/hata durumunu izleyen ve bileşen sonuçlanmadan önce unmount olursa isteği iptal eden bir hook içine sarın.

TypeScript

import { useEffect, useState } from "react";
import { WatchIP, type GeoResponse } from "@digitload/watch-ip-sdk";

const client = new WatchIP("YOUR_PUBLISHABLE_KEY");

export function useVisitorGeo() {
  const [geo, setGeo] = useState<GeoResponse | null>(null);
  const [status, setStatus] = useState<"loading" | "ready" | "error">("loading");

  useEffect(() => {
    const controller = new AbortController();

    client
      .getGeo({ signal: controller.signal })
      .then((result) => {
        setGeo(result);
        setStatus("ready");
      })
      .catch((err) => {
        if (err.name !== "AbortError") setStatus("error");
      });

    return () => controller.abort();
  }, []);

  return { geo, status };
}

2. İsteğin geliştirmede neden iki kez tetiklenebileceği

React'in StrictMode'u, kendini temizlemeyen efektleri ortaya çıkarmak için geliştirme ortamında her bileşeni bilinçli olarak bir kez mount edip unmount eder ve yeniden mount eder. Bu, bu hook'un efektinin iki kez çalıştığı anlamına gelir ve yukarıdaki AbortController burada önemlidir: ilk istek, sonuçlanmadan önce cleanup fonksiyonu tarafından iptal edilir, böylece yalnızca bir gerçek getGeo() çağrısı fiilen tamamlanır. Abort çağrısının atlanması doğruluğu bozmaz — GET /v1/geo salt okunur bir işlemdir — ama gereksiz, devam eden bir istek ve atılan ilk örneğin hiç kullanmadığı bir durum güncellemesi bırakır.

3. Yükleme, sonuç ve yedek durumlarını render edin

Hook'u, başka herhangi bir veri hook'unu kullandığınız gibi kullanın; status 'loading' durumundan çıkana kadar makul bir varsayılanı görünür tutun.

TypeScript (JSX)

function RegionBanner() {
  const { geo, status } = useVisitorGeo();

  if (status === "loading") return <p>Bölgeniz belirleniyor…</p>;
  if (status === "error" || !geo?.country) return <p>Varsayılan bölge kullanılıyor</p>;
  return <p>{geo.city ?? geo.country} için içerik gösteriliyor</p>;
}

4. Ziyaretçinin açık tercihini koruyun

Düz JavaScript kılavuzuyla aynı kural: önerilen country'yi uygulamadan önce kayıtlı bir tercih olup olmadığını kontrol edin ve yalnızca henüz bir tercih yokken hook'un sonucuna geri dönün.

TypeScript

const preferred = localStorage.getItem("preferredCountry");
const country = preferred ?? geo?.country ?? "US";

Hatalar ve uç durumlar

İzin verilmeyen bir origin, kodunuz normal bir yanıt görmeden önce başarısız olur — önce uygulamanın geliştirme ve üretim URL'lerini anahtarın izin verilen origin'lerine ekleyin. GeoResponse üzerindeki ip ve isEUCountry dışındaki her alan null olabilir, bu yüzden status === 'ready' tek başına yeterli değildir; yukarıdaki yedek çözümün geo?.country ile yaptığı gibi, render etmek üzere olduğunuz belirli alanı da kontrol edin.

Sonraki adım

Next.js mi kullanıyorsunuz? Sunucu tarafında render modeli, bu isteğin güvenle nerede çalışabileceğini değiştirir — istemci/sunucu ayrımı ve sağlanan IP'ler için gizli anahtarlı bir sunucu deseni için Next.js kılavuzuna bakın.

İlgili sayfalar