React

The React binding wraps StatsKitClient (the browser client) so components read flags with a hook and re-render automatically when a flag is published. Import from the /react entry point.

Browser-safe key

React runs in the browser, so use a public key: csk_live_… or vpk_live_…. See the Browser SDK for the underlying client.

Install

npm install @statskit/sdk

Provider

Create a StatsKitClient, call init(), and wrap your tree in StatsKitProvider:

App.tsx

import { StatsKitClient } from "@statskit/sdk";
import { StatsKitProvider, useFlag } from "@statskit/sdk/react";

const client = new StatsKitClient({
  clientKey: "csk_live_xxx",
  context: { key: user.id, attributes: { plan: user.plan } },
});
client.init();

export function App() {
  return (
    <StatsKitProvider client={client}>
      <Checkout />
    </StatsKitProvider>
  );
}

useFlag

useFlag(key, default) reads a flag from the provider’s client and subscribes the component to updates. When the flag is published, the component re-renders with the new value.

Checkout.tsx

import { useFlag } from "@statskit/sdk/react";

function Checkout() {
  const useNew = useFlag("new-checkout", false); // re-renders on publish
  return useNew ? <NewCheckout /> : <OldCheckout />;
}

The default’s type determines the read: pass false for a boolean flag, a string for a string flag, a number for a number flag, or an object for a JSON flag. Evaluation never throws, the default is returned if the flag is missing or the network is down.

Re-targeting identity

Call the client’s identify() to switch identity after login or when an attribute changes. It re-fetches flags for the new context and re-renders every useFlag consumer:

import { useStatsKit } from "@statskit/sdk/react";

function LoginButton() {
  const client = useStatsKit();
  return (
    <button onClick={() => client.identify({ key: user.id, attributes: { plan: "premium" } })}>
      Sign in
    </button>
  );
}

Note

The /react entry point exports StatsKitProvider, useFlag, useAllFlags, and useStatsKit (which returns the client). There is no dedicated identify hook: call useStatsKit().identify() as shown above.

Full example

feature-gate.tsx

import { StatsKitClient } from "@statskit/sdk";
import { StatsKitProvider, useFlag } from "@statskit/sdk/react";

const client = new StatsKitClient({
  clientKey: "csk_live_xxx",
  context: { key: currentUser.id, attributes: { plan: currentUser.plan } },
});
client.init();

function Dashboard() {
  const showBeta = useFlag("beta-dashboard", false);
  const limit = useFlag("upload-limit", 5);

  return (
    <section>
      {showBeta && <BetaBanner />}
      <Uploader maxFiles={limit} />
    </section>
  );
}

export function Root() {
  return (
    <StatsKitProvider client={client}>
      <Dashboard />
    </StatsKitProvider>
  );
}

For evaluation details, exposures, and options, see the Browser SDK and the SDK overview.