@mandaitor/react

React UI components and hooks for integrating Mandaitor delegation management into your application.

Installation

npm install @mandaitor/react @mandaitor/sdk
# or
pnpm add @mandaitor/react @mandaitor/sdk

Quick Start

Wrap your application with MandaitorProvider and use the pre-built components:

import { MandaitorProvider, MandateCreator, MandateViewer } from "@mandaitor/react";

function App() {
  return (
    <MandaitorProvider
      apiKey="mk_live_..."
      tenantId="tnt_acme_prod"
    >
      <MandateCreator />
      <MandateViewer mandateId="mnd_abc123" />
    </MandaitorProvider>
  );
}

Components

| Component | Description | |-----------|-------------| | MandaitorProvider | Context provider that initialises the SDK client | | MandateCreator | Form for creating new delegation mandates | | MandateViewer | Read-only display of a single mandate with status | | MandateManager | Full CRUD interface for managing mandates (list, revoke, suspend, reactivate) | | MandateVerifier | Interactive verification form for testing delegation claims | | APIKeyManager | API key display and management component | | WidgetConfigDashboard | Dashboard for configuring the embeddable consent widget |

Hooks

| Hook | Description | |------|-------------| | useMandaitorSDK() | Access the SDK client instance from context | | useMandate(id) | Fetch and cache a single mandate | | useMandates(options?) | Fetch and cache a paginated list of mandates |

Storybook

Component stories are co-located with their components. Run Storybook from the monorepo root:

pnpm storybook

Development

# Build
pnpm build

# Run unit tests
pnpm test:unit

# Run integration tests
pnpm test:integration