@ohmyfin/swift-draft-react

Drop-in React components and headless hooks for drafting, validating and serialising SWIFT MT (MT103, MT202, MT202COV, MT199) and ISO 20022 MX (pacs.008, pacs.009, pacs.002, camt.053, camt.054) messages. A thin React layer on top of @ohmyfin/swift-draft — same pure-function engine, now wired up with useState, useMemo and ARIA.

Install

npm install @ohmyfin/swift-draft @ohmyfin/swift-draft-react react

1. Drop-in form

import { Mt103Form } from "@ohmyfin/swift-draft-react";

<Mt103Form
  variant="tailwind"
  defaultValues={{ senderBic: "BANKGB22XXX", receiverBic: "DEUTDEFFXXX" }}
  onSubmit={({ values, serialized, report }) => {
    if (report.ok) console.log(serialized);
    else console.warn(report.issues);
  }}
/>

2. Headless hook + your own UI

import { useMt103Form, UetrInput, BicInput } from "@ohmyfin/swift-draft-react";

const form = useMt103Form();
<BicInput value={form.values.senderBic} onChange={v => form.setValue("senderBic", v)} />
<BicInput value={form.values.receiverBic} onChange={v => form.setValue("receiverBic", v)} />
<UetrInput value={form.values.uetr ?? ""} onChange={v => form.setValue("uetr", v)} />
<button disabled={!form.isValid} onClick={() => form.submit(({serialized}) => console.log(serialized))}>
  Generate
</button>

Live preview — interactive MT103 draft

The form below is the engine + validators that ship in the React package, rendered as plain DOM so it works without a JSX runtime. Fill in the fields — validation runs on every keystroke and the serialised 4-block MT103 appears under the form once the payload is valid.

Supported message kinds