HomeGuidesAPI Reference
Submit Documentation FeedbackJoin Developer CommunityLog In

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.

Once you've installed an 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 flag rules, including A/B tests and flag deliveries.

This example demonstrates the basic usage of each of these concepts:

  1. Evaluate a flag with the key product_sort using the Decision hook. As a side effect, the Decision hook also sends a decision event to Optimizely to record that the current user has been exposed to the experiment.

  2. Conditionally execute your feature code. You have a couple of options:

  • Fetch the flag enabled state, then check a configuration variable on the flag called sort_method. The SDK evaluates your flag rules and determines what flag variation the user is in, and therefore which sort method variable they should see.
  • Fetch on the flag variation, then run 'control' or 'treatment' code.
  1. 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 test for which we made a decision, 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,
  useDecision,
  withOptimizely,
} from '@optimizely/react-sdk'

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

function Button(props) {
  const handleClick = () => {
    const { optimizely } = props;    
    optimizely.track('purchased')
  };
  return <button onClick={handleClick}>Purchase</button>;
}

const PurchaseButton = withOptimizely(Button)

function ProductSort() {
  const [ decision ] = useDecision('product_sort');
  const variationKey = decision.variationKey;
  const isEnabled = decision.enabled;
  const sortMethod = decision.variables['sort_method'];
  return (
    <div>      
      { /* If variation is null, display error */ }
      { variationKey === null && <div className="error">{ decision.reasons }</div> }

      { /* If feature is enabled, do something with the Sort Method variable */ }
      { isEnabled && <div>The Sort method is {sortMethod}</div> }
      
      { /* Show relevant component based on the variation key */ }
      { variationKey === 'control' && <div>Control Component</div> }
      { variationKey === 'treatment' && <div>Treatment Component</div> }
      
      { /* Show Purchase Button to track Purchase event */ }
      <PurchaseButton />
    </div>
  )
}

function App() {
  return (
    <OptimizelyProvider optimizely={optimizely} user={{ id: 'user123' }}>
      <ProductSort />
    </OptimizelyProvider>
  );
}

export default App;

Did this page help you?