React SDK

The React package wraps the browser SDK with a provider and hooks.

Provider

import { PlandalfProvider } from "@plandalf/react";

export function App() {
  return (
    <PlandalfProvider publicKey="pk_live_..." apiBase="https://acme.plandalf.com">
      <CheckoutButton />
    </PlandalfProvider>
  );
}

PlandalfProvider creates one SDK instance and passes it through React context.

Present an offer

import { usePresent } from "@plandalf/react";

export function CheckoutButton() {
  const { present, presenting } = usePresent();

  return (
    <button disabled={presenting} onClick={() => present("pro-plan", { frame: "modal" })}>
      Buy Pro
    </button>
  );
}

Access the SDK directly

import { useEffect } from "react";
import { usePlandalf } from "@plandalf/react";

export function IdentifyUser({ userJwt }: { userJwt: string }) {
  const sdk = usePlandalf();

  useEffect(() => {
    sdk.identify(userJwt);
    return () => sdk.reset();
  }, [sdk, userJwt]);

  return null;
}

Public React surface

Use these React exports for new integrations:

• PlandalfProvider
• usePlandalf
• useGate
• usePresent
• Gate
• useGateTrigger

For React work, prefer PlandalfProvider, hooks, and SDK flows.

Related docs

• Install the SDK
• Configure the SDK
• Live events