[go: up one dir, main page]
Skip to main content
If you’re looking for a more detailed guide, check out the SDK Overview or read about choosing between client or server SDKs.
  • React
  • JS snippet
  • Python
  • Node
  • +24 more SDKs
1

Install Statsig packages

npm install @statsig/react-bindings
2

Wrap child components

Next, update your app’s default function so that the StatsigProvider wraps around all child components.
import { StatsigProvider } from "@statsig/react-bindings";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <StatsigProvider 
      sdkKey={"client-MY-STATSIG-CLIENT-KEY"} // 
      user={{ userID: "quickstart-user" }}
      loadingComponent={<div>Loading...</div>}>
      {children}
    </StatsigProvider>
  );
}
This example assumes you’re using client-side React, if you’re Server-Side Rendering, you’d be better served by our Next.js docs.
3

Add client key

Create a client API key in the Statsig console Settings. Copy and paste it to replace <REPLACE_WITH_YOUR_CLIENT_KEY> in the code snippet from the previous step.
4

Basic Usage

  • Check a Gate
  • Get an Experiment Value
  • Log an Event
First, create a gate on the Feature Gates page in console, then check it in-code:
const { client } = useStatsigClient();
return (
  <div>Gate is {client.checkGate('check_user') ? 'passing' : 'failing'}.</div>
);

​
Next steps

Congratulations! You’ve successfully set up the Statsig SDK in React. Continue on to the tutorials, or jump in to the full Next.js or React SDK libraries.
⌘I