@probat/react

React SDK for Probat A/B testing. Automatic impression and click tracking with zero boilerplate.

Install

npm install @probat/react

Quick Start

Wrap your app root with the provider (Next.js App Router example):

// app/providers.tsx
"use client";
import { ProbatProviderClient } from "@probat/react";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ProbatProviderClient userId="your-user-uuid">
      {children}
    </ProbatProviderClient>
  );
}

Create a thin experiment wrapper — one per experiment:

// components/CTAButton/CTAButton.experiment.tsx
"use client";
import { Experiment } from "@probat/react";
import { CTAButton } from "./CTAButton";
import { CTAButtonAI } from "./CTAButton.ai-v1";

export function CTAButtonExperiment() {
  return (
    <Experiment
      id="cta-copy-test"
      control={<CTAButton />}
      variants={{ ai_v1: <CTAButtonAI /> }}
    />
  );
}

That's it. Impressions (50% visible for 250ms) and clicks are tracked automatically.

Custom Metrics

const { capture } = useProbatMetrics();
capture("purchase", { revenue: 42 });

Run the Example

cd packages/probat-react/example
node mocks/server.ts &     # mock API on :3001
npx next dev                # app on :3000

Docs

See SPEC.md for the full event schemas, assignment rules, dedupe logic, and edge cases.