Get started with the Statsig SDK

1. Install Statsig packages

   bash

   Copy

   npm install @statsig/react-bindings
   

2. Wrap child components

   Update your app's default function (typically App.tsx or Layout.tsx) so that the StatsigProvider wraps all child components.

   tsx

   Copy

   import { StatsigProvider } from "@statsig/react-bindings"; // [!code ++]
   
   export default function RootLayout({ children }: { children: React.ReactNode }) {
     return (
       <StatsigProvider // [!code ++]
         sdkKey={"client-MY-STATSIG-CLIENT-KEY"} // [!code ++]
         user={{ userID: "quickstart-user" }} // [!code ++]
         loadingComponent={<div>Loading...</div>}> // [!code ++]
         {children}
       </StatsigProvider> // [!code ++]
     );
   }
   

   This example assumes client-side React. For Server-Side Rendering, refer to the 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 GateGet an Experiment ValueLog an Event

   First, create a gate on the Feature Gates page in console, then check it in-code:

   jsx

   Copy

   const { client } = useStatsigClient();
   return (
     <div>Gate is {client.checkGate('check_user') ? 'passing' : 'failing'}.</div>
   );
   

Next steps

You've set up the Statsig SDK in React. Continue with the tutorials, or go to the full Next.js or React SDK reference.