react-feature-flags-blog

feature_flag_example.jsx

<OptimizelyFeature feature="hello_world">
  {(isEnabled) => (
    isEnabled
    ? (<p> You got the <strong>hello_world</strong> feature! </p>)
    : (<p> You did not get the feature </p>)
  )}
</OptimizelyFeature>

full_sample.jsx

import React from 'react';
import { OptimizelyProvider, OptimizelyFeature } from '@optimizely/react-sdk'
import * as optimizelySDK from '@optimizely/js-web-sdk'

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

class App extends React.Component {
  render() {
    return (
      <OptimizelyProvider
          optimizely={optimizely}
          userId={'user123'}
          userAttributes={{
            'customerId': 123,
            'isVip': true,
          }}>
        <h1>Example Application</h1>
        <div>
          <OptimizelyFeature feature="hello_world">
            {(isEnabled) => (
              isEnabled
              ? (<p> You got the <strong>hello_world</strong> feature! </p>)
              : (<p> You did not get the feature </p>)
            )}
          </OptimizelyFeature>
        </div>
      </OptimizelyProvider>
    )
  }
}

export default App;

install_react_sdk.jsx

import React from 'react';
import { OptimizelyProvider } from '@optimizely/react-sdk'
import * as optimizelySDK from '@optimizely/js-web-sdk'

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

class App extends React.Component {
  render() {
    return (
      <OptimizelyProvider
          optimizely={optimizely}
          userId={'user123'}
          userAttributes={{
            'customerId': 123,
            'isVip': true,
          }}>
        <h1>Example Application</h1>
        <div>
          No features here yet...
        </div>
      </OptimizelyProvider>
    )
  }
}

export default App;