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

Version

SDK v2.2.0

Description

ThewithOptimizely component provides access to all standard SDK methods, such as the Decide method, if you do not want to use React components or hooks (such as useDecision) to interact with Optimizely. By providing the wrapped component with anoptimizely prop, the withOptimizely higher-order component also makes using these standard SDK methods more convenient.

Theoptimizely 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 theoptimizely client object after usingwithOptimizely, unless you wish to use a different userId or attributes than those given to OptimizelyProvider.

Parameters

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

Props Provided

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 decision = optimizely.decide('feat1')    this.state = {      decision.enabled,      decision.variables,    }  }  render() {  }}const WrappedMyComponent = withOptimizely(MyComp)

Tracking (using withOptimizely)

import { Button } from 'react-native';import { withOptimizely } from '@optimizely/react-sdk';class SignupButton extends React.Component {  onPress = () => {    const { optimizely } = this.props    optimizely.onReady().then(() => {      optimizely.track('signup-clicked')    })    // rest of click handler  }  render() {    <Button onPress={this.onPress}>      Signup    </Button>  }}const WrappedSignupButton = withOptimizely(SignupButton)

🚧

Important

As mentioned above, theoptimizely 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 isindex.ts.

Updated 17 days ago