Growth Book React Demo

Step 1. Configure your app

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

// Create a GrowthBook instance
const growthbook = new GrowthBook({
  user: { id: mixpanel.get_distinct_id() },
  trackingCallback: (experiment, result) => {
    mixpanel.track("Experiment Viewed", {
      experiment: experiment.key,
      variation: result.variationId
    })
  }
});

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

Step 2. Run experiments

import { useExperiment }
  from '@growthbook/growthbook-react'

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

  const darkmode = useExperiment({
    key: "darkmode",
    variations: [false, true],
  })

  return (
    <div className={ darkmode.value ? "dark" : "light" }>
      <h1>{ greeting.value } World</h1>
      ...
    </div>
  )
}

Step 3. Analyze results

Query your raw data, calculate significance, decide on a winner, and document your findings.

Check out the open-source Growth Book App, which does all of this (and much more) for you automatically.