Skip to main content

React

React Provider (Beta)

This is a beta version. Breaking changes may be introduced before general release.

This is the official React OpenFeature provider for Bucketeer.

Installation​

npm install @bucketeer/openfeature-js-client-sdk @openfeature/react-sdk
note

npm versions 7 and above will automatically install the required peer dependencies: @openfeature/web-sdk and @bucketeer/js-client-sdk. If you got an error about missing peer dependencies, please install them manually:

npm install @openfeature/core @openfeature/web-sdk @bucketeer/js-client-sdk

Usage​

Please use the OpenFeature React SDK to use feature flags in your React application.

Configuration & Initialization​

Use defineBKTConfig to create your configuration and set up the OpenFeatureProvider.

import { OpenFeatureProvider, OpenFeature } from '@openfeature/react-sdk';
import { defineBKTConfig, BucketeerReactProvider } from '@bucketeer/openfeature-js-client-sdk';

const config = defineBKTConfig({
  apiEndpoint: 'BUCKETEER_API_ENDPOINT',
  apiKey: 'BUCKETEER_API_KEY',
  featureTag: 'FEATURE_TAG',
  appVersion: '1.2.3',
  fetch: window.fetch,
})

const initEvaluationContext = {
  targetingKey: 'USER_ID',
  app_version: '1.2.3',
}
await OpenFeature.setContext(initEvaluationContext)
const provider = new BucketeerReactProvider(config)
OpenFeature.setProvider(provider)

// Note: There is no need to await setProvider in React,
// because provider initialization is handled internally by the OpenFeature React SDK.

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

See our documentation for more SDK configuration.

Evaluate a feature flag​

The OpenFeature React SDK provides hooks for evaluating feature flags.

import { useBooleanFlagValue, useStringFlagValue, useNumberFlagValue, useObjectFlagValue } from '@openfeature/react-sdk';

// boolean flag
const flagValueBool = useBooleanFlagValue('my-feature-flag', false);

// string flag
const flagValueStr = useStringFlagValue('my-feature-flag', 'default-value');

// number flag
const flagValueNum = useNumberFlagValue('my-number-flag', 0);

// object flag
const flagValueObj = useObjectFlagValue('my-object-flag', {});

More details can be found in the OpenFeature React SDK documentation.

Update the Evaluation Context​

The evaluation context allows the client to specify contextual data that Bucketeer uses to evaluate feature flags. The targetingKey is the user ID (Unique ID) and cannot be empty.

You can update the evaluation context with the new attributes if the user attributes change.

import { OpenFeature } from '@openfeature/react-sdk';

const newEvaluationContext = {
  targetingKey: 'USER_ID',
  app_version: '2.0.0',
  age: 25,
  country: 'US',
}
await OpenFeature.setContext(newEvaluationContext)
warning

Changing the targetingKey is not supported in the current implementation of the BucketeerProvider. To change the user ID, the Provider must be removed and reinitialized exactly as demonstrated in the JavaScript / Web section.