Skip to main content

OpenFeature React Provider

OpenFeature is an open standard that provides a vendor-agnostic, community-driven API for feature flagging that works with DevCycle.

DevCycle provides a Javascript implementation of the OpenFeature Web Provider interface, if you prefer to use the OpenFeature APIs to interface with DevCycle.

Note: The OpenFeature React SDK is still in beta, and is subject to change.

Npm package version GitHub

Usage​

Installation​

Install the OpenFeature React SDK and DevCycle Web Provider:

NPM​

npm install @openfeature/react-sdk @devcycle/openfeature-web-provider

Yarn​

If using yarn you will need to install further peer-dependencies:

yarn add @openfeature/react-sdk @openfeature/web-sdk @openfeature/core @devcycle/openfeature-web-provider

Getting Started​

Initialize the DevCycleProvider and set it as the provider for OpenFeature, which will initialize the DevCycle JS Client SDK internally:

import { OpenFeatureProvider, useBooleanFlagValue, OpenFeature } from '@openfeature/react-sdk'
import DevCycleProvider from '@devcycle/openfeature-web-provider'

await OpenFeature.setContext({ user_id: 'user_id' })
await OpenFeature.setProviderAndWait(new DevCycleProvider('<DEVCYCLE_CLIENT_SDK_KEY>'))

function App() {
  return (
    <OpenFeatureProvider>
      <Page></Page>
    </OpenFeatureProvider>
  )
}

Evaluating a Variable​

Use a Variable value by passing the Variable key and default value to one of the OpenFeature flag evaluation hooks

function Page() {
  const newMessage = useBooleanFlagValue('new-message', false)
  return (
    <div className="App">
      <header className="App-header">
        {newMessage ? <p>Welcome to this OpenFeature-enabled React app!</p> : <p>Welcome to this React app.</p>}
      </header>
    </div>
  )
}

export default App

Passing DevCycleOptions to the DevCycleProvider​

Ensure that you pass any custom DevCycleOptions to the DevCycleProvider constructor

const user = { user_id: 'user_id' }

const options = { logger: dvcDefaultLogger({ level: 'debug' }) }
const devcycleProvider = new DevCycleProvider('<DEVCYCLE_CLIENT_SDK_KEY>', options)
await OpenFeature.setProviderAndWait(devcycleProvider)

Required TargetingKey​

For DevCycle SDK to work we require either a targetingKey or user_id to be set on the OpenFeature context. This is used to identify the user as the user_id for a DevCycleUser in DevCycle.

Context properties to DevCycleUser​

The provider will automatically translate known DevCycleUser properties from the OpenFeature context to the DevCycleUser object. DevCycleUser TypeScript Interface

For example all these properties will be set on the DevCycleUser:

openFeatureClient.setContext({
  user_id: 'user_id',
  email: '[email protected]',
  name: 'name',
  language: 'en',
  country: 'CA',
  appVersion: '1.0.11',
  appBuild: 1000,
  customData: { custom: 'data' },
  privateCustomData: { private: 'data' },
})

Context properties that are not known DevCycleUser properties will be automatically added to the customData property of the DevCycleUser.

Context Limitations​

DevCycle only supports flat JSON Object properties used in the Context. Non-flat properties will be ignored.

For example obj will be ignored:

openFeatureClient.setContext({
  user_id: 'user_id',
  obj: { key: 'value' },
})

JSON Flag Limitations​

The OpenFeature spec for JSON flags allows for any type of valid JSON value to be set as the flag value.

For example the following are all valid default value types to use with OpenFeature:

// Invalid JSON values for the DevCycle SDK, will return defaults
openFeatureClient.getObjectValue('json-flag', ['arry'])
openFeatureClient.getObjectValue('json-flag', 610)
openFeatureClient.getObjectValue('json-flag', false)
openFeatureClient.getObjectValue('json-flag', 'string')
openFeatureClient.getObjectValue('json-flag', null)

However, these are not valid types for the DevCycle SDK, the DevCycle SDK only supports JSON Objects:

// Valid JSON Object as the default value, will be evaluated by the DevCycle SDK
openFeatureClient.getObjectValue('json-flag', { default: 'value' })