React SDK

pnpm add @clubedge/feature-flags-react
# or
npm install @clubedge/feature-flags-react

// src/flags-client.ts
import { FeatureFlagsClient, ConsoleLogger } from '@clubedge/feature-flags-sdk-core';

export const client = new FeatureFlagsClient({
  sdkKey: process.env.REACT_APP_FF_SDK_KEY!,
  baseUrl: 'https://flags.clubedge.live',
  pollIntervalMs: 30_000,
  logger: new ConsoleLogger('web-app'),
});

export async function initFlags() {
  await client.initialize();
}

// src/App.tsx
import { FeatureFlagsProvider } from '@clubedge/feature-flags-react';
import { client, initFlags } from './flags-client';
import { useEffect, useState } from 'react';

export default function App() {
  const [ready, setReady] = useState(false);

  useEffect(() => {
    initFlags().then(() => setReady(true));
  }, []);

  if (!ready) return <div>Loading...</div>;

  return (
    <FeatureFlagsProvider client={client}>
      <YourApp />
    </FeatureFlagsProvider>
  );
}

import { useFeatureFlag } from '@clubedge/feature-flags-react';

export function DashboardButton({ user }) {
  const enabled = useFeatureFlag('new_dashboard', {
    userId: user.id,
    country: user.country,
  });

  return enabled ? (
    <a href="/dashboard">New Dashboard</a>
  ) : (
    <a href="/legacy-dashboard">Legacy Dashboard</a>
  );
}

pnpm add @clubedge/feature-flags-browser

import { FeatureFlagsClient, ConsoleLogger } from '@clubedge/feature-flags-browser';

const client = new FeatureFlagsClient({
  sdkKey: '<your-public-sdk-key>',
  baseUrl: 'https://flags.clubedge.live',
});

await client.initialize();
const enabled = client.isEnabled('new_dashboard');