Skip to content

majeeddl/bpmn-js-react

Repository files navigation

bpmn-js-react

JavaScript Style Guide 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>
  );
};

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

License

MIT © Majeed Dourandeesh

All Contributors