ReactSDKClient for the React SDK

To provide idiomatic React access to Optimizely Feature Experimentation, the React SDK uses hooks, such as useDecision hook, and components, such as OptimizelyProvider. These components and hooks are similar to the standard methods, such as the Decide method, 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 or hooks to interact with Optimizely Feature Experimentation. 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.
• decide(key: string, options?: optimizely.OptimizelyDecideOption[], overrideUserId?: string, overrideAttributes?: optimizely.UserAttributes): OptimizelyDecision – Returns a decision result for a flag key for a user. The decision result is returned in an OptimizelyDecision object, and contains all data required to deliver the flag rule.
• decideAll(options?: optimizely.OptimizelyDecideOption[], overrideUserId?: string, overrideAttributes?: optimizely.UserAttributes): { [key: string]: OptimizelyDecision } – Returns decisions for all active (unarchived) flags for a user.
• decideForKeys(keys: string[], options?: optimizely.OptimizelyDecideOption[], overrideUserId?: string, overrideAttributes?: optimizely.UserAttributes): { [key: string]: OptimizelyDecision } – Returns an object of decision results mapped by flag keys.
• 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 flag 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 flag 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 Feature Experimentation 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
• setForcedDecision(decisionContext: optimizely.OptimizelyDecisionContext, decision: optimizely.OptimizelyForcedDecision): void – Sets the forced decision for specified Optimizely Feature Experimentation decision context
• getForcedDecision(decisionContext: optimizely.OptimizelyDecisionContext): optimizely.OptimizelyForcedDecision | null – Returns the forced decision for specified Optimizely Feature Experimentation decision context
• removeForcedDecision(decisionContext: optimizely.OptimizelyDecisionContext): boolean – Removes the forced decision for specified Optimizely Feature Experimentation decision context
• removeAllForcedDecisions(): boolean – Removes all the forced decisions

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: 'YOUR_SDK_KEY',
})

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 and platform source files containing the implementation for React is index.ts.