Feature Flags, Toggles & A/B Testing

Everything you need for turbocharging your modern product development

React Client SDK for Statsig

import Tabs from “@theme/Tabs”; import TabItem from “@theme/TabItem”;

Background

The Statsig React SDK builds on top of the React Context and Hooks APIs, which are only supported in React v16.8.0+. If this requirement prevents you from using the SDK, please let us know.

Also note that this SDK wraps the statsig-js sdk, and reuses a number of concepts introduced in that SDK. This includes:

initialization options have the same set of parameters, with additional react-specific parameters.
hooks for DynamicConfigs return the same DynamicConfig object
the useStatsig hook returns the internal statsig-js sdk, with all the functionality.

Refer to the statsig-js documentation for more information.

Installing the SDK

You can install the statsig SDK via npm or yarn.

npm install statsig-react

yarn add statsig-react

Usage

How we at Statsig use the SDK, and suggested usage.

At the root of your component tree, wrap your app in a StatsigProvider and set waitForInitialization=true


import { StatsigProvider } from 'statsig-react';

...

<StatsigProvider
    sdkKey="<CLIENT_SDK_KEY>"
    user={{
      userID: <LOGGED_IN_USER_ID>,
      email: session?.user?.email ?? undefined,
      ... // other user parameters
    }}
    waitForInitialization={true}>
    <Component />
</StatsigProvider>

Then, in your app, the useGate, useConfig, and useExperiment hooks will provide the up to date values of Feature Gates, DynamicConfigs, and Experiments (respectively) for the initialized user.

import { useGate } from 'statsig-react';

...

export default function MyComponent(): JSX.Element {
  const featureOn = useGate(<MY_FEATURE_GATE>).value;

  return {featureOn ? <MyComponent /> : null;
}

To logEvents, get the underlying StatsigSDK

import { useStatsig } from 'statsig-react';

...

export default function MyComponent(): JSX.Element {
  const statsig = useStatsig();

  return
    <Button
      onClick={() => {
        statsig.logEvent('button_clicked);
      }}
    />;
}