Example usage of the React SDK v4+
2 min
Prerequisites
Before using the client to evaluate flag rules, including A/B tests and flag deliveries, you must complete the following:
Example React SDK implementation
This example walks through the following three key steps:
- Evaluate a flag with the key product_sort using the decide hooks. This also sends a decision event to Optimizely to record that the user was exposed to the experiment.
- Run code based on the flag result. The SDK evaluates your flag rules and determines which variation the user is in. You can either:
- Check the flag's enabled state and read a configuration variable (sort_method) to determine which experience the user gets.
- Check the flag variation directly and run the corresponding control or treatment code.
- Track a conversion event called purchased to measure the experiment's impact. The track event method ties the purchase back to the A/B test and sends it to Optimizely through the event dispatcher so it shows up on your results page.
import React from 'react';
import {
createInstance,
createPollingProjectConfigManager,
createBatchEventProcessor,
OptimizelyProvider,
useDecide,
useOptimizelyUserContext,
} from '@optimizely/react-sdk';
const optimizely = createInstance({
projectConfigManager: createPollingProjectConfigManager({
sdkKey: 'YOUR_SDK_KEY', // TODO: Update to your SDK Key
}),
eventProcessor: createBatchEventProcessor(),
});
function PurchaseButton() {
const { userContext } = useOptimizelyUserContext();
const handleClick = () => {
userContext?.trackEvent('purchased');
};
return <button onClick={handleClick}>Purchase</button>;
}
function ProductSort() {
const { decision, isLoading, error } = useDecide('product_sort');
if (isLoading) return <div>Loading...</div>;
if (error) return <div className="error">{error.message}</div>;
const variationKey = decision.variationKey;
const isEnabled = decision.enabled;
const sortMethod = decision.variables['sort_method'];
return (
<div>
{/* If variation is null, display error */}
{variationKey === null && <div className="error">{decision.reasons}</div>}
{/* If feature is enabled, do something with the Sort Method variable */}
{isEnabled && <div>The Sort method is {sortMethod}</div>}
{/* Show relevant component based on the variation key */}
{variationKey === 'control' && <div>Control Component</div>}
{variationKey === 'treatment' && <div>Treatment Component</div>}
{/* Show Purchase Button to track Purchase event */}
<PurchaseButton />
</div>
);
}
function App() {
return (
<OptimizelyProvider client={optimizely} user={{ id: 'user123' }}>
<ProductSort />
</OptimizelyProvider>
);
}
export default App;