@trevosdk/react

React bindings for Trevo experiments: a provider and hooks over @trevosdk/browser.

npm install @trevosdk/react

// app root
import { TrevoProvider } from '@trevosdk/react';

<TrevoProvider apiKey={process.env.NEXT_PUBLIC_TREVO_API_KEY}>{children}</TrevoProvider>;

// any component
import { useExperiment } from '@trevosdk/react';

const variant = useExperiment('checkout-cta');
return <p>{variant === 'treatment' ? 'A' : 'B'}</p>;

Returning visitors resolve their variant from the SDK's warm cache before first paint. A first-time visitor briefly renders control until config loads, then the assigned variant — nothing is ever hidden. Exposure fires on the variant actually rendered.

Flicker-free SSR

Resolve assignments on the server and pass them in, so the first paint is correct for everyone. On Next.js, @trevosdk/nextjs does the server half:

<TrevoProvider apiKey={apiKey} bootstrap={bootstrap}>{children}</TrevoProvider>;
// …or per experiment, keeping other routes static:
const variant = useExperiment('checkout-cta', { initialVariant: bootstrap['checkout-cta'] });

Typed variants (multi-arm)

Declare an experiment's variants once with defineExperiment (re-exported here) to get a typed union back and exhaustive handling — an arm added in Trevo that the code doesn't handle is a compile error, not a silent fallthrough:

import { assertNever, defineExperiment, useExperiment } from '@trevosdk/react';

const emailTiming = defineExperiment('email-capture-timing', [
  'control',
  'before-checkout',
  'after-payment',
]);

function Checkout() {
  const variant = useExperiment(emailTiming); // 'control' | 'before-checkout' | 'after-payment'
  switch (variant) {
    case 'control':
      return <NoEmailCapture />;
    case 'before-checkout':
      return <EmailBeforeCheckout />;
    case 'after-payment':
      return <EmailAfterPayment />;
    default:
      return assertNever(variant); // fails to compile if a variant is unhandled
  }
}

A resolved value outside the declared set falls back to the first variant and logs a warning — surfacing drift between the shipped code and the running experiment.

Full docs at docs.trevosdk.com.