OptimizelyExperiment

The OptimizelyExperiment component allows you to evaluate which variation a user gets in an experiment.

Version

SDK v2.2.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 the React Native SDK.

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.


Did this page help you?