# React SDK
Use PlandalfProvider and React hooks to present offers, identify customers, check gates, and render checkout experiences.
Source: /docs/sdk/react
Last modified: 2026-06-18
The React package wraps the browser SDK with a provider and hooks.

## Provider

```tsx
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

```tsx
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

```tsx
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](/docs/sdk/install)
- [Configure the SDK](/docs/sdk/configure)
- [Live events](/docs/sdk/events)