JavaScript (Web)

import { Confidence } from '@spotify-confidence/sdk';

// Initialize Confidence
const confidence = Confidence.create({
  clientSecret: 'your-client-secret',
});

// Set the evaluation context
confidence.setContext({
  targeting_key: 'user-123',
  country: 'US',
});

// Subscribe to flag updates and evaluate
await confidence.activate();

// Evaluate a flag
const value = confidence.getFlag('my-feature-flag', false);
console.log('Flag value:', value);

import { OpenFeature } from '@openfeature/web-sdk';
import { createConfidenceWebProvider } from '@spotify-confidence/openfeature-web-provider';

// Create and register the provider
const provider = createConfidenceWebProvider({
  clientSecret: 'your-client-secret',
});

await OpenFeature.setProviderAndWait(provider);
const client = OpenFeature.getClient();

// Evaluate a flag
const value = client.getBooleanValue('my-feature-flag', false);

import { Confidence } from '@spotify-confidence/sdk';
import { ConfidenceProvider, useFlag } from '@spotify-confidence/react';

// Initialize Confidence
const confidence = Confidence.create({
  clientSecret: 'your-client-secret',
});

// Set initial context
confidence.setContext({
  targeting_key: 'user-123',
  country: 'US',
});

// Wrap your app with the provider
function App() {
  return (
    <ConfidenceProvider confidence={confidence}>
      <MyComponent />
    </ConfidenceProvider>
  );
}

// Use flags in components
function MyComponent() {
  const showNewFeature = useFlag('my-feature-flag', false);

  return (
    <div>
      {showNewFeature ? <NewFeature /> : <OldFeature />}
    </div>
  );
}

import { OpenFeatureProvider, useFlag } from '@openfeature/react-sdk';
import { createConfidenceWebProvider } from '@spotify-confidence/openfeature-web-provider';

const provider = createConfidenceWebProvider({
  clientSecret: 'your-client-secret',
});

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

function MyComponent() {
  const { value: showNewFeature } = useFlag('my-feature-flag', false);

  return (
    <div>
      {showNewFeature ? <NewFeature /> : <OldFeature />}
    </div>
  );
}