Bpmn-js-react NPM

bpmn-js-react

All Contributors Issue Open Issue Close

This project is developed for using Use bpmn-js to display BPMN 2.0 diagrams in a React application.

Install

yarn add bpmn-js-react 

or

npm install --save bpmn-js-react

Usage

import { BpmnJsReact,useBpmnJsReact } from "bpmn-js-react";

const ComponentForBpmnViewer = (props) => {
  return <BpmnJsReact xml={xml} />;
};

const ComponentForBpmnModeler = (props) => {

  const bpmnReactJs = useBpmnJsReact();
 
  const saveXml = async () => {
    const result = await bpmnReactJs.saveXml()

    console.log(result?.xml)
  }

  return (
     <div>
         <BpmnJsReact  useBpmnJsReact={bpmnReactJs} mode="edit" xml={xml} />
         <button onClick={()=> saveXml()}>Save Xml</>
     </div>
  );
};