GuidesAPI Reference
Submit Documentation FeedbackJoin Developer CommunityLog In

withOptimizely

By using the higher-order component (HoC) withOptimizely, any component under the OptimizelyProvider can access the Optimizely ReactSDKClient, which exposes Optimizely information and APIs.

Version

SDK v1.0.0

Description

In addition to providing a component with access to all core Optimizely APIs by providing the wrapped component with an optimizely prop, the withOptimizely higher order component also makes usage of the APIs more convenient.

The optimizely object is automatically associated with the user prop passed to the ancestor OptimizelyProvider. The result is that the id and attributes from that user object will automatically be forwarded to all appropriate SDK method calls. So, there is no need to pass the userId or attributes arguments when calling methods of the optimizely client object after using withOptimizely, unless you wish to use different userId or attributes than those given to OptimizelyProvider.

Parameters

This table lists the required and optional parameters for the React SDK.

Parameter

Type

Description

Component

React.Component

Component which will be enhanced with the following props

Props Provided

Prop

Type

Description

optimizely

ReactSDKClient

The client object which was passed to the OptimizelyProvider

optimizelyReadyTimeout

number | undefined

The timeout which was passed to the OptimizelyProvider

isServerSide

boolean

Value that was passed to the OptimizelyProvider

Returns

A wrapped component with additional props as described above

Example

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

class MyComp extends React.Component {
  constructor(props) {
    super(props)
    const { optimizely } = this.props
    const isFeat1Enabled = optimizely.isFeatureEnabled('feat1')
    const feat1Variables = optimizely.getFeatureVariables('feat1')

    this.state = {
      isFeat1Enabled,
      feat1Variables,
    }
  }

  render() {
  }
}

const WrappedMyComponent = withOptimizely(MyComp)

Tracking (using withOptimizely)

The table lists other other Optimizely functionality that may be triggered by using this method.

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

class SignupButton extends React.Component {
  onClick = () => {
    const { optimizely } = this.props
    optimizely.onReady().then(() => {
      optimizely.track('signup-clicked')
    })
    // rest of click handler
  }

  render() {
    <button onClick={this.onClick}>
      Signup
    </button>
  }
}

const WrappedSignupButton = withOptimizely(SignupButton)

🚧

Note

As mentioned above, the optimizely client object provided via withOptimizely is automatically associated with the user prop passed to the ancestor OptimizelyProvider. There is no need to pass userId or attributes arguments when calling track, unless you wish to use different userId or attributes than those given to OptimizelyProvider.

Source

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


Did this page help you?