OptimizelyProvider for the React SDK

4 min

Wrap your React application at the root with OptimizelyProvider to give your entire React application access to Optimizely Feature Experimentation's APIs.

Version

SDK v1.0.0

Description

The OptimizelyProvider leverages React’s Context API to allow access to the ReactSDKClient to useDecision hook.

Props

The following table lists the required and optional props for the OptimizelyProvider Component in React.

Parameter	Type	Description
optimizely	ReactSDKClient	Optimizely instance created from calling `createInstance`
user	object: `{\ id: string;\ attributes?: { OptimizelyPro\: string \| number \| boolean \| null\ }\ }` \| Promise``	The user id and user attributes to be passed to the SDK for every feature flag, A/B test, or track call, or a Promise for the same kind of object.
timeout\ optional	number	The amount of time for `useDecision` hook to return `null` flag Decision while waiting for the SDK instance to become ready before resolving.
isServerSide\ optional	boolean	must pass true here for server-side rendering

Examples

If the root component of your application was <App>, wrap your App with the OptimizelyProvider component. Pass the result of calling createInstance to the optimizely prop and set the user object with id and attributes identifying the user:

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

const optimizely = createInstance({
  sdkKey: '<Your_SDK_Key>',
})

class AppWrapper extends React.Component {
  render() {
    return (
      <OptimizelyProvider
        optimizely={optimizely}
        user={
          {
            id: 'user123',
            attributes: {
              'device': 'iPhone',
              'lifetime': 24738388,
              'is_logged_in': true,
            }
          }
        }>
        <App />
      </OptimizelyProvider>
    )
  }
}

Source files

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