OpenFeature JavaScript SDKs

The OpenFeatureProvider is a React context provider that represents a scope for feature flag evaluations. It binds an OpenFeature client to all evaluations within child components and enables the use of evaluation hooks.

Note: OpenFeature.setProvider() should only be called once. You do not need to await its initialization; the React SDK handles re-rendering and suspense automatically.

import {
  EvaluationContext,
  OpenFeatureProvider,
  useFlag,
  OpenFeature,
  TypedInMemoryProvider,
} from '@openfeature/react-sdk';

const flagConfig = {
  'new-message': {
    disabled: false,
    variants: {
      on: true,
      off: false,
    },
    defaultVariant: 'on',
    contextEvaluator: (context: EvaluationContext) => {
      if (context.silly) {
        return 'on';
      }
      return 'off';
    },
  },
} as const;

// Instantiate and set our provider (be sure this only happens once)!
OpenFeature.setProvider(new TypedInMemoryProvider(flagConfig));

// Enclose your content in the configured provider
function App() {
  return (
    <OpenFeatureProvider>
      <Page></Page>
    </OpenFeatureProvider>
  );
}

Targeting allows flag evaluation to consider dynamic criteria like user ID, location, or IP address. You provide this data using an evaluation context. The SDK merges context from three levels:

1. Global Context: Set via OpenFeature.setContext().
2. Client Context: Set via client.setContext().
3. Invocation Context: Passed directly to the flag evaluation method (e.g., getBooleanValue).

Context is merged by the SDK before evaluation occurs according to the OpenFeature specification.

// Global context
OpenFeature.setContext({ region: 'us-east-1' });

// Client context
const client = OpenFeature.getClient();
client.setContext({ version: process.env.APP_VERSION });

// Invocation context
const requestContext = {
  targetingKey: req.session.id,
  email: req.session.email,
  product: req.productId,
};

const boolValue = await client.getBooleanValue('some-flag', false, requestContext);

A domain is a logical identifier used to bind specific clients to specific providers. If a client requests a domain that has no associated provider, it will fall back to the default provider.

• Registering a provider to a domain: OpenFeature.setProvider('my-domain', provider)
• Getting a domain-scoped client: OpenFeature.getClient('my-domain')
• Clearing context: Use OpenFeature.clearContext('my-domain') to clear a specific domain's context, or OpenFeature.clearContexts() to reset everything.

import { OpenFeature, TypedInMemoryProvider } from '@openfeature/web-sdk';

const myFlags = { /* ... flag definitions ... */ } as const;

// Registering the default provider
OpenFeature.setProvider(new TypedInMemoryProvider(myFlags));

// Registering a provider to a specific domain
OpenFeature.setProvider('my-domain', new TypedInMemoryProvider(someOtherFlags));

// A Client bound to the default provider
const clientWithDefault = OpenFeature.getClient();

// A Client bound to the 'my-domain' provider
const domainScopedClient = OpenFeature.getClient('my-domain');

The MultiProvider allows you to manage multiple underlying providers as a single source of truth. This is useful for migrations (falling back from a new provider to an old one) or combining different data sources (e.g., environment variables + SaaS).

By default, it uses the FirstMatchStrategy, which returns the first successful result and skips providers that return a FLAG_NOT_FOUND error.

Evaluation Strategies

• FirstMatchStrategy (default): Returns the first successful result. Skips providers returning FLAG_NOT_FOUND.
• FirstSuccessfulStrategy: Returns the first successful result. Any error (not just FLAG_NOT_FOUND) causes the provider to be skipped.
• ComparisonStrategy: Evaluates all providers. If all successful providers return the same value, that value is returned. Otherwise, it returns the value from a configured "fallback provider".

import { MultiProvider, FirstSuccessfulStrategy } from '@openfeature/web-sdk';

// Example: Using FirstSuccessfulStrategy
const multiProvider = new MultiProvider(
  [{ provider: new ProviderA() }, { provider: new ProviderB() }],
  new FirstSuccessfulStrategy(),
);

await OpenFeature.setProviderAndWait(multiProvider);

const client = OpenFeature.getClient();
console.log(client.getBooleanDetails('my-flag', false));

The MultiProvider supports tracking events across multiple providers. When you call client.track(...), the event is sent to all underlying providers that implement the track method.

Default Behavior:

• All providers receive tracking calls.
• If one provider fails to track, others continue and errors are logged.
• Providers in NOT_READY or FATAL status are automatically skipped.
• Providers without a track method are gracefully skipped.

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

const multiProvider = new MultiProvider([{ provider: new ProviderA() }, { provider: new ProviderB() }]);
await OpenFeature.setProviderAndWait(multiProvider);

const client = OpenFeature.getClient();

// Tracked events are sent to all providers by default
client.track('purchase', { targetingKey: 'user123' }, { value: 99.99, currency: 'USD' });