bpmn-js-react

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>
  );
};

Props

Name	Type	Description
mode	'view' | 'edit'
xml	string	xml string of bpmn
height	number	Default value is 300
click	function	This function is called when you do click on bpmn elemnt
dbclick	function	This function is called when you do dbclick on bpmn elemnt

Resources

• Issues

License

MIT © Majeed Dourandeesh