SDK Quickstart

Install and initialize the SDK in minutes with production-safe defaults.

1. Install

$Terminal

npm install react-featureflags

2. Initialize provider

You should only configure the shared instance of Flags once, usually on app launch. After that, the same instance is shared throughout your app.

Make sure you configure Flags with your public API key only. You can find this API key in your Environments tab in the Truflag dashboard.

TSTypeScript

import { FlagProvider } from "react-featureflags";

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    <FlagProvider
      clientKey={process.env.NEXT_PUBLIC_FLAG_CLIENT_KEY!}
      options={{ refreshIntervalMs: 30000, startWaitMs: 1500 }}
    >
      {children}
    </FlagProvider>
  );
}

The user object in .configure is how Truflag identifies users of your app. You can provide a custom user here or omit it for us to generate an anonymous id.

If your users are not yet signed in, you can call login later to associate the new user.

TSTypeScript

import { FlagProvider } from "react-featureflags";

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    <FlagProvider
      clientKey={process.env.NEXT_PUBLIC_FLAG_CLIENT_KEY!}
      options={{ refreshIntervalMs: 30000, startWaitMs: 1500 }}
    >
      {children}
    </FlagProvider>
  );
}

3. Evaluate a feature flag

TSTypeScript

import { useFeatureFlag, useFlagsReady } from "react-featureflags";

export function CheckoutEntry() {
  const ready = useFlagsReady();
  const enabled = useFeatureFlag("new-checkout", false, {
    key: "user-123",
    attributes: { plan: "pro", country: "US" },
  });

  if (!ready) return <LoadingSkeleton />;
  return enabled ? <CheckoutV2 /> : <CheckoutV1 />;
}