OptimizelyProvider for the React Native SDK
Describes how to wrap your React Native application at the root with OptimizelyProvider to give your entire React application access to Optimizely Feature Experimentation's APIs.
Wrap your React Native application at the root with OptimizelyProvider to give your entire React application access to Optimizely Feature Experimentation's APIs.
Version
SDK v2.2.0
Description
The OptimizelyProvider leverages React’s Context API to allow access to the ReactSDKClient to useDecision hook.
Props
The table below lists the required and optional props for the OptimizelyProvider Component in React.
Parameter | Type | Description |
|---|---|---|
optimizely | ReactSDKClient | Optimizely instance created from calling |
user | object: | 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 | number | The amount of time for |
isServerSide | 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 callingcreateInstance to theoptimizely prop and set theuser object withid andattributes 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 isindex.ts.
Updated 17 days ago