> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.clubedge.live/llms.txt
> Use this file to discover all available pages before exploring further.

# React SDK

> Integrate feature flags into your React or browser application with hooks and a context provider.

The React SDK (`@clubedge/feature-flags-react`) provides a `FeatureFlagsProvider` and the `useFeatureFlag()` hook for client-side React applications. It wraps `@clubedge/feature-flags-sdk-core` and is designed for component-level conditional rendering.

## Requirements

* Any modern evergreen browser (ES2020+)
* React 18+

## Installation

```bash theme={null}
pnpm add @clubedge/feature-flags-react
# or
npm install @clubedge/feature-flags-react
```

## Quick start

### 1. Create and initialize a client

```typescript theme={null}
// 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();
}
```

### 2. Wrap your app with the provider

```tsx theme={null}
// 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>
  );
}
```

### 3. Evaluate flags in components

```tsx theme={null}
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>
  );
}
```

## Browser (vanilla JS)

For non-React browser usage, install `@clubedge/feature-flags-browser` (same `FeatureFlagsClient` API):

```bash theme={null}
pnpm add @clubedge/feature-flags-browser
```

```typescript theme={null}
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');
```

## Security considerations

<Warning>
  The SDK key is bundled into client-side JavaScript and visible to anyone via browser devtools. Only use this for **non-sensitive** flags — UI variants, copy tests, feature tours.

  For **sensitive** flags (entitlements, kill switches, paywalled features), evaluate the flag on your **backend** using the [Node.js SDK](/feature-flags/sdk/node) or [Direct HTTP API](/feature-flags/reference/evaluation-api), and pass only the resulting boolean to the frontend.
</Warning>

## API reference

| Export                          | Type      | Description                                           |
| ------------------------------- | --------- | ----------------------------------------------------- |
| `FeatureFlagsProvider`          | Component | Wraps your app; provides the client via React context |
| `useFeatureFlag(key, context?)` | Hook      | Returns `boolean` — whether the flag is enabled       |
| `useFeatureFlags()`             | Hook      | Returns the underlying `FeatureFlagsClient` instance  |

<Warning>
  Like all SDKs, `useFeatureFlag()` returns the **pre-evaluated** result from `GET /sdk/v1/config`. The `context` argument does not influence per-request evaluation. Use [Direct HTTP](/feature-flags/reference/evaluation-api) if you need per-user targeting at request time.
</Warning>

## Next steps

* [SDK configuration reference](/feature-flags/reference/sdk-config) — full options, lifecycle, events
* [Next.js SDK](/feature-flags/sdk/nextjs) — if you need SSR support
* [Evaluation API](/feature-flags/reference/evaluation-api) — server-side evaluation with full context