ReactSDKClient

To provide idiomatic React access to Optimizely, the React SDK uses components such as OptimizelyFeature. These components are similar to the standard methods, such as Get Feature Enabled, used in most other SDKs.

ReactSDKClient is a wrapper that lets you access the standard SDK methods if you do not want to use components to interact with Optimizely. Unlike other SDKs, you don't need to pass user information to the methods every time you call them, as long as you pass user information at instantiation. The following section describes the methods that ReactSDKClient provides.

Version

SDK v1.0.0

Description

An instance of the ReactSDKClient is created with createInstance and it is also passed down to child components in the optimizely prop with the withOptimizely higher-order component.

The ReactSDKClient provides the following methods. Note that if the instance was provided by withOptimizely or if setUser was called, then you do not need to pass in userId or attributes arguments when calling methods of the optimizely client object unless you wish to use different userId or attributes than those given to OptimizelyProvider or setUser.

APIs Provided

• onReady(opts?: { timeout?: number }): Promise Returns a Promise that fulfills with an object representing the datafile fetch process. See JavaScript: onReady
• user: User The current user associated with this client instance
• setUser(userInfo: User): void Call this to update the current user
• onUserUpdate(handler: (userInfo: User) => void): () => void Subscribe a callback to be called when this instance's current user changes. Returns a function that will unsubscribe the callback.
• activate(experimentKey: string, overrideUserId?: string, overrideAttributes?: UserAttributes): string | null Activate an experiment, and return the variation for the given user.
• getVariation(experimentKey: string, overrideUserId?: string, overrideAttributes?: UserAttributes): string | null Return the variation for the given experiment and user.
• getFeatureVariables(featureKey: string, overrideUserId?: string, overrideAttributes?: UserAttributes): VariableValuesObject: Decide and return variable values for the given feature and user
• getFeatureVariableString(featureKey: string, variableKey: string, overrideUserId?: string, overrideAttributes?: optimizely.UserAttributes): string | null: Decide and return the variable value for the given feature, variable, and user
• getFeatureVariableInteger(featureKey: string, variableKey: string, overrideUserId?: string, overrideAttributes?: UserAttributes): number | null Decide and return the variable value for the given feature, variable, and user
• getFeatureVariableBoolean(featureKey: string, variableKey: string, overrideUserId?: string, overrideAttributes?: UserAttributes): boolean | null Decide and return the variable value for the given feature, variable, and user
• getFeatureVariableDouble(featureKey: string, variableKey: string, overrideUserId?: string, overrideAttributes?: UserAttributes): number | null Decide and return the variable value for the given feature, variable, and user
• isFeatureEnabled(featureKey: string, overrideUserId?: string, overrideAttributes?: UserAttributes): boolean Return the enabled status for the given feature and user
• getEnabledFeatures(overrideUserId?: string, overrideAttributes?: UserAttributes): Array<string>: Return the keys of all features enabled for the given user
• track(eventKey: string, overrideUserId?: string | EventTags, overrideAttributes?: UserAttributes, eventTags?: EventTags): void Track an event to the Optimizely results backend
• setForcedVariation(experiment: string, overrideUserIdOrVariationKey: string, variationKey?: string | null): boolean Set a forced variation for the given experiment, variation, and user
• getForcedVariation(experiment: string, overrideUserId?: string): string | null Get the forced varation for the given experiment, variation, and user

Example

Example of getting an instance of ReactSDKClient with withOptimizely to use the track API:

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

class SignupButton extends React.Component {
  onClick = () => {
    // optimizely is an instance of ReactSDKClient provided by withOptimizely
    const { optimizely } = this.props
    
    // track API provided by the ReactSDKClient instance
    // Notice, no userId or attributes are necessary since 
    // optimizely has been provided by withOptimizely
    optimizely.track('signup-clicked')
    
    // rest of click handler
  }

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

const WrappedSignupButton = withOptimizely(SignupButton)

Example of getting an instance of ReactSDKClient from createInstance:

import React from 'react';
import {
  createInstance,
  OptimizelyProvider,
} from '@optimizely/react-sdk'

const optimizely = createInstance({
  sdkKey: 'CxpSJttFVpz8LiLg8jnZwq',
})

optimizely.setUser({
  id: 'user123',
  attributes: {
    device: 'iPhone',
    lifetime: 24738388,
    is_logged_in: true,
  }
});

optimizely.track('Application Loaded')

function App() {
  return (
    <OptimizelyProvider optimizely={optimizely}>
      <div className="App">Application</div>
    </OptimizelyProvider>
  );
}

export default App;

Typescript Types

The following type definitions are used in the ReactSDKClient interface:

• UserAttributes : { [name: string]: any }
• User : { id: string | null, attributes: userAttributes }
• VariableValuesObject : { [key: string]: boolean | number | string | null }
• EventTags : { [key: string]: string | number | boolean; }

Source

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