GuidesAPI Reference
Submit Documentation FeedbackJoin Developer CommunityLog In

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.

Parameter

Type

Description

variation

string

The key of the variation for which content should be rendered. Variation keys are in the experiment details page.

default
optional

boolean

When true, content will be rendered in the default case (null variation returned from the OptimizelyExperiment)

children

React.ReactNode | Function

Content or function returning content to be rendered based on the enabled status and variable values of the feature. See usage examples below.

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.


Did this page help you?