@core-sdk/feature-flags-react

@core-sdk/feature-flags-sdk içindeki FeatureFlagsClient örneğini React context ile uygulamaya yayar; bayrak sorgusu ve kimlik (identify) için hook tabanlı ince bir sarmalayıcı sağlar.

Kurulum

npm install @core-sdk/feature-flags-react react

• Peer: react — gereksinim bu paketin package.json → peerDependencies içinde; npm install ile çözülür.
• Bağımlılık: @core-sdk/feature-flags-sdk (dependencies; kurulumda indirilir).

Kural modeli sunucu ve çekirdek paketle uyumlu olmalıdır: koşullar OR, filtreler AND — ayrıntı için @core-sdk/feature-flags-core ve bayrak API dokümantasyonuna bakın.

Hızlı başlangıç

"use client";

import {
  FeatureFlagsClient,
  FeatureFlagsProvider,
  useFeatureFlagEnabled,
  useIdentify,
} from "@core-sdk/feature-flags-react";

const featureClient = new FeatureFlagsClient({
  baseUrl: "https://flag-api.example.com",
  apiKey: process.env.NEXT_PUBLIC_FEATURE_FLAGS_API_KEY ?? "",
  projectKey: "portal-web",
  includeBrowserInfo: true,
});

export function AppRoot({ children }: { children: React.ReactNode }) {
  return (
    <FeatureFlagsProvider client={featureClient} autoBootstrap>
      <IdentityBridge>{children}</IdentityBridge>
    </FeatureFlagsProvider>
  );
}

function IdentityBridge({ children }: { children: React.ReactNode }) {
  const { identify, reset } = useIdentify();
  // Oturum değişince: identify(id, traits) + featureClient.invalidate()
  // veya reset() + invalidate()
  return <>{children}</>;
}

function CheckoutGate() {
  const { enabled, loading } = useFeatureFlagEnabled("checkout_redesign");
  if (loading) return null;
  return enabled ? <div>New checkout</div> : <div>Legacy checkout</div>;
}

FeatureFlagsProvider props

| Prop | Açıklama | |------|-----------| | client | Paylaşılan FeatureFlagsClient (zorunlu). | | autoBootstrap | true ise mount sonrası bir kez client.bootstrap(); bootstrap bitene kadar (veya timeout) children opsiyonel olarak kilitlenir. | | bootstrapGateTimeoutMs | Geçit için üst süre (ms); varsayılan 10000. ≤ 0 ise sadece bootstrap tamamlanınca açılır. | | bootstrappingFallback | Geçit kapalıyken gösterilecek içerik (ör. spinner). |

Hook’lar

| Hook | Dönüş / davranış | |------|-------------------| | useFeatureFlagsClient() | Context’teki FeatureFlagsClient. Provider dışında kullanılırsa hata. | | useFeatureFlagEnabled(flagKey, context?) | { enabled, loading }. Önbellekte değer varsa peekServerEnabled ile gereksiz istek azaltılabilir. | | useIdentify() | { identify, reset } — SDK’daki identify / reset ile aynı örnek üzerinde. |

identify sonrası yenileme

identify bağlamı değiştirir; hook’ların yeni bağlamla tekrar hesaplanması için featureClient.invalidate() çağrısı önerilir (aksi halde eski önbellekli sonuç görülebilir).

Gizlilik ve includeBrowserInfo

Varsayılan true iken değerlendirme bağlamına tarayıcıdan alanlar eklenir. KVKK / deterministik test için istemciyi includeBrowserInfo: false ile oluşturabilirsiniz.

Lisans

Kuruluşunuzun lisans kuralları geçerlidir.