feat(js): add react helper export

[nicklasl]

React Flag Bundle Support

Adds lightweight React integration for consuming pre-resolved flags without bundling the 110KB WASM resolver.

New export: @spotify-confidence/openfeature-server-provider-local/react (1.1KB)

How it works:

1. Server calls provider.createFlagBundle(context) → returns {bundle, applyFlag}
2. Pass to <ConfidenceProvider bundle={bundle} apply={applyFlag}>
3. Client uses useFlag('flag', default) - auto-logs exposure on mount
4. Optional: useFlag('flag', default, {skipExposure: true}) returns {value, expose} for manual control

Usage

Server Component (Next.js App Router)

import { createConfidenceServerProvider } from '@spotify-confidence/openfeature-server-provider-local';
import { ConfidenceProvider } from '@spotify-confidence/openfeature-server-provider-local/react';

const provider = createConfidenceServerProvider({ flagClientSecret: '...' });

export default async function Layout({ children }) {
  const { bundle, applyFlag } = await provider.createFlagBundle({
    targetingKey: 'user-123'
  });

  async function apply(flagName: string) {
    'use server';
    applyFlag(flagName);
  }

  return (
    <ConfidenceProvider bundle={bundle} apply={apply}>
      {children}
    </ConfidenceProvider>
  );
}

Client Component - Auto Exposure

'use client';
import { useFlag } from '@spotify-confidence/openfeature-server-provider-local/react';

export function FeatureButton() {
  // Automatically logs exposure on mount
  const enabled = useFlag('my-feature.enabled', false);

  return enabled ? <NewButton /> : <OldButton />;
}

Client Component - Manual Exposure

'use client';
import { useFlag } from '@spotify-confidence/openfeature-server-provider-local/react';

export function Checkout() {
  // Skip auto-exposure, get expose() function instead
  const { value: discountEnabled, expose } = useFlag(
    'checkout.discount',
    false,
    { skipExposure: true }
  );

  const handlePurchase = () => {
    if (discountEnabled) {
      expose(); // Log exposure only when user interacts
      applyDiscount();
    }
    completePurchase();
  };

  return <button onClick={handlePurchase}>Buy Now</button>;
}