splitch

DocsSDKreact.md

React bindings.

Provide one initialized browser client and subscribe each hook to one Flag.

@splitch/sdk/react borrows an initialized browser client. Each hook subscribes to one Flag, so a changed Flag re-renders only its own subscribers. The first committed read redeems its Exposure Ticket.

import { createRoot } from "react-dom/client";
import { createSplitchBrowserClient } from "@splitch/sdk/browser";
import { SplitchProvider, useFlag, useFlagDetails } from "@splitch/sdk/react";

const splitch = createSplitchBrowserClient({
  clientKey: "pk_...",
  context: { targetingKey: "user-123" },
});
await splitch.init();

function Checkout() {
  const enabled = useFlag("new-checkout", false);
  const details = useFlagDetails("new-checkout", false);
  return <p>{enabled ? details.variantName : "control"}</p>;
}

createRoot(document.getElementById("root")!).render(
  <SplitchProvider client={splitch}>
    <Checkout />
  </SplitchProvider>,
);

useSplitchClient() returns the borrowed client for flush(), close(), and imperative reads. Hooks outside SplitchProvider throw SDK_REACT_PROVIDER_MISSING.

An unknown Flag preserves the browser client's loud FLAG_NOT_FOUND details and returns the caller's Default Variant.