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' })