GrowthBook React Client Library

Installation

yarn add @growthbook/growthbook-react

or

npm install --save @growthbook/growthbook-react

Quick Start

Step 1: Configure your app

import { GrowthBook, GrowthBookProvider } from "@growthbook/growthbook-react";

// Create a GrowthBook instance
const growthbook = new GrowthBook({
  // The attributes you want to use to assign variations
  user: {
    id: "123",
  },
  // Called every time the user is put into an experiment
  trackingCallback: (experiment, result) => {
    // Mixpanel, Segment, GA, or custom tracking
    mixpanel.track("Experiment Viewed", {
      experiment: experiment.key,
      variation: result.variationId,
    });
  },
});

export default function App() {
  return (
    <GrowthBookProvider growthbook={growthbook}>
      <OtherComponent />
    </GrowthBookProvider>
  );
}

Step 2: Run an experiment

import { useExperiment } from "@growthbook/growthbook-react";

export default function OtherComponent() {
  const { value } = useExperiment({
    key: "new-headline",
    variations: ["Hello", "Hi", "Good Day"],
  });

  return <h1>{value}</h1>;
}

Class Components

Note: This library uses hooks internally, so still requires React 16.8 or above.

import { withRunExperiment } from "@growthbook/growthbook-react";

class OtherComponent extends Component {
  render() {
    // The `runExperiment` prop is identical to the `useExperiment` hook
    const { value } = this.props.runExperiment({
      key: "headline-test",
      variations: ["Hello World", "Hola Mundo"],
    });
    return <h1>{value}</h1>;
  }
}
// Wrap your component in `withRunExperiment`
export default withRunExperiment(OtherComponent);

Configuration and Usage

This package is a small React wrapper around the Javascript client library. Check those docs for configuration options and more experiment usage examples.

Dev Mode

You can add the GrowthBook Dev Mode widget to make development and testing easier.

Install the dev mode widget with npm install --save-dev @growthbook/dev or yarn install --dev @growthbook/dev.

Then render the GrowthBookDev component inside of the GrowthBookProvider

import { GrowthBookDev } from "@growthbook/dev";

function MyApp() {
  return (
    <GrowthBookProvider growthbook={...}>
      <OtherComponent />
      <GrowthBookDev/>
    </GrowthBookProvider>
  )
}

and you should see the Dev Mode widget on the bottom-left of your screen

Dev Mode Variation Switcher

Configuration and Usage

This package is a small React wrapper around the javascript client library. Look at those docs for more info on how to configure your GrowthBook instance and define Experiments.