OptimizelyVariation

OptimizelyVariation is used with a parent OptimizelyExperiment to render different content for different variations.

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. The OptimizelyVariation component labeled with the variation prop equal to the variation_key will be rendered inside the OptimizelyExperiment component.

Props

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

Examples

If your experiment key was exp1 and that experiment had a variation simple and detailed, you could use the ExperimentComponent to render a SimpleComponent or a DetailedComponent depending on whether the user was assigned the 'simple' variation or 'detailed' variation. If for some reason Optimizely did not initialize in the 3000 ms timeout, then the default variation would be rendered instead:

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

function ExperimentComponent() {
  return (
    <OptimizelyExperiment experiment="exp1" timeout={3000}>
      <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.