Disclaimer: This website requires JavaScript to function properly. Some features may not work as expected. Please enable JavaScript in your browser settings for the best experience.

Optimizely will be sunsetting Full Stack Experimentation on July 29, 2024. See the recommended Feature Experimentation migration timeline and documentation.

Dev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideLegal TermsGitHubDev CommunityOptimizely AcademySubmit a ticketLog In
Dev Guide

OptimizelyProvider

This topci describes how to wrap your React application at the root with OptimizelyProvider to give your entire React application access to Optimizely's APIs.

Version

SDK v2.2.0

Description

The OptimizelyProvider leverages React’s Context API to allow access to the ReactSDKClient to components like OptimizelyFeature and OptimizelyExperiment.

Props

The table below lists the required and optional props for the OptimizelyFeature Component in React.

ParameterTypeDescription
optimizelyReactSDKClientOptimizely instance created from calling createInstance
userobject: { id: string; attributes?: { [key: string]: any } } | Promise User infoThe 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
numberThe amount of time for OptimizelyExperiment and OptimizelyFeature components to render null while waiting for the SDK instance to become ready, before resolving.
isServerSide
optional
booleanmust pass true here for server side rendering

Examples

If the root component of your application was , 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.