@mochabug/adapt-react

React component for Adapt.

npm install @mochabug/adapt-react

Requires React 17, 18, or 19.

Quickstart

import { Adapt } from '@mochabug/adapt-react';

<Adapt id="auto-123" style={{ height: 600 }} />

If the automation requires authentication:

<Adapt id="auto-123" authToken="your-token" style={{ height: 600 }} />

SSR (Next.js)

Keep auth token on server:

// app/page.tsx (Server Component)
import { startSession } from '@mochabug/adapt-core';

export default async function Page() {
  const authToken = await getAuthTokenFromBackend();
  const { token } = await startSession({ id: 'auto-123' }, authToken);

  return <AutomationClient sessionToken={token} />;
}

// components/AutomationClient.tsx (Client Component)
'use client';
import { Adapt } from '@mochabug/adapt-react';

export function AutomationClient({ sessionToken }) {
  return <Adapt id="auto-123" sessionToken={sessionToken} style={{ height: 600 }} />;
}

Session inheritance

// direct
<Adapt id="auto-123" inheritToken="token-from-parent" />

// from URL hash: example.com#mb_session=xxx
<Adapt id="auto-123" inheritFrom={{ hash: 'mb_session' }} />

Fork display

// side-by-side
<Adapt id="auto-123" forkDisplayMode="side-by-side" sideBySideSplit={60} />

// dialog
<Adapt id="auto-123" forkDisplayMode="dialog" dialogBackdropClose />

Callbacks

<Adapt
  id="auto-123"
  onSession={(status, fork) => console.log(status, fork)}
  onOutput={(output) => console.log(output)}
/>

Advanced: Multiple transmitters or initial signals

For automations with multiple entry points or when you need to pass initial data:

import { Adapt, type SignalDataJson } from '@mochabug/adapt-react';

// Start from a specific transmitter
<Adapt
  id="auto-123"
  authToken="your-token"
  transmitter="my-transmitter"
  style={{ height: 600 }}
/>

// Start with initial signals (data must be base64 encoded)
const signals: { [key: string]: SignalDataJson } = {
  'input': {
    mimeType: 'text/plain',
    data: btoa('Hello World')
  }
};

<Adapt
  id="auto-123"
  authToken="your-token"
  transmitter="file-processor"
  signals={signals}
  style={{ height: 600 }}
/>

Props

| Prop | Type | |------|------| | id | string (required) | | sessionToken | string | | authToken | string | | transmitter | string | | signals | { [key: string]: SignalDataJson } | | inheritToken | string | | inheritFrom | { hash: string } \| { param: string } | | forkDisplayMode | 'side-by-side' \| 'dialog' | | sideBySideSplit | number (0-100) | | dialogBackdropClose | boolean | | onSession | (status, fork?) => void | | onOutput | (output) => void | | className | string | | style | CSSProperties |

License

ISC © mochabug AB