Example usage

This topic gives a brief code example of how to use the Optimizely React SDK to evaluate feature flags, activate A/B tests, or feature tests.

Suggest Edits

Once you have installed the React SDK, import the Optimizely library into your code, get your Optimizely project's datafile, and instantiate a client. Then, you can use the client to evaluate feature flags, activate an A/B test, or feature test.

This example demonstrates the basic usage of each of these concepts. This example shows how to:

Evaluate a feature with the key price_filter and check a configuration variable on it called min_price. The SDK evaluates your feature test and rollouts to determine whether the feature is enabled for a particular user, and which minimum price they should see if so.
Run an A/B test called app_redesign. This experiment has two variations, control and treatment. It uses the activate method to assign the user to a variation, returning its key. As a side effect, the activate function also sends an impression event to Optimizely to record that the current user has been exposed to the experiment.
Use event tracking to track an event called purchased. This conversion event measures the impact of an experiment. Using the track method, the purchase is automatically attributed back to the running A/B and feature tests we have activated, and the SDK sends a network request to Optimizely via the customizable event dispatcher so we can count it in your results page.

import React from 'react';
import {
  createInstance,
  OptimizelyProvider,
  OptimizelyFeature,
  OptimizelyExperiment,
  OptimizelyVariation,
  withOptimizely,
} from '@optimizely/react-sdk'

const optimizely = createInstance({
  sdkKey: '<Your_SDK_Key>', // TODO: Update to your SDK Key
})

class Button extends React.Component {
  onClick = () => {
    const { optimizely } = this.props
    optimizely.track('purchased')
  }

  render() {
    <button onClick={this.onClick}>
      Purchase
    </button>
  }
}

const PurchaseButton = withOptimizely(Button)


function App() {
  return (
    <OptimizelyProvider
      optimizely={optimizely}
      user={{
        id: 'user123',
      }}
    >
      <div className="App">
        <OptimizelyFeature feature="price_filter">
          {(isEnabled, variables) => (
            isEnabled
            ? `Price filter enabled with a min price of ${variables.min_price}`
            : `Price filter is NOT enabled`
          )}          
        </OptimizelyFeature>
        <OptimizelyExperiment experiment="app_redesign">
          <OptimizelyVariation variation="control">
            <h1>Old Site</h1>
            <PurchaseButton />
          </OptimizelyVariation>

          <OptimizelyVariation variation="treatment">
            <h1>Redesigned Site</h1>
            <PurchaseButton />
          </OptimizelyVariation>
        </OptimizelyExperiment>
      </div>
    </OptimizelyProvider>
  );
}

export default App;

Updated about 2 years ago