Skip to main content

React Integration

The @mandaitor/react package provides ready-to-use React components and hooks for building delegation UIs.

Installation​

npm install @mandaitor/react @mandaitor/sdk react react-dom

Setup: MandaitorProvider​

Wrap your application (or the relevant subtree) with the MandaitorProvider. This makes the SDK client available to all child components via React Context.

import { MandaitorProvider } from "@mandaitor/react";

function App() {
  return (
    <MandaitorProvider
      tenantId="tnt_your_tenant_id"
      apiKey={process.env.REACT_APP_MANDAITOR_API_KEY}
      theme={{
        primaryColor: "#F5A623",
        mode: "dark",
      }}
    >
      <YourApp />
    </MandaitorProvider>
  );
}

Components​

MandateCreator​

Renders a form for creating new mandates with action checkboxes and an expiry date picker.

import { MandateCreator } from "@mandaitor/react";

<MandateCreator
  availableActions={[
    { id: "construction.validation.approve", label: "Approve Validation" },
    { id: "construction.validation.flag", label: "Flag Issue" },
  ]}
  defaultResources={["monco:project:proj_123/*"]}
  onMandateCreated={(mandate) => console.log("Created:", mandate.mandate_id)}
/>;

MandateManager​

Displays a paginated list of mandates with suspend, reactivate, and revoke actions.

import { MandateManager } from "@mandaitor/react";

<MandateManager onSelectMandate={(id) => navigate(`/mandates/${id}`)} />;

Hooks​

useMandate​

Fetches a single mandate by ID, optionally including its audit events.

import { useMandate } from "@mandaitor/react";

const { mandate, events, isLoading, error } = useMandate("mdt_abc123", {
  includeEvents: true,
});

useMandates​

Fetches a paginated list of mandates with filtering and infinite scroll support.

import { useMandates } from "@mandaitor/react";

const { mandates, isLoading, hasMore, loadMore } = useMandates({
  status: "ACTIVE",
  limit: 20,
});