React SDK

@featuregate/react is a thin React layer over @featuregate/browser. It uses publishable client keys and remote browser evaluation through POST /v1/evaluate; it does not expose snapshots or targeting rules to browser code.

Before you install

Follow the Browser SDK setup first: create a publishable client key for one environment, add exact allowed origins for your app, and expose only the flags that React should evaluate in that environment. The React package uses the same key and the same POST /v1/evaluate route.

Install

npm install @featuregate/browser @featuregate/react

Add the provider

Pass a browser client, the flags your route needs, and the current attributes. The provider refreshes once on mount, exposes loading and error state, and cleans up pending store updates on unmount.

import { createFeatureGateBrowserClient } from "@featuregate/browser";
import { FeatureGateProvider } from "@featuregate/react";

const featuregate = createFeatureGateBrowserClient({
clientApiKey: "fg_pk_test_0123456789abcdef0123456789abcdef0123456789abcdef",
});

export function AppFeatureGateProvider(props: { children: React.ReactNode }) {
return (
  <FeatureGateProvider
    client={featuregate}
    flags={[
      { key: "new-checkout", defaultValue: false },
      { key: "checkout-title", defaultValue: "Checkout" },
    ]}
    attributes={{ user: { id: "user_123" } }}
  >
    {props.children}
  </FeatureGateProvider>
);
}

Use typed hooks

Hooks return the configured fallback while the provider is loading or when transient evaluation failures return defaults.

import { useFeatureGateBoolean, useFeatureGateStatus } from "@featuregate/react";

export function CheckoutButton() {
const enabled = useFeatureGateBoolean("new-checkout");
const { error, loading, refresh } = useFeatureGateStatus();

return (
  <button type="button" disabled={loading} onClick={() => void refresh()}>
    {error ? "Try again" : enabled ? "New checkout" : "Classic checkout"}
  </button>
);
}

Available hooks: useFeatureGateBoolean, useFeatureGateString, useFeatureGateNumber, useFeatureGateObject, useFeatureGateValue, useFeatureGateDetails, useFeatureGateStatus, useFeatureGateClient, and useFeatureGateFlags.

The shorter aliases useBooleanFlag, useStringFlag, useNumberFlag, and useObjectFlag are also exported.

Use React SDK values for presentation and client-side product experience. Keep authorization, entitlements, billing checks, and other sensitive decisions on a server runtime key.

Next steps