React SDK

The React SDK wraps the core JS SDK and adds a React context plus hooks, so you can evaluate feature flags anywhere in your component tree without prop-drilling.

Install

npm install @growthbook/growthbook-react

The @growthbook/growthbook-react package re-exports everything from @growthbook/growthbook, so you only need one install.

Setup

Create a GrowthBook instance exactly as you would in a vanilla JS project, then wrap your app root with <GrowthBookProvider growthbook={gb}>. Every component inside that tree can then read flags through hooks or declarative components.

Hooks

useFeatureIsOn('flag-key') — returns a boolean. The simplest way to gate a component; renders nothing extra and re-renders when the flag changes.
useFeatureValue('flag-key', fallback) — returns the feature’s value cast to the type of your fallback. Pass a typed default and TypeScript will infer the return type automatically.

Declarative rendering

<IfFeatureEnabled feature="flag-key"> renders its children only when the flag evaluates to true. It is a thin wrapper around useFeatureIsOn and keeps JSX templates readable without extra ternaries.

import { GrowthBook } from '@growthbook/growthbook';
import { GrowthBookProvider, useFeatureIsOn, useFeatureValue, IfFeatureEnabled } from '@growthbook/growthbook-react';

const gb = new GrowthBook({
  apiHost: 'https://cdn.growthbook.io',
  clientKey: 'sdk-abc123',
});

await gb.init({ timeout: 2000 });
gb.setAttributes({ id: 'user-abc' });

// Wrap your app once
export function App() {
  return (
    <GrowthBookProvider growthbook={gb}>
      <HomePage />
    </GrowthBookProvider>
  );
}

// Use hooks anywhere inside the tree
function HomePage() {
  const darkMode = useFeatureIsOn('dark-mode');
  const theme = useFeatureValue('ui-theme', 'light');

  return (
    <div className={darkMode ? 'dark' : 'light'}>
      <p>Theme: {theme}</p>
      <IfFeatureEnabled feature="new-dashboard">
        <NewDashboard />
      </IfFeatureEnabled>
    </div>
  );
}