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.

Npm package version GitHub

AI-Powered Install​

MCP Install

Follow the MCP Getting Started guide to quickly set up the DevCycle MCP server and connect your AI tool.

  • Run this prompt: "Install DevCycle into this app"

📦 Install in Cursor

📦 Install in VS Code

claude mcp add --transport http devcycle https://mcp.devcycle.com/mcp
AI Prompt

Usage​

Installation​

Install the OpenFeature React SDK and DevCycle Web Provider:

NPM​

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

Yarn​

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

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

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 DevCycleReactProvider from '@devcycle/openfeature-react-provider'

await OpenFeature.setContext({ user_id: 'user_id' })
await OpenFeature.setProviderAndWait(
  new DevCycleReactProvider('<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 DevCycleReactProvider(
  '<DEVCYCLE_CLIENT_SDK_KEY>',
  options,
)
await OpenFeature.setProviderAndWait(devcycleProvider)

TargetingKey or user_id​

DevCycle recommends setting a targetingKey or user_id on the OpenFeature context to identify the user. If neither is set, the provider initializes an anonymous user and evaluates flags for that anonymous user.

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@devcycle.com',
  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' })