@retainrabbit/react

React bindings over @retainrabbit/js. Keyless and client-side ("use client"). Accepts no API key.

Install

pnpm add @retainrabbit/react @retainrabbit/js react

Usage

"use client";
import {
  RetainRabbitProvider,
  CancelGuard,
  RetainRabbitButton,
  useRetainRabbit,
} from "@retainrabbit/react";

function App() {
  return (
    <RetainRabbitProvider
      origin="https://app.example.com"
      workspaceId="ws_123"
      defaultFlowId="flow_cancel"
      mode="overlay"
    >
      {/* Guard a real cancel control: clicks open the flow; a still-cancel re-runs the
          child's own action unless you supply onCanceled. */}
      <CancelGuard onSaved={() => console.log("kept!")}>
        <button onClick={runRealCancel}>Cancel subscription</button>
      </CancelGuard>

      {/* Or a standalone button that just reports the outcome. */}
      <RetainRabbitButton onOutcome={(o) => console.log(o)}>
        Manage plan
      </RetainRabbitButton>
    </RetainRabbitProvider>
  );
}

// Imperative:
function ManageButton() {
  const { open, identify } = useRetainRabbit();
  identify({ email: "[email protected]" });
  return <button onClick={() => open()}>Open flow</button>;
}