diff --git a/README.md b/README.md index e10224c5..57d6135e 100644 --- a/README.md +++ b/README.md @@ -288,6 +288,43 @@ const WrappedMyComponent = withOptimizely(MyComp); **_Note:_** The `optimizely` client object provided via `withOptimizely` is automatically associated with the `user` prop passed to the ancestor `OptimizelyProvider` - the `id` and `attributes` from that `user` object will be automatically forwarded to all appropriate SDK method calls. So, there is no need to pass the `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`. +## `useContext(OptimizelyContext)` + +Any component under the `` can access the Optimizely `ReactSDKClient` via the `OptimizelyContext` with `useContext`. + +_arguments_ + +_returns_ +- wrapping object: + - `optimizely : ReactSDKClient` The client object which was passed to the `OptimizelyProvider` + - `timeout : number | undefined` The timeout which was passed to the `OptimizelyProvider` + - `isServerSide : boolean` Value that was passed to the `OptimizelyProvider` + +### Example + +```jsx +import React, { useContext } from 'react'; +import { OptimizelyContext } from '@optimizely/react-sdk'; + +function MyComponent() { + const { optimizely } = useContext(OptimizelyContext); + const decision = optimizely.decide('feat1'); + const onClick = () => { + optimizely.track('signup-clicked'); + // rest of click handler + }; + return ( + + { decision.enabled &&

The feature is enabled

} + { !decision.enabled &&

The feature is not enabled

} + { decision.variationKey === 'variation1' &&

Variation 1

} + { decision.variationKey === 'variation2' &&

Variation 2

} + +
+ ); +} +``` + ### Tracking Use the `withOptimizely` HoC for tracking.