@fabricorg/experiments-react

React bindings for Fabric Experiments. A minimal provider + hooks layer over @fabricorg/experiments-web: the provider owns one browser client, and useExperiment delivers a variant and records its exposure exactly once, on delivery — assignment, bucketing, sticky storage, and exposure deduplication all stay in the web SDK.

import { ExperimentsProvider, useExperiment } from '@fabricorg/experiments-react'

function App() {
  return (
    <ExperimentsProvider
      config={{
        manifestUrl: 'https://manifest.example.com/acme/manifest',
        subjectId: currentUser.id,
        onExposure: analytics.exposure,
      }}
    >
      <CheckoutCta />
    </ExperimentsProvider>
  )
}

function CheckoutCta() {
  const { variant, payload, loading, error } = useExperiment<{ label: string }>('checkout-cta')
  if (loading) return null
  if (error) throw error
  return <button>{payload?.label ?? 'Checkout'}</button>
}

useExperimentsClient() returns the underlying experiments-web ClientApi (or null until ready) for anything the hooks don't cover.

Next.js

The provider must render inside a client component (App Router):

// app/providers.tsx
'use client'

import { ExperimentsProvider } from '@fabricorg/experiments-react'

export function Providers({ subjectId, children }: { subjectId: string; children: React.ReactNode }) {
  return (
    <ExperimentsProvider
      config={{ manifestUrl: process.env.NEXT_PUBLIC_FX_MANIFEST_URL!, subjectId }}
    >
      {children}
    </ExperimentsProvider>
  )
}

The package is SSR-safe: nothing touches window, document, or fetch during render — server-rendered markup always sees { client: null, loading: true, error: null }, and the client initializes in an effect after hydration. Server-side assignment (middleware, route handlers, RSC data loading) should use @fabricorg/experiments-node directly — see its @fabricorg/experiments-node/next adapter.

config is captured once on mount. Remount the provider (e.g. via key) to re-initialize with a different subjectId or manifestUrl.

Documentation: https://experiments.fabric.pro/docs/reference/sdk-web/

MIT