react-featureflags-client

Truflag's React SDK for client-side feature flags.

Use it to evaluate flags, target users with attributes, perform a/b testing, and roll out changes gradually without shipping a new build.

Install

npm install react-featureflags-client

Quick start

import { FlagProvider, useFlag, useFlagsReady } from "react-featureflags-client";

export function App() {
  return (
    <FlagProvider
      options={{
        apiKey: process.env.NEXT_PUBLIC_TRUFLAG_CLIENT_KEY!,
      }}
    >
      <CheckoutGate />
    </FlagProvider>
  );
}

function CheckoutGate() {
  const ready = useFlagsReady();
  const checkoutV2 = useFlag("checkout-v2", false);

  if (!ready) return null;
  return checkoutV2 ? <CheckoutV2 /> : <CheckoutV1 />;
}

Common tasks

Prefer instance-based naming (consistent with native SDKs):

import { TruflagClient } from "react-featureflags-client";

const client = new TruflagClient();
await client.configure({ apiKey: process.env.NEXT_PUBLIC_TRUFLAG_CLIENT_KEY! });

The existing singleton Flags API is still fully supported.

Log in a user and update attributes:

import Flags from "react-featureflags-client";

await Flags.login({
  id: "user-123",
  attributes: {
    plan: "pro",
    country: "US",
  },
});

await Flags.setAttributes({
  role: "admin",
});

Read flag values:

import Flags from "react-featureflags-client";

const checkoutCopy = Flags.getFlag("checkout-copy", "control");
const payload = Flags.getFlagPayload("checkout-copy");
const allFlags = Flags.getAllFlags();

Track an event:

import Flags from "react-featureflags-client";

await Flags.track("checkout_completed", {
  orderId: "ord_123",
  value: 49.99,
  currency: "USD",
});

Reset to an anonymous user:

await Flags.logout();

Docs

• Getting started: https://truflag.com/docs/getting-started
• React SDK guide: https://truflag.com/docs/sdks/react
• API reference: https://truflag.com/docs/api