Mixpanel JavaScript Browser Client Library

Context Mapping

All properties in the OpenFeature EvaluationContext are passed directly to Mixpanel. There is no transformation or filtering.

Note on targetingKey: Unlike other providers, targetingKey is not a special bucketing key in this provider. It is treated as a standard context property. Mixpanel's server-side configuration determines which properties are used for targeting and bucketing.

User Identity

This provider does not call mixpanel.identify(). You must manage user identity separately using the standard Mixpanel API. The provider will automatically use the current Mixpanel distinct_id for flag evaluations.

// Manage identity through Mixpanel directly
mixpanel.identify('user-123');

// The provider will use Mixpanel's current distinct_id automatically
const client = OpenFeature.getClient();
const value = client.getBooleanValue('my-flag', false);

You can use the @openfeature/react-sdk to consume flags reactively in React components.

1. Initialize Mixpanel and the MixpanelProvider outside of your component tree.
2. Wrap your application in the OpenFeatureProvider.
3. Use hooks like useBooleanFlagValue within your components.

import { OpenFeatureProvider, useBooleanFlagValue } from '@openfeature/react-sdk';
import { OpenFeature } from '@openfeature/web-sdk';
import mixpanel from 'mixpanel-browser';
import { MixpanelProvider } from '@mixpanel/openfeature-web-provider';

// Initialize outside of component
mixpanel.init('YOUR_PROJECT_TOKEN', {
  flags: {
    context: { plan: 'premium' }
  }
});
const provider = new MixpanelProvider(mixpanel.flags);
OpenFeature.setProvider(provider);

function App() {
  return (
    <OpenFeatureProvider>
      <MyComponent />
    </OpenFeatureProvider>
  );
}

function MyComponent() {
  // Use the hook to get flag values reactively
  const showBanner = useBooleanFlagValue('show-banner', false);

  return (
    <div>
      {showBanner && <Banner message="Welcome to our new feature!" />}
    </div>
  );
}

Follow these steps to initialize Mixpanel and register the MixpanelProvider with the OpenFeature SDK:

1. Initialize Mixpanel: Pass the flags configuration object (including initial context) to mixpanel.init.
2. Register Provider: Instantiate MixpanelProvider using mixpanel.flags and use OpenFeature.setProviderAndWait(provider) to ensure the provider is ready before evaluation.
3. Evaluate Flags: Use OpenFeature.getClient() to get a client and call evaluation methods like getBooleanValue.

import mixpanel from 'mixpanel-browser';
import { OpenFeature } from '@openfeature/web-sdk';
import { MixpanelProvider } from '@mixpanel/openfeature-web-provider';

// 1. Initialize Mixpanel with feature flags and context
mixpanel.init('YOUR_PROJECT_TOKEN', {
  flags: {
    context: {
      plan: 'premium'
    }
  }
});

// 2. Create and register the Mixpanel provider
const provider = new MixpanelProvider(mixpanel.flags);
await OpenFeature.setProviderAndWait(provider);

// 3. Get a client and evaluate flags
const client = OpenFeature.getClient();
const showNewFeature = client.getBooleanValue('new-feature-flag', false);

if (showNewFeature) {
  console.log('New feature is enabled!');
}

The MixpanelProvider allows you to use the standardized OpenFeature API to manage feature flags using Mixpanel as the backend. You can either wrap an existing Mixpanel instance or use the MixpanelProvider.create() static method to initialize a new one.

To use it, register the provider with the OpenFeature SDK and then use the OpenFeature client to evaluate flags.

import mixpanel from 'mixpanel-browser';
import { OpenFeature } from '@openfeature/web-sdk';
import { MixpanelProvider } from '@mixpanel/openfeature-web-provider';

// Option 1: Initialize Mixpanel manually and wrap its flags
mixpanel.init('TOKEN', {
  flags: {
    context: { plan: 'premium' }
  }
});
await OpenFeature.setProviderAndWait(new MixpanelProvider(mixpanel.flags));

// Option 2: Use the static create method to initialize everything at once
// const provider = MixpanelProvider.create('TOKEN', { /* config */ });
// await OpenFeature.setProviderAndWait(provider);

// Use flags via the OpenFeature client
const client = OpenFeature.getClient();
const showNewUI = client.getBooleanValue('new-ui', false);