(deprecated) statsig-react client sdk
To get started with Statsig in React, you should use the new Statsig React SDK
.
This version of the SDK is deprecated and will only receive major bug fixes going forward. Official support ends Jan 31, 2025.
If you already use this deprecated version, you should check out the migration docs.
Installation
NOTE: v2.X.X+ of the SDK updated the default domains that the SDK hits for initialization and event logging.
To initialize, the SDK will hit: https://featureassets.org To log events, the SDK will hit: https://prodregistryv2.org
Consider if you need to allow these domains in your CSP, VPN, or any other services when updating to this SDK version.
You can install the Statsig React SDK via npm or yarn.
- NPM
- Yarn
npm install statsig-react
yarn add statsig-react
Initialize the SDK
After installation, you will need to initialize the SDK using a Client SDK key from the "API Keys" tab on the Statsig console.
These Client SDK Keys are intended to be embedded in client side applications. If need be, you can invalidate or create new SDK Keys for other applications/SDK integrations.
Do NOT embed your Server Secret Key in client-side applications, or expose it in any external-facing documents. However, if you accidentally expose it, you can create a new one in the Statsig console.
In addition to the SDK key, you should also pass in a StatsigUser for feature gate targeting and experimentation grouping purposes.
At the root of your component tree, wrap your app in a StatsigProvider
and set waitForInitialization=true
.
import { StatsigProvider } from "statsig-react";
function App() {
return (
<StatsigProvider
sdkKey="<STATSIG_CLIENT_SDK_KEY>"
waitForInitialization={true}
// StatsigOptions (Not Required)
options={{
environment: { tier: "staging" },
}}
>
<div className="App">{/* Rest of App ... */}</div>
</StatsigProvider>
);
}
If you do not use waitForInitialization
, all checks to Statsig will return default values until initialization completes.
Working with the SDK
Checking a Feature Flag/Gate
Now that your SDK is initialized, let's check a Feature Gate. Feature Gates can be used to create logic branches in code that can be rolled out to different users from the Statsig Console. Gates are always CLOSED or OFF (think return false;
) by default.
import { useGate } from "statsig-react";
...
function MyComponent() {
const { value, isLoading } = useGate("a_gate_name");
// Only required if you have not set waitForInitialization to true
if (isLoading) {
return <div>Fetching Values...</div>;
}
return <div>{value ? "Passes Gate" : "Fails Gate"}</div>;
}