@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 açıldığında identify(id, traits), çıkışta reset() çağırın.
  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 ve reset SDK değerlendirme cache'ini temizler; ayrıca invalidate() çağırmak gerekmez. Ancak bu çağrılar React hook'unu tek başına yeniden çalıştırmaz. Oturum değiştiğinde flag kullanan bileşeni yeniden mount edin veya kullanıcıya bağlı alanları hook'un context parametresine geçirerek yeniden değerlendirmeyi tetikleyin.

Gizlilik ve includeBrowserInfo

Varsayılan false dır. Ve true olarak yapılandırıldığında değerlendirme bağlamına tarayıcıdan alanlar eklenir.

Lisans

Kuruluşunuzun lisans kuralları geçerlidir.