Rendering static or dynamic BPMN component in React

[noobDev31]

I am trying to render a BPMN component without any interactive parts that let’s you compose flow elements on the screen. It should only render static data on the below codesandbox -

https://codesandbox.io/p/sandbox/nameless-grass-98fwsp-forked-n7yqmf?file=%2Fsrc%2FApp.tsx

Also I am trying to find if the nodeBadges can have hardcoded colors is it possible to do so?

but for some reason i don’t see the diagram where am I going wrong?

Update - I do got it working but i had to fetch the diagram inside the useEffect
I have two requirements now -

1. For the static BPMN viewer -
   is there any way that i can pass a string to my state bpmnXml from the parent and the diagrams get loaded

2. Create dynamic diagrams as well such that i can add nodes(badges) to the shapes such that it can be marked with different colours.

like green 1 and. blue 1 in the above image

I just want to know the feasibility of the above.

[noobDev31]

Update -

I have figured the 1st point.

I only need to know if 2nd can be achieved.

[noobDev31]

@philippfromme @nikku anyone please?

[nikku]

@noobDev31 You can checkout react-bpmn to see a basic integration of bpmn-js into React. It should be fairly straight forward to migrate the example to hooks.

In a nutshell:

• Use a ref for a DOM element to mount the BPMN editor to.
• Save the editor itself in a ref for future use
• React to external XML to change and badge meta-data
• Use the existing BpmnViewer#importXML and overlay apis to update the editor contents when your component props change.

[noobDev31]

is it necessary to use react-bpmn can i do it without that?

[Hadi_Jami]

@noobDev31 Check this link

[noobDev31]

It’s an archived repository @Hadi_Jami
but yes thanks the code is something I can take inspiration from