Statsig SDK Quickstart Guide

Get data flowing into Statsig with only a few lines of code.

This quickstart guide is meant to get your implementation up and running as quickly as possible. Because of that, it only implements a standardized set of information. For a more detailed guide, go to the Statsig SDK Getting Started guide or read about choosing between client or server SDKs.

  1. Install Statsig packages

    bash
    npm install @statsig/react-bindings

  2. Wrap your child components

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

    tsx
    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 a 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. Confirm the basic functions are working

    Create a gate on the Feature Gates page in console and confiirm it works from within the code:

    jsx
    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 SDK Quickstart tutorials, or go to the full Next.js or React SDK reference.

Was this helpful?