React quickstart

@flagwire/sdk-react adds a provider and hooks on top of the browser SDK. Evaluation remains remote, so targeting rules do not ship to the browser.

Install

pnpm add @flagwire/sdk-js @flagwire/sdk-react

Create the browser client

Create one client for the application lifecycle. Do this in browser-only code when your framework supports server rendering.

import { createClient } from "@flagwire/sdk-js";

export const flagClient = createClient({
  clientKey: import.meta.env.VITE_FLAGWIRE_CLIENT_KEY,
  context: { key: "user-123" },
  activation: "visible",
});

Use only a pk_live_ client key in frontend code. A server key beginning with sk_live_ must stay in a secret manager or server environment.

Provide the client

import { FlagProvider } from "@flagwire/sdk-react";
import { flagClient } from "./flag-client";

export function App() {
  return (
    <FlagProvider client={flagClient} waitForReady fallback={<AppSkeleton />}>
      <Checkout />
    </FlagProvider>
  );
}

waitForReady defaults to false, which lets children render immediately with their code defaults. Enable it only when the surrounding UI should wait for initialization to settle.

Read a flag

import { useFlag } from "@flagwire/sdk-react";

function Checkout() {
  const redesigned = useFlag("checkout-redesign", false);
  return redesigned ? <NewCheckout /> : <LegacyCheckout />;
}

The default is required and remains the component’s behavior when the flag cannot be resolved. useFlag() re-renders only when that flag changes.

Update context or inspect details

import { useFlagClient } from "@flagwire/sdk-react";

function AccountSwitcher() {
  const client = useFlagClient();

  async function selectAccount(accountId: string) {
    await client.setContext({ key: accountId });
  }

  return <AccountPicker onSelect={selectAccount} />;
}

Use the returned client for context changes, detail(), start() for manual activation, refresh(), explicit flushes, or update subscriptions.

Close the client

Call flagClient.close() when the application lifecycle ends. Avoid creating a new client inside a component render or one client per route transition.

Type-safe flag keys

pnpm dlx flagwire-typegen --out src/flags.gen.ts

Provide FLAGWIRE_SERVER_KEY through your shell or CI secret environment before running the command. Do not paste a live key into source, a package script, or shell history.

import "./flags.gen";

The generated declaration augments the browser SDK, so useFlag() infers the same flag keys and value types.

Next: Node.js quickstart or targeting reference.