OptimizelyExperiment

This topic describes the OptimizelyExperiment component, which allows you to evaluate which variation a user gets in an experiment.

Suggest Edits

Version

SDK v1.0.0

Description

The OptimizelyExperiment component buckets a user into one of the variations defined on the experiment and passes the variation_key of the variation assigned to the children component so that the application can render different content based on the variation assigned.

Props

The table below lists the required and optional props for the OptimizelyExperiment Component in React.

Parameter	Type	Description
experiment	string	The key of the experiment to check. The experiment key is defined from the Experiments dashboard.
autoUpdate optional	boolean	If true, this component will re-render in response to datafile or user changes. Default: false.
timeout optional	number	Rendering timeout in milliseconds. If Optimizely has not initialized before this timeout, the OptimizelyExperiment renders with a null variation assignment. Overrides any timeout set on the ancestor OptimizelyProvider.
children	React.ReactNode \| Function with props: variation (string) indicating which variation key was assigned to the user.	Content or function returning content to be rendered based on the enabled status and variable values of the feature. See usage examples below.

Examples

You can use OptimizelyExperiment via a child render function. If the component contains a function as a child, OptimizelyExperiment will call that function, with the result of optimizely.activate(experimentKey).

For example: If your experiment key was exp1 and that experiment had a variation simple, you could use the ExperimentComponent to render a SimpleComponent or a DetailedComponent depending on whether the user was assigned the 'simple' variation:

import { OptimizelyExperiment } from '@optimizely/react-sdk'

function ExperimentComponent() {
  return (
    <OptimizelyExperiment experiment="exp1">
      {(variation) => (
        variation === 'simple'
          ? <SimpleComponent />
          : <DetailedComponent />
      )}
    </OptimizelyExperiment>
  )
}

You can also use the OptimizelyVariation component (see below):

import {
  OptimizelyExperiment,
  OptimizelyVariation
} from '@optimizely/react-sdk'

function ExperimentComponent() {
  return (
    <OptimizelyExperiment experiment="exp1">
      <OptimizelyVariation variation="simple">
        <SimpleComponent />
      </OptimizelyVariation>

      <OptimizelyVariation variation="detailed">
        <ComplexComponent />
      </OptimizelyVariation>

      <OptimizelyVariation default>
        <SimpleComponent />
      </OptimizelyVariation>
    </OptimizelyExperiment>
  )
}

Source files

The language/platform source files containing the implementation for React is index.ts.

Updated about 2 years ago