@worktango/feature-flags-react

A React-specific feature flag management package for WorkTango applications, built on top of DevCycle and OpenFeature.

Installation

npm install @worktango/feature-flags-react

Usage

import {
  initializeFeatureFlagProvider,
  useBooleanFlagValue,
  useStringFlagValue,
  OpenFeatureProvider,
} from '@worktango/feature-flags-react';

// Initialize with your DevCycle SDK key
await initializeFeatureFlagProvider({
  sdkKey: 'your-devcycle-sdk-key',
  shouldEnableDebugger: true, // Optional: Enable web debugger
  options: {
    disableAutomaticEventLogging: true,
  },
  strictMode: true, // Optional: Enable strict mode to throw on errors that make DevCycle not work
});

// Wrap your app with OpenFeatureProvider
function App() {
  return (
    <OpenFeatureProvider>
      <MyComponent />
    </OpenFeatureProvider>
  );
}

function MyComponent() {
  // Using boolean feature flag
  const isEnabled = useBooleanFlagValue('my-feature', false);

  // Using string feature flag
  const featureValue = useStringFlagValue('my-string-feature', 'default');

  return (
    <div>
      {isEnabled && <div>Feature is enabled!</div>}
      <div>Feature value: {featureValue}</div>
    </div>
  );
}

Setting User Context

import { setFeatureFlagUser } from '@worktango/feature-flags-react';

// Set user context for feature flag evaluation
// Note: Custom data should be placed under privateCustomData
const userContext = {
  user_id: 'user123',
  email: '[email protected]',
  privateCustomData: {
    companyId: 123,
    isAdmin: true,
  },
};

await setFeatureFlagUser(userContext);

Web Debugger

The package includes support for DevCycle's Web Debugger, which is a powerful utility for debugging and modifying your DevCycle experience directly from your website. The debugger allows you to:

• View current state of Variables
• Use Self-Targeting to override Variables
• See a real-time stream of Events from the SDK
• Modify User Identity and custom properties
• View Live Configuration of Features and Variations

To enable the Web Debugger in your React application, simply set shouldEnableDebugger to true when initializing:

await initializeFeatureFlagProvider({
  sdkKey: 'your-devcycle-sdk-key',
  shouldEnableDebugger: true, // Enable the web debugger
});

Once enabled, a debugger button will appear in the bottom right corner of your screen. Click it to open the debugger interface where you can log in with your DevCycle dashboard credentials to access all debugging features.

For more information about the Web Debugger, visit the DevCycle Web Debugger documentation.

API Reference

Types

• FeatureFlagConfig: Interface for feature flag configuration

  interface FeatureFlagConfig {
    sdkKey: string;
    user?: FeatureFlagUser;
    shouldEnableDebugger?: boolean;
    options?: DevCycleOptions;
    strictMode?: boolean; // Optional: When enabled (default: false), will throw an error if the Feature Flag Provider/Client is not properly configured.
    // When disabled, will only log a warning if the Provider/Client is not correctly configured.
  }

Functions

• initializeFeatureFlagProvider(config: FeatureFlagConfig): Initialize the feature flag provider with DevCycle
• setFeatureFlagUser(user: FeatureFlagUser): Set user context for feature flag evaluation
• useBooleanFlagValue(flag: string, defaultValue: boolean, options?: ReactFlagEvaluationOptions): React hook for boolean feature flags
• useStringFlagValue(flag: string, defaultValue: string, options?: ReactFlagEvaluationOptions): React hook for string feature flags
• getBooleanFlagValue(flag: string, defaultValue: boolean): Non-hook function for boolean feature flags
• getStringFlagValue(flag: string, defaultValue: string): Non-hook function for string feature flags
• getFeatureFlagClient(): Get the OpenFeature client instance

Components

• OpenFeatureProvider: Provider component for OpenFeature