Click → modal
Surface params in a dialog. Wire emits a node.click event for every node in the canvas. Listen for it, open a modal, and render the option panel inside.
Try it
Click any node to open its options dialog. Press Esc or click the backdrop to close.
Click any node
Click any node above to open its options dialog. Press Esc or click the backdrop to close.
The pattern
One onEvent handler narrows on node.click and stores the clicked node id. The dialog mounts WireOptionPanel with that id and the option catalog — Wire renders the form, validates, and dispatches actions back into the diagram.
tsx
import { useState } from "react";
import { WireProvider, WireCanvas, WireOptionPanel } from "@aigentive/wire-react";
function FlowWithModal({ diagram, options }) {
const [openId, setOpenId] = useState<string>();
return (
<WireProvider
defaultDiagram={diagram}
onEvent={(event) => {
if (event.type === "node.click") setOpenId(event.nodeId);
}}
>
<WireCanvas mode="view" />
{openId && (
<Modal onClose={() => setOpenId(undefined)}>
<WireOptionPanel catalog={options} nodeId={openId} />
</Modal>
)}
</WireProvider>
);
}