Skip to main content

How to set up Feature Flags in React

Integrating feature flags into a React web application using the Statsig React SDK involves a few key steps. First, you'll start by setting up a basic React application. Then, you'll integrate Statsig to manage feature flags.

Step 1: Creating a Basic React Application

  1. Set Up Your React App:

    • Ensure you have Node.js installed on your system.
    • Create a new React app by running the following command in your terminal:
      npx create-react-app hello-world-react
    • Navigate into your new app directory:
      cd hello-world-react
  2. Start the React App:

    • Start your application to make sure everything is working:
      npm start
    • Your browser should open to a page with a React logo and the text "Edit src/App.js and save to reload."
  3. Modify App.js for a Simple Hello World Page:

    • Open src/App.js and replace its content with a simple "Hello, World!" example:

      function App() {
      return (
      <div className="App">
      <header className="App-header">
      <p>Hello, World!</p>

      export default App;

Step 2: Integrating Statsig for Feature Flags

  1. Install Statsig React SDK:

    • Install the Statsig SDK for React by running:
      npm install statsig-react
  2. Initialize Statsig in Your Application:

    • Modify src/index.js to initialize Statsig. You'll need your Statsig Client SDK Key, which you can find in the Statsig console.

      import React from 'react';
      import ReactDOM from 'react-dom';
      import './index.css';
      import App from './App';
      import { StatsigProvider } from 'statsig-react';

      const statsigOptions = {
      environment: { tier: 'production' }, // Optional: customize your environment

      <StatsigProvider sdkKey="your_client_sdk_key" user={{ userID: 'unique_user_id' }} options={statsigOptions}>
      <App />

    • Replace "your_client_sdk_key" with your actual Statsig Client SDK Key.

  3. Use a Feature Flag in App.js:

    • Modify src/App.js to check a feature flag.

      import { useGate } from 'statsig-react';

      function App() {
      const { value: isFeatureEnabled } = useGate('example_feature_flag');

      return (
      <div className="App">
      <header className="App-header">
      {isFeatureEnabled ? <p>Feature Flag is enabled!</p> : <p>Hello, World!</p>}

      export default App;
    • Replace 'example_feature_flag' with the name of your feature flag.

Step 3: Creating Feature Flags in the Statsig Console

  1. Sign Up/Login to Statsig:

  2. Create a New Project (if needed):

    • In the Statsig console, create a new project for your application.
  3. Navigate to Feature Flags:

    • Go to the "Feature Flags" section in the Statsig console dashboard.
  4. Create a New Feature Flag:

    • Click on "Create Feature Flag".
    • Enter a name for your feature flag (e.g., example_feature_flag).
    • Optionally, configure targeting rules based on user properties or environments.
    • Save your feature flag.


  5. Toggle and Configure Your Feature Flag:

    • You can now toggle the feature flag on or off and configure detailed targeting rules directly from the Statsig console.

By following these steps, you have successfully created a React application that uses Statsig for feature flag management. This allows you to control features and conduct experiments in your application dynamically, facilitating a smoother rollout process and feature management without needing constant deployments for updates or changes.