React SDK

The React SDK is designed for client-side applications. It uses Remote Evaluation by default.

Setup

Wrap your application in FlagProvider.

import { FlagProvider } from '@flagcontrol/react';

const config = { sdkKey: 'YOUR_SDK_KEY' };

function App() {
  return (
    <FlagProvider config={config}>
      <YourApp />
    </FlagProvider>
  );
}

Initial Context

You can pass an initial context to FlagProvider to fetch flags for a specific user immediately.

<FlagProvider config={config} context={{ userId: 'user-123' }}>
  <YourApp />
</FlagProvider>

Server-Side Rendering (SSR) & Hydration

If you are using a framework like Next.js, TanStack Start, or Remix, you can evaluate flags on the server using @flagcontrol/react/server and pass them to the client to prevent layout shifts.

Server Component / Loader (Next.js Example)

import { FlagControl } from "@flagcontrol/react/server";
import { ClientLayout } from "./client-layout";

export default async function Layout({ children }) {
  const nodeClient = new FlagControl({ sdkKey: process.env.FLAGCONTROL_SECRET_KEY });
  const serverFlags = await nodeClient.getAllFlags({ userId: "user-123" });

  return <ClientLayout initialFlags={serverFlags}>{children}</ClientLayout>;
}

Client Component (client-layout.tsx)

"use client";
import { FlagProvider } from "@flagcontrol/react";

export function ClientLayout({ initialFlags, children }) {
  return (
    <FlagProvider 
      config={{ sdkKey: process.env.NEXT_PUBLIC_FLAGCONTROL_CLIENT_KEY }} 
      initialFlags={initialFlags}
    >
      {children}
    </FlagProvider>
  );
}

Hooks

useFlag

Use this hook to get a flag value. It automatically updates when the flag changes.

import { useFlag } from '@flagcontrol/react';

const MyComponent = () => {
  const showFeature = useFlag('new-feature', false);
  
  if (!showFeature) return null;
  return <div>New Feature!</div>;
};

useFlagControl

Access the underlying client instance.

import { useFlagControl } from '@flagcontrol/react';

const MyComponent = () => {
  const client = useFlagControl();
  
  const handleLogin = async (user) => {
    // Identify the user and refresh flags
    await client.identify({ userId: user.id, email: user.email });
  };
  
  // ...
};

Dynamic Identification

Use client.identify() (or update the context prop on FlagProvider) to switch users or update attributes. This triggers a re-fetch of flags.

await client.identify({ userId: 'new-user', plan: 'enterprise' });