@octopus-diagram/react

Thin, optional React adapter for @octopus-diagram/core and @octopus-diagram/svg. It contains no BPMN logic — the core packages remain usable without React.

import { BpmnDiagramView, useBpmnDiagram, useHistory, useValidation } from '@octopus-diagram/react';

export function Editor() {
  const diagram = useBpmnDiagram();
  const { canUndo, undo } = useHistory(diagram);
  const { valid } = useValidation(diagram);
  return (
    <>
      <button disabled={!canUndo} onClick={undo}>Undo</button> {valid ? 'valid' : 'invalid'}
      <BpmnDiagramView diagram={diagram} snap={10} onElementSelected={({ element }) => console.log(element.id)} />
    </>
  );
}

Requires react ≥ 18.2 as a peer dependency. See the API reference.

License: MIT.