SDK Quickstart

Install the SDK, configure `Flags` once, and read your first flag in a few minutes. This page covers the shortest path to a working integration.

Need the full API?

Open the SDK API reference.

Open API reference

Prerequisites

Environment public client key from Environments in the dashboard.
An existing flag, for example my-flag.

1. Install

Choose the package for your app runtime.

$Terminal

npm install react-featureflags-client

2. Configure once at startup

Configure the singleton Flags client one time at app startup using your public environment key and user.

TSTypeScript

import { useEffect } from "react";
import Flags from "react-featureflags-client";
 
export default function App() {
  useEffect(() => {
    void Flags.configure({
      apiKey: process.env.NEXT_PUBLIC_TRUFLAG_CLIENT_KEY!,
      user: {
        id: "user-123",
        attributes: {
          plan: "pro",
          country: "US",
        },
      },
    });
  }, []);
 
  return <AppRoutes />;
}

3. Login after sign-in

Call Flags.login() after sign-in when the app starts anonymous.

TSTypeScript

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

4. Read your first flag

Replace my-flag with an existing flag key, and always provide a meaningful fallback. It is used before SDK state is ready or when the key is missing.

TSTypeScript

import { useFlag, useFlagsReady } from "react-featureflags-client";
 
export function CheckoutEntry() {
  const ready = useFlagsReady();
  const enabled = useFlag("my-flag", false);
 
  if (!ready) return <LoadingSkeleton />;
  return enabled ? <CheckoutV2 /> : <CheckoutV1 />;
}

5. Send your first event

Events are product signals you send from your app (for example: checkout started, purchase completed, tutorial finished). They power experiment metrics, analytics, and rollout guardrails.

Truflag automatically tracks flag exposures, which record which variation a user actually received at evaluation time. Pairing exposures with your tracked outcome events is what enables experiment analysis.

TSTypeScript

import Flags from "react-featureflags-client";
 
await Flags.track("checkout_started", {
  plan: "pro",
  source: "web",
});