`@duabalabs/sellub-react`

React bindings for sellub-client. Currently ships useSubscription for gating premium content; component primitives (<PriceGate>, <Checkout>, <CatalogBrowser>) are on the roadmap.

Install

pnpm add @duabalabs/sellub-react @duabalabs/sellub-client react

`useSubscription`

Pass any client that exposes a checkSubscription({ appId, email }) method (both @duabalabs/sellub-client and @duabalabs/dps-client qualify).

import { useSubscription } from "@duabalabs/sellub-react";
import { createDpsClient } from "@duabalabs/dps-client";
 
const client = createDpsClient({
  baseUrl: process.env.NEXT_PUBLIC_DPS_BASE_URL!,
  appId: "duabanti",
});
 
export function PremiumGate({ email, children }: { email: string; children: React.ReactNode }) {
  const sub = useSubscription({ appId: "duabanti", email, client });
 
  if (sub.loading) return <p>Checking subscription…</p>;
  if (sub.error)   return <p className="text-red-600">Couldn't check status</p>;
  if (!sub.active) return <UpgradePrompt />;
 
  return <>{children}</>;
}

Returned state

Field	Type	Meaning
`loading`	`boolean`	True while the request is in-flight
`active`	`boolean`	True if the subscription is currently active
`tier`	`string \| null`	Tier name (e.g. `"pro"`)
`expiresAt`	`string \| null`	ISO 8601 expiry (or `null` for non-expiring tiers)
`error`	`Error \| null`	Last error from the client

Roadmap (v0.2+)

<SellubCheckout> — drop-in checkout component wrapping externalPayments.initialize + redirect.
<PriceGate> — composable wrapper around useSubscription.
<CatalogBrowser> — minimal catalog/list/detail components powered by the upcoming shop namespace in sellub-client.
<InvoiceLink> — render hosted invoice links from invoices.create.

Track package-status for the live state.

Why so small?

We deliberately kept 0.1.x to one hook so the API has room to grow without breaking integrations. If you need richer UI today, build it directly on sellub-client — every primitive is intentionally framework-free.

sellub-client — the underlying transport.
sellub-react-native — same hook, RN entry point.

sellub-webhooks sellub-react-native

@duabalabs/sellub-react